現在正是進入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()  //點擊省份的第三個元素,見下圖② 
    .sleep(500) 
    .elementByCssSelector('.city-list .list-item:nth-child(4)') 
    .tap()  //點擊市的第四個元素,見下圖③ 
    .sleep(500) 
    .elementByCssSelector('.area-list .list-item:nth-child(6)') 
    .tap()  //點擊區域的第6個元素,見下圖④ 
    .sleep(500) 
    .elementByCssSelector('.location-city .input-tips') 
    .text()  
    .then(function(value) { //可以在控制臺中看到輸出的選中的城市內容,見下圖⑤ 
        console.log(value); 
    });  

圖①:

圖②：

[[174582]]

圖③：

圖④：

圖⑤：

圖⑥：

[[174583]]

可以看到當前的功能是按我們的預期去執行的。

現在我再測試下另外一種情況：

選擇了省份和區域，沒有選擇市的話，會出現一個彈窗。

driver 
    .webview() 
    .elementByCssSelector('.location-city .input-tips') 
    .tap()  //重新喚起城市選擇組件,見下圖 
    .sleep(500) 
    .elementByCssSelector('.province-list .list-item:nth-child(2)') 
    .tap()  //重新選擇省份 
    .sleep(500) 
    .elementByCssSelector('.area-list .list-item:nth-child(3)') 
    .tap()  //重新選擇區域 
    //這時就會出現一個彈窗,見下圖  

圖⑦：

圖⑧：

這時功能也是按預期走的。

當然***寫到測試腳本里面還需要添加斷言相關的內容，這個也比較容易。

在編寫webview測試腳本的時候也遇到了很多問題，比如說native出于安全方面的考慮，限制了input[type="file"]喚起native上傳文件的組件，再比如有些滑動等操作測試比較困難等等。慢慢來吧。