指令分為兩種-Nightwatch 提供的指令與開發者撰寫的客製化指令,以下介紹 Nightwatch 所提供的指令。程式碼可以打在
test/e2e/testDemo.js
並執行nightwatch ./test/e2e/testDemo.js
來跑跑看喔!
以下繼續 Part 3,來聊聊與執行流程相關剩下的指令,例如:瀏覽網址、指定執行某件事/某個指令、載入外部 script 檔案、暫停、關閉瀏覽器和截圖。
本系列文章皆使用這個專案,可以拉下來玩玩;有什麼問題都可以提出 issue。
功能同 .url()
,用於設定 launch_url
。這裡使用 webdriver 的 url 協定指令。只有一個參數 url(optional)。
module.exports = {
'Demo Test': browser => {
browser
.init('https://cythilya.github.io/')
.end()
}
}
可在 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()
}
}
載入外部 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()
}
}
暫停測試程式,可指定暫停時間(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>
是否出現,然後驗證網址或者特定元素是否可見會是比較好的方式。
結束 session,關閉瀏覽器。
對目前頁面截圖,並指定儲存檔名。第一個參數是儲存檔名,第二個參數是 callback(optional)。
module.exports = {
'Demo Test': browser => {
browser
.url('http://www.ruten.com.tw/')
.waitForElementVisible('body')
.saveScreenshot('./screenshots/index.png')
.end()
}
}
執行完上面的範例,螢幕截圖如下。
這在我們比對
的時候很常用到。
Nightwatch 指令三部曲已完成。
下一篇要來看 BDD Expect。
網誌版。