数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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: 'https://127.0.0.1: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 的元素的 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 属性的计算值。以下是语法和示例 -
语法
以下是使用 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 的元素的颜色属性的计算值。在这里，我们使用了 window.getComputedStyle() 方法来获取元素的计算样式，以及 getPropertyValue() 方法来获取颜色属性的值。
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 应用程序功能的所有方面，包括视觉外观。
243 次查看
