基于Macaca的混合H5應用UI自動化入門

混合H5應用UI自動化是移動應用自動化中無法繞過的一節，作為H5應用，自動化的方式與Native略有不同，主要展現在元素的定位以及操作，以及上下文的切換等，本文針對H5的自動化入門分享一些基礎知識。

在Native的UI自動化中，我們通過app-inspector查找UI元素，但是這并不适用于H5應用(在app-inspector中，webview會被識别為一整塊view，看不到子view)，那麼針對H5應用應該如何定位呢？

針對H5應用，我們需要用H5的調試方式來檢視頁面元素，針對iOS和安卓平台有不同的檢視方式，但因為H5代碼是一份，是以不管我們用哪個工具看，最終得到的結果是一樣的。

以Android為例，我們需要使用chrome:inspect 方法，使用此方法有以下幾個前提：

安卓裝置打開開發者模式

chrome浏覽器需要登入

要inspect的webview是支援debug模式的(除了定制過的核心，一般都是支援的)

保證了以上幾個前提下，我們就可以用inspect工具來檢視元素了，使用方式非常簡單，首先在裝置上打開要inspect的webview，然後打開chrome浏覽器輸入 chrome://inspect 就可以看到要inspect的頁面了：

如上圖，點選inspect就可以看到對應頁面的元素結構了：

通過這樣，我們就可以找到定位一個H5元素的辨別了，與Native不同的是H5元素除了可以通過class,id定位外，還可以通過css等H5特有的定位方式進行定位，具體的可以參考API文檔，在H5中我們常用的定位方式為CSS樣式，具體的值可以通過如下方式獲得：

比如如上我們copy到的值為“#page-bd > section.user-profile > div.user-login.clearfix > a”

則在查找時可以通過如下腳本：

同安卓類似，不過inpect通過Safari浏覽器進行。

具體操作步驟可參考：

<a href="http://www.saitjr.com/ios/ios-user-safari-debug-webview.html">http://www.saitjr.com/ios/ios-user-safari-debug-webview.html</a>

H5應用的自動化腳本寫法與Native的基本一緻，上面我們講了如何定位元素，定位元素後剩下的操作就與Native一緻了，不過有一點要聲明的是要對H5應用進行UI自動化，首先要切換Contexts到H5的contexts（因為混合應用中會存在兩個上下文，隻有切換到H5的上下文之後相關的操作才能生效）

如果使用原生的macaca client,可以參考biz層switchFromNativeToWebView中的寫法自行處理，具體處理如下：

完成上下文切換之後就可以愉快的進行H5的自動化了 ，其他用法與Native基本一緻。

switchFromNativeToWebview報錯，這裡出問題絕大部分是因為chrome版本與chromedriver版本不比對導緻的。

chrome版本與chromedriver版本需要一一對應

此處的chrome版本是指app内部指定的webview的核心版本，在我們通過chrome:inspect檢視頁面元素的時候可以看到這個版本，如下：

chromedriver在macaca-android驅動内，主要是為了進行webview的自動化服務的，chromedriver的版本必須與app内部webview的版本相比對，webview的自動化才能正常進行，是以在進行h5自動化前，首先要保證app内的webview的版本與macaca-android内的chromedriver的版本是互相比對的，他們的對應關系可從如下連結檢視得到：

<a href="https://huilansame.github.io/huilansame.github.io/archivers/chromedriver-to-chrome-version">https://huilansame.github.io/huilansame.github.io/archivers/chromedriver-to-chrome-version</a>

綜合錯誤提示以及版本對應關系可知，目前我的chrome版本為v55,是以對應的chromedriver需要v2.25,

如要安裝正确的chromedirver版本，可以在本地環境變量中指定需要的版本,在本地的.bashprofile或者.zshrc等中，也就是設定JAVA_HOME環境變量的地方，指定CHROMEDRIVER_VERSION的版本号,如下：

然後重新安裝安卓驅動，就可以安裝指定版本的chromedriver了

執行如上指令後，會看到新的驅動安裝過程中chromedriver更新成了2.25版本(如下圖)，則說明安裝成功。