如何使用 Protractor 测试元素的 CSS 属性?
测试 CSS 属性对于确保 Web 应用程序的质量至关重要。CSS 属性决定了元素在网页上的显示方式，例如字体大小、颜色和布局。测试 CSS 属性有助于检测错误，并确保应用程序的外观和功能符合预期。一个名为 Protractor 的工具为开发者提供了多种测试 CSS 属性的方法。
Protractor 是一个流行的端到端测试框架，它使用 WebDriver 自动化 Web 应用程序和浏览器之间的交互。它广泛用于测试 Angular 应用程序，但也可用于测试其他 Web 应用程序。
在本文中，我们将学习如何借助 Protractor 测试元素的 CSS 属性。我们将学习执行测试操作的不同方法。
使用 Protractor 测试元素 CSS 属性所需的步骤
使用 Protractor 测试元素 CSS 属性需要执行以下步骤。
步骤 1:设置 Protractor
要使用 Protractor，请确保它已安装在您的系统中，并安装了所需的依赖项。
安装 Protractor −
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 的元素的 color 属性。我们期望该 color 属性的计算值为 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 属性的不同方法
方法 1:使用 GetCssValue() 方法
Protractor 提供的第一个方法是 getCssValue() 方法，该方法用于获取元素 CSS 属性的计算值。此方法将 CSS 属性的名称作为参数并返回其计算值。以下是语法和示例 -
语法
以下是使用量角器的 getCssValue() 方法测试 CSS 属性的语法。
const element = element(by.css('.test-class'));
expect(element.getCssValue('color')).toEqual('rgba(53, 163, 59, 0.2)');
示例
在给定的示例中，我们正在测试类为 test 的元素的 color 属性。color 属性的预期计算值为 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)');
});
});
});
方法 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 代码，以获取类名为 test-class 的元素的 color 属性的计算值。这里我们使用了 window.getComputedStyle() 方法获取元素的计算样式，并使用 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 应用程序功能的各个方面，包括视觉外观。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
