Macaca

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

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

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

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

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

接下來就帶著大家一步一步使用macaca進(jìn)行進(jìn)行自動化測試：

step 1

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

npm install macaca -g 

安裝完成后可以輸入

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

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

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

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

brew install ios-webkit-debug-proxy 

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

npm i macaca-ios -g 

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

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

接下來進(jìn)行自己的測試工作：

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

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

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

npm install app-inspector -g 

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

然后通過app-inspector啟動UI檢測工具,

app-inspector -u YOUR-DEVICE-ID 

獲取uuid的方式：

命令行輸入：

xcrun simctl list 

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

通過app-inspector啟動這個工具后，打開在Chrome里面打開命令行里面提示的瀏覽器地址，這樣在瀏覽器上就能看到在native里面打開的ios頁面。

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

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

.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頁面的所有操作。

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