如何使用 Protractor 測試元素的 CSS 屬性？-css教學-PHP中文網

首頁

web前端

css教學

如何使用 Protractor 測試元素的 CSS 屬性？

王林

Aug 27, 2023 am 10:37 AM

如何使用 Protractor 测试元素的 CSS 属性？

測試 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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除