基于 Macaca 的混合 H5 应用 UI 自动化入门

混合 H5 应用 UI 自动化是移动应用自动化中无法绕过的一节，作为 H5 应用，自动化的方式与 Native 略有不同，主要体现在元素的定位以及操作，以及上下文的切换等，本文针对 H5 的自动化入门分享一些基础知识。

H5 应用如何查找元素

在 Native 的 UI 自动化中，我们通过 app-inspector 查找 UI 元素，但是这并不适用于 H5 应用 (在 app-inspector 中，webview 会被识别为一整块 view，看不到子 view)，那么针对 H5 应用应该如何定位呢？

针对 H5 应用，我们需要用 H5 的调试方式来查看页面元素，针对 iOS 和安卓平台有不同的查看方式，但因为 H5 代码是一份，所以不管我们用哪个工具看，最终得到的结果是一样的。

Android 定位 H5 元素

以 Android 为例，我们需要使用 chrome:inspect 方法，使用此方法有以下几个前提：

1. 安卓设备打开开发者模式
2. chrome 浏览器需要登录
3. 要 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”
则在查找时可以通过如下脚本：

driver.elementByCss("#page-bd > section.user-profile > div.user-login.clearfix > a");

iOS 定位 H5 元素

同安卓类似，不过 inpect 通过 Safari 浏览器进行。
具体操作步骤可参考：
http://www.saitjr.com/ios/ios-user-safari-debug-webview.html

H5 应用如何开始自动化

H5 应用的自动化脚本写法与 Native 的基本一致，上面我们讲了如何定位元素，定位元素后剩下的操作就与 Native 一致了，不过有一点要声明的是要对 H5 应用进行 UI 自动化，首先要切换 Contexts 到 H5 的 contexts（因为混合应用中会存在两个上下文，只有切换到 H5 的上下文之后相关的操作才能生效）

切换上下文的方法在我们自己封装的 biz 层中已经进行了封装 (关于 biz 层的使用，参考：UI 自动化 Macaca-Java 版实践心得)，使用 biz 层，只需要在进入 H5 页面后，开始 H5 自动化之前执行如下命令即可

driver.switchFromNativeToWebView();

如果使用原生的 macaca client,可以参考 biz 层 switchFromNativeToWebView 中的写法自行处理，具体处理如下：

JSONArray contexts = driver.contexts();
driver.context(contexts.get(contexts.size() - 1).toString());

完成上下文切换之后就可以愉快的进行 H5 的自动化了 ，其他用法与 Native 基本一致。

常见问题

1. switchFromNativeToWebview 报错，这里出问题绝大部分是因为 chrome 版本与 chromedriver 版本不匹配导致的。 chrome 版本与 chromedriver 版本需要一一对应

此处的 chrome 版本是指 app 内部指定的 webview 的内核版本，在我们通过 chrome:inspect 查看页面元素的时候可以看到这个版本，如下：

chromedriver 在 macaca-android 驱动内，主要是为了进行 webview 的自动化服务的，chromedriver 的版本必须与 app 内部 webview 的版本相匹配，webview 的自动化才能正常进行，因此在进行 h5 自动化前，首先要保证 app 内的 webview 的版本与 macaca-android 内的 chromedriver 的版本是互相匹配的，他们的对应关系可从如下链接查看得到：
https://huilansame.github.io/huilansame.github.io/archivers/chromedriver-to-chrome-version

综合错误提示以及版本对应关系可知，当前我的 chrome 版本为 v55,因此对应的 chromedriver 需要 v2.25,
如要安装正确的 chromedirver 版本，可以在本地环境变量中指定需要的版本,在本地的.bashprofile 或者.zshrc 等中，也就是设置 JAVA_HOME 环境变量的地方，指定 CHROMEDRIVER_VERSION 的版本号,如下：

export CHROMEDRIVER_VERSION=2.25

然后重新安装安卓驱动，就可以安装指定版本的 chromedriver 了

$  cnpm i macaca-android -g

执行如上命令后，会看到新的驱动安装过程中 chromedriver 更新成了 2.25 版本 (如下图)，则说明安装成功。