Nightwatch101 #9：指令 Part 3

2018 iT 邦幫忙鐵人賽

DAY 9

DevOps

Nightwatch101：使用 Nightwatch 實現 End-to-End Testing系列第 9 篇

2018鐵人賽 nightwatch end-to-end testing 前端測試自動化測試

Summer

團隊露天廢物

2017-12-19 00:39:16

4978 瀏覽

Nightwatch.js

前情提要-指令 Part 1 與指令 Part 2。

指令分為兩種－Nightwatch 提供的指令與開發者撰寫的客製化指令，以下介紹 Nightwatch 所提供的指令。程式碼可以打在 test/e2e/testDemo.js 並執行 nightwatch ./test/e2e/testDemo.js 來跑跑看喔！

以下繼續 Part 3，來聊聊與執行流程相關剩下的指令，例如：瀏覽網址、指定執行某件事/某個指令、載入外部 script 檔案、暫停、關閉瀏覽器和截圖。

本系列文章皆使用這個專案，可以拉下來玩玩；有什麼問題都可以提出 issue。

init

功能同 .url()，用於設定 launch_url。這裡使用 webdriver 的 url 協定指令。只有一個參數 url（optional）。

module.exports = {
  'Demo Test': browser => {
    browser
      .init('https://cythilya.github.io/')
      .end()
  }
}

perform

可在 callback 中執行 Nightwatch 所提供的指令，或執行某件事情，做完記得呼叫 done()。

module.exports = {
  'Demo Test': browser => {
    let elementValue;
    browser
      .init('http://find.ruten.com.tw/search/s000.php?enc=u&searchfrom=indexbar&k=chokkorisan&t=0')
      .getValue('#search_input', function(result) {
        elementValue = result.value;
      })
      .perform(function(done) {
        console.log('elementValue', elementValue);
        done();
      })
      .end()
  }
}

perform

injectScript

載入外部 script 檔案，第一個參數是檔案路徑，第二個參數是放入 script 的 element id（optional，預設值是放在 <head>），第三個參數是 callback（optional）。

module.exports = {
  'Demo Test': browser => {
    browser
      .url('https://cythilya.github.io/')
      .waitForElementVisible('body')
      .injectScript('https://code.jquery.com/jquery-3.2.1.min.js')
      .end()
  }
}

載入外部 script 檔案 injectScript

pause

暫停測試程式，可指定暫停時間（ms）。

範例如下，登入露天網站，鍵入帳號和密碼後點擊送出按鈕，然後確認是否登入成功，來到首頁。

module.exports = {
  'Demo Test': browser => {
    browser
    .url('https://member.ruten.com.tw/user/login.htm') // 開啟露天燈入頁
    .waitForElementVisible('body')
    .setValue('#userid', 'nightwatch101') // 輸入帳號
    .setValue('#userpass', 'nightwatch101') // 輸入密碼
    .click('#btnLogin') // 點擊送出按
    .pause(1000) // 等待 1 秒。不要學！！
    .assert.urlContains('http://www.ruten.com.tw/') // 確認是否登入成功，來到首頁
    .end(); // 結束 session，關閉瀏覽器
  }
};

看完整範例。

「不要學！！」剛開始寫測試的時候，我們都傻傻的使用 pause 做等待，等個一兩秒等表單送出後驗證是否到達指定頁面或取得正確的結果。現在想想只覺得傻傻的 XD

好的測試項目儘量不要使用 pause 做等待，因為等待時間可能會因網路速度而有所不同，說不定等到天荒地老都完成不了送不出去等不到結果。比較好的驗證方式，確定是否得到正確結果，例如：轉跳到正確頁面，當然是使用 waitForElementVisible 看看 <body> 是否出現，然後驗證網址或者特定元素是否可見會是比較好的方式。

end

結束 session，關閉瀏覽器。

saveScreenshot

對目前頁面截圖，並指定儲存檔名。第一個參數是儲存檔名，第二個參數是 callback（optional）。

module.exports = {
  'Demo Test': browser => {
    browser
      .url('http://www.ruten.com.tw/')
      .waitForElementVisible('body')
      .saveScreenshot('./screenshots/index.png')
      .end()
  }
}

執行完上面的範例，螢幕截圖如下。

saveScreenshot