現在正是進入native裡面的webview的測試。比如我要測試一個選擇城市的元件：
主要的思路就是模拟使用者的一系列操作，然後看測試的結果和預期是否符号。
首先還是通過控制台檢視相應的dom節點，通過macaca提供的api去擷取相應的dom元素然後觸發使用者操作。
以下還是在repl環境下進行操作：
driver
.webview()
.elementbycssselector('.location-city .input-tips')
.tap() //首先喚起城市選擇元件,見下圖①
.sleep(500)
.elementbycssselector('.province-list .list-item:nth-child(3)')
.tap() //點選省份的第三個元素,見下圖②
.elementbycssselector('.city-list .list-item:nth-child(4)')
.tap() //點選市的第四個元素,見下圖③
.elementbycssselector('.area-list .list-item:nth-child(6)')
.tap() //點選區域的第6個元素,見下圖④
.text()
.then(function(value) { //可以在控制台中看到輸出的選中的城市内容,見下圖⑤
console.log(value);
});
圖①:
圖②：
圖③：
圖④：
圖⑤：
圖⑥：
可以看到目前的功能是按我們的預期去執行的。
現在我再測試下另外一種情況：
選擇了省份和區域，沒有選擇市的話，會出現一個彈窗。
.tap() //重新喚起城市選擇元件,見下圖
.elementbycssselector('.province-list .list-item:nth-child(2)')
.tap() //重新選擇省份
.elementbycssselector('.area-list .list-item:nth-child(3)')
.tap() //重新選擇區域
//這時就會出現一個彈窗,見下圖
圖⑦：
圖⑧：
這時功能也是按預期走的。
當然最後寫到測試腳本裡面還需要添加斷言相關的内容，這個也比較容易。
在編寫webview測試腳本的時候也遇到了很多問題，比如說native出于安全方面的考慮，限制了input[type="file"]喚起native上傳檔案的元件，再比如有些滑動等操作測試比較困難等等。慢慢來吧。
作者：蘋果小蘿蔔
來源：51cto