如何使用 Protractor 测试元素的 CSS 属性？

百变鹏仔 4周前 (09-20) #CSS

文章标签如何使用

测试 CSS 属性对于确保 Web 应用程序的质量至关重要。 CSS 属性决定元素在网页上的显示方式，例如字体大小、颜色和布局。测试 CSS 属性可以帮助检测错误并确保应用程序的外观和功能符合预期。一种称为量角器的工具为开发人员提供了不同的方法来测试 CSS 属性。

Protractor 是一种流行的端到端测试框架，它使用 WebDriver 自动执行 Web 应用程序和浏览器之间的交互。它广泛用于测试 Angular 应用程序，但也可用于测试其他 Web 应用程序。

在本文中，我们将学习如何借助量角器测试元素的 CSS 属性。我们将学习不同的方法来执行测试操作。

使用 Protractor 测试元素的 CSS 属性所需的步骤

使用量角器测试元素的 CSS 属性需要执行以下步骤。

立即学习“前端免费学习笔记（深入）”；

第 1 步：设置量角器

要使用量角器，请确保它已安装在您的系统中以及所需的依赖项。

安装量角器 -

npm install -g protractor

更新二进制文件 -

webdriver-manager update

运行服务器 -

webdriver-manager start

第 2 步：创建 Conf.js 文件

Protractor 项目中的conf.js 文件是包含Protractor 测试套件的各种设置和选项的配置文件。让我们创建一个名为 conf.js 的文件

exports.config = {   seleniumAddress: 'http://localhost:4444/wd/hub',   specs: ['spec.js'],   capabilities: {      browserName: 'chrome'   },   onPrepare: function () {      browser.manage().window().maximize();   },   jasmineNodeOpts: {      showColors: true,      defaultTimeoutInterval: 30000   },     baseUrl: 'file://' + __dirname + '/',     onPrepare: function () {      browser.resetUrl = 'file://';   }};

第 3 步：创建测试规范

设置 Protractor 后，创建一个新的测试规范文件，名称任意，例如 test.js 等。我们可以在 Protractor 项目的 specs 目录中创建一个新文件。

describe('Test CSS property of an element', () => {   it('should have the correct color', () => {      browser.get('https://tutorialspoint.com');      const element = element(by.css('.test-class));      expect(element.getCssValue('color')).toEqual('rgba(53, 163, 59, 0.2)');   });});

在上面的代码中，我们使用类 test-class 测试元素的颜色属性。我们期望颜色属性的计算值为 rgba(53, 163, 59, 0.2)。

第 4 步：创建包含测试元素的 HTML 文件

<html><head>   <title>Testing</title></head><body>   <!-- Test element -->   <div class="test-class"      style="color: rgba(53, 163, 59, 0.2)">      Inner text   </div></body></html>

第 5 步：运行测试

要运行测试，请在终端中使用以下命令 -

protractor conf.js --suite css-property

在上面的命令中，conf.js 是 Protractor 项目的配置文件， --suite css-property 指定仅应运行 css-property 套件中的测试。

运行测试后，您可以在终端中查看测试结果。如果测试通过，您将看到类似这样的消息 -

测试元素的 CSS 属性

✓ 应具有正确的颜色

1 个规格，0 次失败

使用 Protractor 测试 CSS 属性的不同方法

方法一：使用GetCssValue()方法

量角器提供的第一个方法是 getCssValue() 方法，用于获取元素的 CSS 属性的计算值。此方法将 CSS 属性的名称作为参数并返回其计算值。以下是语法和示例 -

语法

下面是使用量角器的 getCssValue() 方法测试 CSS 属性的语法。

const element = element(by.css('.test-class'));expect(element.getCssValue('color')).toEqual('rgba(53, 163, 59, 0.2)');

示例

在给定的示例中，我们使用类测试类来测试元素的颜色属性。颜色属性的预期计算值为 rgba(53, 163, 59, 0.2)。

describe('Test CSS property of an element using getCssValue()', () => {   it('should have the correct color', () => {      browser.get('https://example.com');      const element = element(by.css('.test-class'));      element.getCssValue('color').then(function(value) {         expect(value).toEqual('rgba(53, 163, 59, 0.2)');      });   });});

方法二：使用GetAttribute()方法

测试元素 CSS 属性的第二种方法是使用 getAttribute() 方法获取元素的 style 属性值。 style 属性包含应用于元素的内联样式。以下是语法和示例 -

语法

下面是使用量角器的 getAttribute() 方法测试 CSS 属性的语法。

const element = element(by.css('.test-class'));expect(element.getAttribute('style')).toContain('color: green;');

示例

在给定的示例中，我们正在测试类 test-class 的元素的 style 属性是否包含 CSS 属性 color: green;

describe('Test CSS property of an element using getAttribute()', () => {   it('should have the correct color', () => {      browser.get('https://example.com');      const element = element(by.css('.test-class'));      element.getAttribute('style').then(function(value) {         expect(value).toContain('color: green);      });   });});

方法3：使用Browser.executeScript()方法

可用于测试 CSS 属性的第三种方法是 browser.executeScript() 方法，该方法在浏览器上下文中执行 JavaScript 代码并获取 CSS 属性的计算值。以下是语法和示例 -

语法

下面是使用量角器的 browser.executeScript() 方法测试 CSS 属性的语法。

const element = element(by.css('.test-class'));const color = browser.executeScript('return window.getComputedStyle(arguments[0]).getPropertyValue("color");', element);expect(color).toEqual('rgba(53, 163, 59, 0.2)');

示例

在给定的示例中，我们在浏览器上下文中执行 JavaScript 代码，以获取具有测试类类的元素的颜色属性的计算值。这里我们使用 window.getCompulatedStyle() 方法来获取元素的计算样式，并使用 getPropertyValue() 方法来获取 color 属性的值。

describe('Test CSS property of an element using browser.executeScript()', () => {   it('should have the correct color', () => {      browser.get('https://example.com');      const element = element(by.css('.test-class'));      browser.executeScript('return window.getComputedStyle(arguments[0]).color;', element).then(function(value) {         expect(value).toEqual('rgba(53, 163, 59, 0.2)');      });   });});

结论

测试元素的 CSS 属性是确保应用程序具有视觉吸引力和功能性的重要步骤。一个非常重要的工具 Protractor 用于以有效的方式执行此类测试，以测试使用 getCssValue() 和 getAttribute() 方法的元素的 CSS 属性。在本文中，我们了解了进行测试的完整步骤，现在如果您已按照本文中概述的步骤进行操作，则可以轻松设置 Protractor 并创建测试规范来测试元素的 CSS 属性。事实证明，使用 Protractor 测试 Web 应用程序（包括 Angular 应用程序）是可靠且高效的。有了这些知识，我们就可以编写有效的端到端测试，涵盖 Web 应用程序功能的所有方面，包括视觉外观。

文章推荐

如何使用 Protractor 测试元素的 CSS 属性？

使用 Protractor 测试元素的 CSS 属性所需的步骤

第 1 步：设置量角器

第 2 步：创建 Conf.js 文件

第 3 步：创建测试规范

第 4 步：创建包含测试元素的 HTML 文件

第 5 步：运行测试

使用 Protractor 测试 CSS 属性的不同方法

方法一：使用GetCssValue()方法

语法

示例

方法二：使用GetAttribute()方法

语法

示例

方法3：使用Browser.executeScript()方法

语法

示例

结论

css如何让导航栏变透明

css 怎么去除a标签的手形

css里怎样设置字体大小和字体颜色

css如何固定导航栏

css边框变圆角边框怎么写