現(xiàn)在正是進(jìn)入native里面的webview的測(cè)試。比如我要測(cè)試一個(gè)選擇城市的組件：

主要的思路就是模擬用戶的一系列操作，然后看測(cè)試的結(jié)果和預(yù)期是否符號(hào)。

首先還是通過(guò)控制臺(tái)查看相應(yīng)的DOM節(jié)點(diǎn)，通過(guò)macaca提供的API去獲取相應(yīng)的DOM元素然后觸發(fā)用戶操作。

以下還是在REPL環(huán)境下進(jìn)行操作：

driver 
    .webview() 
    .elementByCssSelector('.location-city .input-tips') 
    .tap()  //首先喚起城市選擇組件,見下圖① 
    .sleep(500) 
    .elementByCssSelector('.province-list .list-item:nth-child(3)') 
    .tap()  //點(diǎn)擊省份的第三個(gè)元素,見下圖② 
    .sleep(500) 
    .elementByCssSelector('.city-list .list-item:nth-child(4)') 
    .tap()  //點(diǎn)擊市的第四個(gè)元素,見下圖③ 
    .sleep(500) 
    .elementByCssSelector('.area-list .list-item:nth-child(6)') 
    .tap()  //點(diǎn)擊區(qū)域的第6個(gè)元素,見下圖④ 
    .sleep(500) 
    .elementByCssSelector('.location-city .input-tips') 
    .text()  
    .then(function(value) { //可以在控制臺(tái)中看到輸出的選中的城市內(nèi)容,見下圖⑤ 
        console.log(value); 
    });  

圖①:

圖②：

[[174582]]

圖③：

圖④：

圖⑤：

圖⑥：

[[174583]]

可以看到當(dāng)前的功能是按我們的預(yù)期去執(zhí)行的。

現(xiàn)在我再測(cè)試下另外一種情況：

選擇了省份和區(qū)域，沒有選擇市的話，會(huì)出現(xiàn)一個(gè)彈窗。

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()  //重新選擇區(qū)域 
    //這時(shí)就會(huì)出現(xiàn)一個(gè)彈窗,見下圖  

圖⑦：

圖⑧：

這時(shí)功能也是按預(yù)期走的。

當(dāng)然***寫到測(cè)試腳本里面還需要添加斷言相關(guān)的內(nèi)容，這個(gè)也比較容易。

在編寫webview測(cè)試腳本的時(shí)候也遇到了很多問(wèn)題，比如說(shuō)native出于安全方面的考慮，限制了input[type="file"]喚起native上傳文件的組件，再比如有些滑動(dòng)等操作測(cè)試比較困難等等。慢慢來(lái)吧。