定義頁面元素

宣告元素

大多數時候，您會想要在頁面上定義元素，讓您的測試透過指令和斷言與之互動。使用 elements 屬性可以簡單地做到這一點，讓您的所有元素都定義在單一位置。尤其是在較大型的整合測試中，使用 elements 將有助於保持測試程式碼 DRY。

CSS 和 XPath 定位策略之間的切換會在內部處理，因此您無需在測試中呼叫 useXpath() 或 useCss()。預設的 locateStrategy 是 CSS，但您也可以指定 XPath

nightwatch/pages/examplePage.js 
module.exports = {
  elements: {
    searchBar: {
      selector: 'input[type=text]'
    },
    submit: {
      selector: '//[@name="q"]',
      locateStrategy: 'xpath'
    }
  }
};

或者，如果您要建立與預設定位策略相同的元素，可以使用簡寫
nightwatch/pages/examplePage.js 
module.exports = {
  elements: {
    searchBar: 'input[type=text]'
  }
};

使用頁面元素

使用 elements 屬性可讓您在呼叫元素指令和斷言 (click() 等) 時，使用名稱加上「@」前綴來參考元素，而不是選擇器。

選擇性地，您可以定義物件陣列

nightwatch/pages/examplePage.js 
var sharedElements = {
  mailLink: 'a[href*="mail.google.com"]'
};


module.exports = {
  elements: [
    sharedElements,
    { searchBar: 'input[type=text]' }
  ]
};

將 elements 和 url 放在一起，假設您有以下定義的程式碼儲存為 googlePage.js 檔案

nightwatch/pages/googlePage.js 
module.exports = {
  url: 'https://google.com',
  elements: {
    searchBar: {
      selector: 'input[type=text]'
    },
    submit: {
      selector: '//[@name="q"]',
      locateStrategy: 'xpath'
    }
  }
};

在您的測試中，您將如下使用它
tests/sampleTest.js 
describe('sample test with page objects', function() {
  it('Test', function (browser) {
    var google = browser.page.google();
    

    google.navigate()
      .assert.title('Google')
      .assert.visible('@searchBar')
      .setValue('@searchBar', 'nightwatch')
      .click('@submit');
    

    browser.end();
  });
});

元素屬性

為了支援更靈活地與頁面物件元素互動，元素可以指定為物件，該物件必須至少包含 selector 屬性。在選擇器旁邊，可以指定其他屬性。以下是完整清單

  • selector - 元素選擇器名稱 (例如：'@searchBar')
  • locateStrategy - 例如 'css selector'
  • index - 用於在查詢傳回多個元素時，鎖定特定元素。通常，只會使用第一個元素 (index = 0)，但使用 index 屬性，您可以指定結果中的任何元素。
  • abortOnFailure - 用於在使用 waitForElement* 指令時覆寫此設定
  • timeout - 用於在使用 waitForElement* 指令或斷言時覆寫預設逾時
  • retryInterval - 用於在使用 waitForElement* 指令或斷言時覆寫預設重試間隔
  • suppressNotFoundErrors - 如果找不到元素，某些元素指令 (例如 .click() 或 .getText()) 將會擲回 NoSuchElement 錯誤，導致測試失敗。如果此選項設定為 true，則會忽略此錯誤。

篩選元素

假設在上面的範例中，searchBar 元素選擇器傳回 3 個元素，而您對第二個元素感興趣。

nightwatch/pages/googlePage.js
module.exports = {
  elements: {
    searchBar: {
      selector: 'input[type=text]',
      index: 1
    }
  }
};

您也可以在指令中將元素指定為物件選擇器來覆寫頁面元素中定義的內容，也可以接收 index

tests/sampleTest.js 
describe('sample test with page objects', function() {
  it('Test', function (browser) {
    var google = browser.page.google();
    

    google
      .navigate()
      .assert.title('Google');
    

    google.waitForElementVisible('@searchBar') // 2nd input element
    google.waitForElementVisible({selector:'@searchBar', index:1}, function(result){}); // 1st div
    

    google.click('@submit');
    

    browser.end();
 });
});

虛擬選擇器

使用具名的頁面物件元素 (以 '@' 開頭) 時，您也可以使用 CSS 虛擬選擇器 (以 v1.1 開頭)。

tests/sampleTest.js 
module.exports = {
  'Test': function (browser) {
    google.waitForElementVisible('@searchBar:first-child');
    

    google.waitForElementVisible('@searchBar:nth-child(1)');
  }
};

建議內容