iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 9
2

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

載入外部 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

這在我們比對

  • 線上 vs 開發機
  • 不同瀏覽器

的時候很常用到。

總結

Nightwatch 指令三部曲已完成。

  • Part 1:UI 操作相關的指令。
  • Part 2:Cookie、Window 和 Log 相關的指令。
  • Part 3:與執行流程相關的指令。

下一篇要來看 BDD Expect


網誌版


上一篇
Nightwatch101 #8:指令 Part 2
下一篇
Nightwatch101 #10:BDD Expect
系列文
Nightwatch101:使用 Nightwatch 實現 End-to-End Testing30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言