Protractor - 物件

---

---

本章詳細討論了 Protractor 中的物件。

什麼是頁面物件？

頁面物件是一種設計模式，它在編寫端到端測試中變得流行起來，目的是增強測試維護並減少程式碼重複。它可以定義為一個面向物件的類，作為被測應用 (AUT) 頁面介面。但是，在深入研究頁面物件之前，我們必須瞭解自動化 UI 測試的挑戰以及處理這些挑戰的方法。

自動化 UI 測試的挑戰

以下是自動化 UI 測試的一些常見挑戰：

UI 更改

使用 UI 測試時非常常見的問題是 UI 中發生的更改。例如，按鈕或文字框等經常發生更改，併為 UI 測試帶來問題。

缺乏 DSL（領域特定語言）支援

UI 測試的另一個問題是缺乏 DSL 支援。由於這個問題，很難理解正在測試的內容。

大量重複/程式碼重複

UI 測試中的下一個常見問題是存在大量重複或程式碼重複。可以透過以下幾行程式碼來理解：

element(by.model(‘event.name’)).sendKeys(‘An Event’);
element(by.model(‘event.name’)).sendKeys(‘Module 3’);
element(by.model(‘event.name’));

維護困難

由於上述挑戰，維護變得很頭疼。這是因為我們必須找到所有例項，替換為新名稱、選擇器和其他程式碼。我們還需要花費大量時間來使測試與重構保持一致。

測試失敗

UI 測試中的另一個挑戰是測試中發生大量失敗。

處理挑戰的方法

我們已經看到了一些 UI 測試的常見挑戰。處理此類挑戰的一些方法如下：

手動更新引用

處理上述挑戰的第一個選擇是手動更新引用。此選項的問題在於我們必須手動更改程式碼以及測試。當您只有一個或兩個測試檔案時，可以這樣做，但是如果專案中有數百個測試檔案怎麼辦？

使用頁面物件

處理上述挑戰的另一個選擇是使用頁面物件。頁面物件基本上是一個簡單的 JavaScript，它封裝了 Angular 模板的屬性。例如，以下規範檔案是在沒有頁面物件和有頁面物件的情況下編寫的，以便理解其區別：

無頁面物件

describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      browser.get('http://www.angularjs.org');
      element(by.model('yourName')).sendKeys('Julie');
      var greeting = element(by.binding('yourName'));
      expect(greeting.getText()).toEqual('Hello Julie!');
   });
});

有頁面物件

要使用頁面物件編寫程式碼，首先需要建立一個頁面物件。因此，上面示例的頁面物件可能如下所示：

var AngularHomepage = function() {
   var nameInput = element(by.model('yourName'));
   var greeting = element(by.binding('yourName'));

   this.get = function() {
      browser.get('http://www.angularjs.org');
   };

   this.setName = function(name) {
      nameInput.sendKeys(name);
   };
   
   this.getGreetingText = function() {
      return greeting.getText();
   };
};
module.exports = new AngularHomepage();

使用頁面物件組織測試

我們在上面的示例中已經看到了頁面物件的使用來處理 UI 測試的挑戰。接下來，我們將討論如何使用它們來組織測試。為此，我們需要修改測試指令碼，而無需修改測試指令碼的功能。

示例

為了理解這個概念，我們採用上面帶有頁面物件的配置檔案。我們需要修改測試指令碼如下：

var angularHomepage = require('./AngularHomepage');
describe('angularjs homepage', function() {
   it('should greet the named user', function() {
      angularHomepage.get();

      angularHomepage.setName('Julie');
   
      expect(angularHomepage.getGreetingText()).toEqual
      ('Hello Julie!');
   });
});

請注意，頁面物件的路徑相對於您的規範。

同樣，我們還可以將測試套件分成多個測試套件。然後可以更改配置檔案如下：

exports.config = {
   // The address of a running selenium server.
   seleniumAddress: 'https://:4444/wd/hub',

   // Capabilities to be passed to the webdriver instance.
   capabilities: {
      'browserName': 'chrome'
   },
   // Spec patterns are relative to the location of the spec file. They may
   // include glob patterns.
   suites: {
      homepage: 'tests/e2e/homepage/**/*Spec.js',
      search: ['tests/e2e/contact_search/**/*Spec.js',
         'tests/e2e/venue_search/**/*Spec.js']
   },

   // Options to be passed to Jasmine-node.
   jasmineNodeOpts: {
      showColors: true, // Use colors in the command line report.
   }
};

現在，我們可以輕鬆地在執行一個或另一個測試套件之間切換。以下命令將僅執行測試的主頁部分：

protractor protractor.conf.js --suite homepage

同樣，我們可以使用以下命令執行特定的測試套件：

protractor protractor.conf.js --suite homepage,search