基于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 方法，使用此方法有以下几个前提：
- 安卓设备打开开发者模式
- 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”
则在查找时可以通过如下脚本：
driver.elementByCss("#page-bd > section.user-profile > div.user-login.clearfix > a");
AI 代码解读
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();
AI 代码解读
如果使用原生的macaca client,可以参考biz层switchFromNativeToWebView中的写法自行处理，具体处理如下：
JSONArray contexts = driver.contexts();
driver.context(contexts.get(contexts.size() - 1).toString());
AI 代码解读
完成上下文切换之后就可以愉快的进行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的版本是互相匹配的，他们的对应关系可从如下链接查看得到：
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
AI 代码解读
然后重新安装安卓驱动，就可以安装指定版本的chromedriver了
$ cnpm i macaca-android -g
AI 代码解读
执行如上命令后，会看到新的驱动安装过程中chromedriver更新成了2.25版本(如下图)，则说明安装成功。
