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

简介: ## 基于Macaca的混合H5应用UI自动化入门 混合H5应用UI自动化是移动应用自动化中无法绕过的一节,作为H5应用,自动化的方式与Native略有不同,主要体现在元素的定位以及操作,以及上下文的切换等,本文针对H5的自动化入门分享一些基础知识。 ## H5应用如何查找元素 在Native的UI自动化中,我们通过app-inspector查找UI元素,但是这并不适用于H5应用(在ap

基于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样式,具体的值可以通过如下方式获得:

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查看页面元素的时候可以看到这个版本,如下:
img

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版本(如下图),则说明安装成功。

目录
相关文章
|
3天前
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
本篇将带你实现一个多滑块联动的控制器应用。用户可以通过拖动多个滑块,动态控制不同参数(如红绿蓝三色值),并实时显示最终结果。我们将以动态颜色调节为例,展示如何结合状态管理和交互逻辑,打造一个高级的滑块控制器应用。
136 78
「Mac畅玩鸿蒙与硬件41」UI互动应用篇18 - 多滑块联动控制器
|
4天前
|
UED
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
本篇将带你实现一个简单的照片墙布局应用,通过展示多张图片组成照片墙效果,用户可以点击图片查看其状态变化。
107 67
「Mac畅玩鸿蒙与硬件40」UI互动应用篇17 - 照片墙布局
|
9天前
|
存储 UED
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
本篇将带你实现一个随机颜色变化器应用。用户点击“随机颜色”按钮后,界面背景会随机变化为淡色系颜色,同时显示当前的颜色代码,页面还会展示一只猫咪图片作为装饰,提升趣味性。
62 36
「Mac畅玩鸿蒙与硬件37」UI互动应用篇14 - 随机颜色变化器
|
6天前
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
本篇将带你实现一个升级版的数字猜谜游戏。相比基础版,新增了计分和历史记录功能,用户可以在每次猜测后查看自己的得分和猜测历史。此功能展示了状态管理的进阶用法以及如何保存和显示历史数据。
60 31
「Mac畅玩鸿蒙与硬件38」UI互动应用篇15 - 猜数字增强版
|
1天前
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
本篇将带你实现一个带有闪烁动画的按钮交互效果。通过动态改变按钮颜色,用户可以在视觉上感受到按钮的闪烁效果,提升界面互动体验。
40 19
「Mac畅玩鸿蒙与硬件43」UI互动应用篇20 - 闪烁按钮效果
|
2天前
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
本篇将带你实现一个数字键盘应用,支持用户通过点击数字键输入数字并实时更新显示内容。我们将展示如何使用按钮组件和状态管理来实现一个简洁且实用的数字键盘。
37 17
「Mac畅玩鸿蒙与硬件42」UI互动应用篇19 - 数字键盘应用
|
9天前
|
UED 开发者
「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
本篇将带你实现一个简单的数字滚动抽奖器。用户点击按钮后,屏幕上的数字会以滚动动画的形式随机变动,最终显示一个抽奖数字。这个项目展示了如何结合定时器、状态管理和动画实现一个有趣的互动应用。
62 23
「Mac畅玩鸿蒙与硬件36」UI互动应用篇13 - 数字滚动抽奖器
|
5天前
|
前端开发 UED
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
本篇将带你实现一个倒计时环形进度条应用。用户可以设置倒计时的时间,启动倒计时后,应用会动态显示一个随着时间递减的环形进度条,同时伴有数字倒计时显示。这是结合动画效果和时间管理的实用示例。
88 10
「Mac畅玩鸿蒙与硬件39」UI互动应用篇16 - 倒计时环形进度条
|
11天前
「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
本篇将带你实现一个简易日历应用,显示当前月份的日期,并支持选择特定日期的功能。用户可以通过点击日期高亮选中,还可以切换上下月份,体验动态界面的交互效果。
37 12
「Mac畅玩鸿蒙与硬件35」UI互动应用篇12 - 简易日历
|
17天前
|
UED
「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用
本篇将带领你实现一个趣味十足的互动应用,用户点击按钮时猫会在一排灯之间移动,猫所在的位置灯会亮起(on),其余灯会熄灭(off)。应用会根据用户的操作动态更新灯光状态和文本提示当前亮灯的位置,是掌握状态管理和组件动态渲染的良好实践。
55 15
「Mac畅玩鸿蒙与硬件27」UI互动应用篇4 - 猫与灯的互动应用