自动化 End-End 测试 Nightwatch.js 之踩雷笔记：Page Objects

关於 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
    })