頁面物件方法是一種流行的模式,藉由將 Web 應用程式的頁面或頁面片段封裝成物件,來編寫端對端測試。

頁面物件的目的是允許軟體用戶端執行任何動作並查看人類可以透過抽象化存取和操作頁面所需的底層 html 動作來進行的任何動作。

有關頁面物件的完整介紹,請參閱這篇文章

設定頁面物件

若要建立頁面物件,只需建立一個具有描述頁面屬性的物件。每個頁面物件應位於單獨的檔案中,並放置在指定的資料夾中。

Nightwatch 會從 page_objects_path 組態屬性中指定的資料夾(或多個資料夾)讀取頁面物件,例如:

nightwatch.json
{
  "page_objects_path": ["nightwatch/pages"]
}

page_objects_path 屬性也可以是資料夾陣列,因此您可以邏輯地將頁面物件分成較小的群組。

Url 屬性

您可以選擇性地新增一個 url 屬性,指定頁面的 URL。若要導覽至頁面,您可以在頁面物件上呼叫 navigate 方法。

URL 通常會定義為字串

nightwatch/pages/examplePage.js
module.exports = {
  url: 'https://google.com',
  elements: {}
};

如果 URL 是動態的,它也可以是一個函式。其中一個使用案例是支援不同的測試環境。您可以建立一個在頁面內容中呼叫的函式,因此您可以執行

nightwatch/pages/examplePage.js
module.exports = {
  url: function() { 
    return this.api.launchUrl + '/login'; 
  },
  elements: {}
};

頁面元素

大多數時候,您會想要在頁面上定義元素,這些元素將會透過指令和斷言與您的測試互動。使用 elements 屬性可以輕鬆實現此目的,這樣您所有的元素都會定義在單一位置。尤其是在較大型的整合測試中,使用 elements 將有助於保持測試程式碼 DRY。

在 css 和 xpath 定位策略之間切換會在內部處理,因此您不需要在測試中呼叫 useXpathuseCss。預設的 locateStrategy 是 css,但您也可以指定 xpath。

元素屬性

為了支援在與頁面物件元素互動時有更大的彈性,可以將元素指定為物件,該物件至少需要包含 selector 屬性。在選擇器旁邊,可以指定其他屬性。以下是完整清單

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

頁面區段

有時候定義頁面區段會很有用。區段執行兩件事

  • 在頁面下提供命名空間層級
  • 提供元素層級的巢狀結構,以便在區段內定義的任何元素都是 DOM 中其父區段的子代

您可以使用 sections 屬性建立區段。

頁面專屬指令

您可以使用 commands 屬性將自訂指令新增至您的頁面物件。這是封裝頁面邏輯的實用方式,否則這些邏輯會存在於測試中或多個測試中。

Nightwatch 會在頁面或區段的內容中呼叫指令。用戶端指令 (例如 pause) 可透過 this.api 取得。對於鏈接,每個函式都應傳回頁面物件或區段。

從 Nightwatch 2 開始,也可以將頁面指令匯出為 ES6 類別。