极客笔记CSS 如何使用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的元素的颜色属性。我们期望颜色属性的计算值为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属性的名称作为参数，并返回其计算值。以下是语法和示例 –
语法
以下是使用protractor的getCssValue() 方法测试CSS属性的语法。
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)。
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属性包含应用于元素的内联样式。以下是语法和示例：
语法
如下是使用protractor的getAttribute()方法测试CSS属性的语法。
const element = element(by.css('.test-class'));
expect(element.getAttribute('style')).toContain('color: green;');
示例
在给定的示例中，我们正在测试带有类名 test-class 的元素的样式属性是否包含 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属性的计算值。下面是语法和示例：
语法
下面是使用protractor的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属性。在测试Web应用程序（包括Angular应用程序）中使用Protractor已被证明是可靠和高效的。有了这些知识，我们可以编写有效的端到端测试来覆盖Web应用程序功能的所有方面，包括视觉外观。