如何使用 Protractor 測試元素的 CSS 屬性？
- 王林轉載
- 2023-08-27 10:37:021064瀏覽
測試 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中文網其他相關文章！