NightWatch使用PageObject注意事項

一.browser物件
在使用nightwatch時,所定義的測試function可以取到一個browser物件
這個browser物件可以操作官網上的api
另外在這browser物件下包含了
  1.globals:對應到nighwatch 設定檔內的globals區塊
  2.page:page下的各個function對應可以取得同檔名的PageObject
例

module.exports = {
  '登入測試':function(browser){
    const devServer = browser.globals.getServer()
     browser
      .url(`${devServer}/#login`)
      .waitForElementVisible('#loginPage', 5000)
      .clearValue('.js_siteField')
      .clearValue('.js_pwdField')
      .pause(100)
      .setValue('.js_pwdField','12345')
      .setValue('.js_userField', '')
      .pause(100)
      .click('.js_loginBtn')
      .pause(3000)
      .assert.urlEquals(`${devServer}/#home`)
      .end()
  }
}

二.為何要使用PageObject
在對於測試頁面上的dom物件,nightwatch可以使用selector來找到
要操作的dom,使用PageObject可以預先把要操作元素定義好
之後就可以用@id的形式去取得該dom參考

利用定義Page讓設計的流程更清楚
也避免直接綁在特定selector上,之後要修改比較麻煩
例

module.exports = {
  url: function(){
    let devServer = this.api.globals.getServer()
    return `${devServer}/login`
  },
  elements: {
    myel:'#loginPage',
    siteField:'.js_siteField',
    pwdField:'.js_pwdField',
    loginBtn:'.loginBtn'
  }
};

三.PageObject
要注意的是PageObject內取得的this並不是等同於
寫spec時的browser物件,
this.api才真正是對應到browser 下的api method

四.使用PageObject改寫Spec
1.取得PageObject
  例如
  browser.page.login()
2.PageObject下的API與browser的api method區別
  如果是需要操作的element的,都必須透過PageObject操作
  這樣 PageObject下定義的@id才會有作用
  例 loginPage.setValue('@pwdField','12345')
  若不是屬於element操作的,則回歸到browser上去操作
  因為這部分的function,pageObject沒有
  或透過 loginPage.api.pause(10000) 也可
  例 browser.pause(10000)

例

module.exports = {
  '登入測試':function(browser){
    const devServer = browser.globals.getServer()
    let loginPage = browser.page.login()
    loginPage
      .waitForElementVisible('@el', 5000)
      .clearValue('@siteField')
      .clearValue('@pwdField')
    browser.pause(100)

    loginPage
      .setValue('@pwdField','12345')
      .setValue('@siteField', '0910000311')
    browser.pause(100)

    loginPage.click('@loginBtn')
    browser.pause(3000)
      .assert.urlEquals(`${devServer}/#store/member/pointBanner`)
      .end()
    
  }
}