頁面物件模型
頁面物件方法是一種流行的模式,藉由將 Web 應用程式的頁面或頁面片段封裝成物件,來編寫端對端測試。
頁面物件的目的是允許軟體用戶端執行任何動作並查看人類可以透過抽象化存取和操作頁面所需的底層 html 動作來進行的任何動作。
有關頁面物件的完整介紹,請參閱這篇文章。
設定頁面物件
若要建立頁面物件,只需建立一個具有描述頁面屬性的物件。每個頁面物件應位於單獨的檔案中,並放置在指定的資料夾中。
Nightwatch 會從 page_objects_path
組態屬性中指定的資料夾(或多個資料夾)讀取頁面物件,例如:
{
"page_objects_path": ["nightwatch/pages"]
}
page_objects_path
屬性也可以是資料夾陣列,因此您可以邏輯地將頁面物件分成較小的群組。
Url 屬性
您可以選擇性地新增一個 url
屬性,指定頁面的 URL。若要導覽至頁面,您可以在頁面物件上呼叫 navigate
方法。
URL 通常會定義為字串
module.exports = {
url: 'https://google.com',
elements: {}
};
如果 URL 是動態的,它也可以是一個函式。其中一個使用案例是支援不同的測試環境。您可以建立一個在頁面內容中呼叫的函式,因此您可以執行
module.exports = {
url: function() {
return this.api.launchUrl + '/login';
},
elements: {}
};
頁面元素
大多數時候,您會想要在頁面上定義元素,這些元素將會透過指令和斷言與您的測試互動。使用 elements
屬性可以輕鬆實現此目的,這樣您所有的元素都會定義在單一位置。尤其是在較大型的整合測試中,使用 elements
將有助於保持測試程式碼 DRY。
在 css 和 xpath 定位策略之間切換會在內部處理,因此您不需要在測試中呼叫 useXpath
和 useCss
。預設的 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 類別。