Macaca

macaca是阿里開(kāi)源的基于Node.js開(kāi)發(fā)的自動(dòng)化測(cè)試工具，支持native,hybird,moblie web,關(guān)于macaca具體的內(nèi)容參見(jiàn)官網(wǎng)macaca.

macaca是如何驅(qū)動(dòng)自動(dòng)化測(cè)試的呢?事實(shí)上macaca和appium在架構(gòu)和一些應(yīng)用層面有很多相似的地方。

作為client的我們可以使用不同語(yǔ)言去編寫(xiě)測(cè)試腳本，其中測(cè)試腳本遵循webdriver協(xié)議，client向測(cè)試框架啟動(dòng)的server發(fā)送http請(qǐng)求。正因?yàn)閏lient和server是基于http進(jìn)行通訊的，因此client可以支持不同的編程語(yǔ)言。server通過(guò)解析HTTP的request，然后調(diào)用IOS提供的UIAutomation庫(kù)來(lái)進(jìn)行模擬點(diǎn)擊等的操作，操作完成后移動(dòng)設(shè)備會(huì)將操作結(jié)果返回給server,然后server將這個(gè)操作結(jié)果返回給client。

?有提到過(guò)webdriver協(xié)議：

其實(shí)它就是一層基礎(chǔ)的協(xié)議規(guī)范。正是因?yàn)檫@樣的協(xié)議存在一些自動(dòng)化測(cè)試框架可以使用多種語(yǔ)言編寫(xiě)測(cè)試腳本。它提供了web頁(yè)面操作的相關(guān)規(guī)范，比如元素的定位，瀏覽器原生事件的操作，還有獲取DOM元素屬性等一系列的方法。不管你用什么語(yǔ)言編寫(xiě)測(cè)試腳本的話，都應(yīng)該按照這個(gè)協(xié)議規(guī)范來(lái)。WebDriver 通過(guò)原生瀏覽器支持或者瀏覽器擴(kuò)展直接控制瀏覽器。WebDriver 針對(duì)各個(gè)瀏覽器而開(kāi)發(fā)，取代了嵌入到被測(cè) Web 應(yīng)用中的 JavaScript。與瀏覽器的緊密集成支持創(chuàng)建更高級(jí)的測(cè)試，避免了JavaScript 安全模型導(dǎo)致的限制。除了來(lái)自瀏覽器廠商的支持，WebDriver 還利用操作系統(tǒng)級(jí)的調(diào)用模擬用戶輸入。webDriver 支持了所有的主流瀏覽器，同時(shí)還支持了Iphone和Android的移動(dòng)應(yīng)用測(cè)試。

接下來(lái)就帶著大家一步一步使用macaca進(jìn)行進(jìn)行自動(dòng)化測(cè)試：

step 1

全局安裝macaca的cli,如果覺(jué)得比較慢，就換淘寶的cnpm鏡像吧。

npm install macaca -g 

安裝完成后可以輸入

//查看cli的提供其他的功能 
    macaca -h   
 
    //用以查看當(dāng)前的環(huán)境配置 
    macaca doctor   
     
    //用以單獨(dú)啟動(dòng)一個(gè)webdriver server 
    macaca server 
     
    //啟動(dòng)測(cè)試 
    macaca run  

現(xiàn)在輸入macaca doctor:

在Android checklist里面出現(xiàn)了2條紅色的提示文案，說(shuō)明這2個(gè)選項(xiàng)沒(méi)有配置完成。我現(xiàn)在是以IOS為例，暫且不管這2個(gè)和Andriod相關(guān)的配置。不清楚的可以google。其中在IOS checklist當(dāng)中：出現(xiàn)了Xcode和ios_webkit_debug_proxy.

首先你需要通過(guò)app store安裝Xcode。全局安裝ios_webkit_debug_proxy這個(gè)包，這個(gè)包用于測(cè)試ios的webview:

brew install ios-webkit-debug-proxy 

此外，還需要全局安裝ios-driver:

npm i macaca-ios -g 

這樣準(zhǔn)備好了基礎(chǔ)的測(cè)試套件。接下來(lái)你可以克隆macaca提供的官方示例，其中包括IOS的app和相關(guān)的測(cè)試腳本，對(duì)照著官文文檔感受下大致的流程：

git clone https://github.com/macacajs/macaca-test-sample.git --depth=1 

接下來(lái)進(jìn)行自己的測(cè)試工作：

因?yàn)槲沂乔岸碎_(kāi)發(fā)人員，要測(cè)試native里面的webview。首先讓IOS的同學(xué)幫忙打包一個(gè).app格式的應(yīng)用，并壓成zip格式的文件。PS：打包的時(shí)候選用debug模式。

準(zhǔn)備好了原材料，先讓我們停一停。做UI測(cè)試的話，要模擬用戶各種操作，那么必須得知道native應(yīng)用上不同界面的元素，就像獲取html里面的DOM節(jié)點(diǎn)一樣。因?yàn)閙acaca提供了通過(guò)Xpath去獲取native頁(yè)面上不同的元素節(jié)點(diǎn)的API。因此可以通過(guò)這種方式。

macaca提供了app-inspector這樣一個(gè)使用樹(shù)狀態(tài)結(jié)構(gòu)查看UI布局，自動(dòng)生成XPath的工具。

npm install app-inspector -g 

安裝完成后，通過(guò)macaca-cli啟動(dòng)你的IOS模擬器，運(yùn)行你的應(yīng)用。

然后通過(guò)app-inspector啟動(dòng)UI檢測(cè)工具,

app-inspector -u YOUR-DEVICE-ID 

獲取uuid的方式：

命令行輸入：

xcrun simctl list 

這行命令會(huì)列出你的所以模擬器信息，里面有類似 XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX 的代碼，就是模擬器UDID,選擇當(dāng)前模擬器狀態(tài)是Booted的那個(gè)。

通過(guò)app-inspector啟動(dòng)這個(gè)工具后，打開(kāi)在Chrome里面打開(kāi)命令行里面提示的瀏覽器地址，這樣在瀏覽器上就能看到在native里面打開(kāi)的ios頁(yè)面。

因?yàn)槲乙獪y(cè)試webview的頁(yè)面，因此native的頁(yè)面的所有元素節(jié)點(diǎn)通過(guò)app-inspector這個(gè)工具去獲取Xpath,然后編寫(xiě)測(cè)試腳本模擬用戶的操作，一步一步的進(jìn)入到webview頁(yè)面。

在我測(cè)試的應(yīng)用當(dāng)中，從app打開(kāi)到進(jìn)入要測(cè)試的webview頁(yè)面的測(cè)試腳本就變成了：

.waitForElementByXPath('//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[2]/XCUIElementTypeButton[1]') 
    .click() 
    //用戶名輸入 
    .waitForElementByXPath('//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeTextField[1]') 
    .sendKeys(username) 
    //密碼輸入 
    .waitForElementByXPath('//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[3]/XCUIElementTypeSecureTextField[1]') 
    .sendKeys(password) 
    .sendKeys('\n') 
    //登錄按鈕 
    .waitForElementByXPath('//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeButton[2]') 
    .click() 
    //更多按鈕 
    .waitForElementByXPath('//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeImage[1]/XCUIElementTypeButton[2]') 
    .click() 
    .sleep(1000) 
    .swipe(200, 400, 200, 100, 500) 
    .waitForElementByXPath('//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeCollectionView[1]/XCUIElementTypeCell[10]') 
    .click() 
    .sleep(1000) 
    .waitForElementByXPath('//XCUIElementTypeApplication[1]/XCUIElementTypeWindow[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeOther[1]/XCUIElementTypeScrollView[1]/XCUIElementTypeOther[2]') 
    .click() 
    .sleep(1000) 

這樣完成了native進(jìn)入到webview頁(yè)面的所有操作。

接下來(lái)就是webview的模擬操作啦。放到下一節(jié)來(lái)講吧。