测试 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 应用程序功能的所有方面，包括视觉外观。
