資料結構
網路
關係資料庫管理系統
作業系統
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://: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.tw');
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 次檢視
