Appium—Native+H5混合APP的自动化

前言

小编所在项目的客户端是比较奇怪的一个APP，大部分页面Android和iOS的客户端只提供了webview的功能，都是由H5处理业务逻辑和用户交互。H5承担了和服务端、和客户端的交互。

虽然在开发实现上很方便，前端开发，三端上线。但是，如果要我们测试要做基于Appium做自动化来说这就不是一件好事儿了，因为Native的客户端可以借助ADB命令和封装的Appium实现大多数点击、跳转、拍照、控制键盘、截图、输入等等操作。一旦切换到H5页面，难题就来了：

1、H5和native Android的切换？

2、H5的元素如何定位？

3、H5中怎么做点击、跳转、控制键盘、输入等？

Native Android和H5（Android Webview）的切换

遇到的第一个问题就是，如何从Native Android启动后，去点击/操作H5页面的元素。 搜索了很多之后，有用的资料不多，很多文章写的很复杂，总结一下关键点只有两个。

第一、加载chrome驱动

在github上找到手机native app中的webview版本，并下载对应的驱动。

出现了一个新的问题: 怎么找到手机上native app中的webview版本，这里用到的是Chrome的插件ADB plugin(安装方法可用搜索引擎查看)。

安装完成后在chrome的插件栏就有了Android小机器人的图表，点击小机器人选择’View Inspection Targets’即可打开插件。

PC端连接手机设备后，在页面中可以看到设备信息 。

此时还没有我们希望看到的webview的相关信息，这时候需要在手机上操作，打开“Native Android + H5”的APP，然后就可以在Chrome 插件这个页面上看到需要的信息了，这里需要记下来两个东西：

其一是chrome的版本，用来去github上找到对应的chrome“驱动”。其二是webview名，这个用来后续用Appium的switch_to切换Android Context。

第二、切换到webview context

这里主要需要理解一个Android Context的概念，详细可以看参考资料。 代码里面重要的有两句，下面以Python为例：

# 指定chrome驱动的位置
 desired_caps['chromedriverExecutable'] = 'C:\\Program Files (x86)\\Appium\\resources\\app\\node_modules\\appium-chromedriver\\chromedriver.exe'
 # 需要访问H5元素、内容或者操作H5页面时切换到Webview Context
 driver.switch_to.context('WEBVIEW_com.sogo.borrowing')
 # 最后一定要切换回native
 driver.switch_to.context('NATIVE_APP')

H5的元素如何定位？

Android Native的APP元素定位很简单，可以用android id，可以用text，可以用坐标等等。当然这些方法也各有优劣。一般可能大多数人都是使用android id定位，android id可以根据UiautomaotorViewer等工具获取到，但是H5又不一样了，为什么呢。稍微了解Android的同学都知道，页面元素是xml中定义的，android id就是在这里面的@+id/的一些内容，但是前端页面是不会有xml的更不会有指定的@+id/信息，所以传统的Android方法在H5页面中做自动化不适用。

这里主要尝试了两个方法，两个方法都能成功，同学们可以看情况选择，个人觉得还是find_element_by_id(python)/findElement(By.id(‘xxxxx’)) (java)更好一些，能够精准定位吧。

第一、css选择器

find_element_by_css_selector

driver.find_element_by_css_selector('a.btn.btn-bg2')

css选择器就是简介，直接用chrome等进行元素定位(可以用ADB Plugin中的inspect，点击进去就跟chrome的开发者模式一样，用小箭头定位到空间就能找到前端源码)就能拿到前端页面源码中html标签和css的选择器，需要注意的就是书写方式。如果一个a标签，class是“x1 y1”，需要写成“a.x1.y1”前面是需要带上标签名的，然后选择器名中的空格要用点代替。

第二、Appium万能id

find_element_by_id

driver.find_element_by_id('diaphone')

id的话就是用chrome进行元素定位，找到前端源码中对应控件的id指定就好了。 PS. 以上操作定位都需要基于switch_to到webview后

H5中怎么做点击、跳转、控制键盘、输入等

这里用控制键盘&输入举个例子。一开始使用了css选择器，在输入和键盘定位。 这里也介绍两个方法吧，一个是用Appium封装的press_keycode：

# 点击删除键，keycode 4 代表KEYCODE_BACK
driver.press_keycode(4)

keycode有一定的局限性，主要是不能输入中文，且需要找到对应的key映射，不方便。 另一个是定位到input直接用sendkeys去输入，比如上文的id是diaphone的控件就是一个input控件，这时候就可以直接如下操作:

inputbox = driver.find_element_by_id('diaphone')
inputbox.send_keys('13000000000')

这就是遇到的Appium做Native Android + H5 混合 APP遇到的问题和解决方案。

以上~

参考资料

1、appium+python自动化57-chromedriver与chrome版本: https://www.cnblogs.com/yoyoketang/p/9156319.html

2、Appium切换webview并识别H5: https://www.jianshu.com/p/a4724482fc8f

3、Appium自动化测试 - 使用Chrome调试模式获取App混合应用的H5界面的元素定位: https://www.jianshu.com/p/1e1fefa9b17b

4、Appium Android 元素定位方法 原生+H5: https://blog.csdn.net/qq_36467991/article/details/81779551

5、Appium 按键表: https://blog.csdn.net/weixin_40180628/article/details/79169846

6、Appium 常用操作总结: https://www.jianshu.com/p/bf8c2d71c623

7、Context都没弄明白，还怎么做Android开发？: https://www.jianshu.com/p/bf8c2d71c623