如何使用 Protractor 测试元素的 CSS 属性？-css教程-PHP中文网

如何使用 Protractor 测试元素的 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 属性？的详细内容。更多信息请关注PHP中文网其他相关文章！