關於 Nightwatch.js 的 Page Objects 其實 google 就可以找到很多教學，包含之前的鐵人賽就有了

不過既然叫踩雷筆記，重點還是在我遇到的一些小問題。

介紹 Page Object

Page Objects 其實是可以利用 js 先針對某一個頁面裡面的物件先設定好它的 selector，並且加上一些 function，如此就可以在不同的測試檔案中，共同呼叫這個 Page object，以降低程式碼的重複使用率。

nightwatchConfig

設定 page object 要放的位置

const nightwatchConfig = {
    page_objects_path: './page',
}

Page object 實例

var commands = {
  search: function({text}) {
      this.click('input')
          .setValue(input, text)
          .click('button')
  }
}

Page object 裡的 command 是可以使用 nightwatch 的 api，也可以使用客製化的 command

module.exports = {
  url: `https://ithelp.ithome.com.tw/`,
  commands: [commands],
  elements: {
    postBtn: {
      selector: 'button[data-target="#ir-select-series__common"]',
    },
  }
}

定義想要的 url, elements 就可以在 test file 中使用：

const dashboard = browser.page.dashboard();
dashboard.click('@postBtn')

另外也可以用客製化 command

const dashboard = browser.page.dashboard();
dashboard.clickDiv('@postBtn')

也可以串接：

const dashboard = browser.page.dashboard();
dashboard
    .clickDiv('@postBtn')
    .search({text: 'Hi'})

雷點

Page object 是不能用 url/refresh/windowHandles 的XD

因此像這樣都是不行的喔～

const dashboard = browser.page.dashboard();
dashboard.url('www.google.com')
dashboard.refresh()
dashboard.windowHandles(function(result) {
      // Do something
    })