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

目录
相关文章
|
9月前
|
数据采集 人工智能 监控
AI也能“专业进修”?不用写代码,教你用微调打造行业专属模型
本文深入浅出解析AI微调(Fine-tuning)技术,聚焦如何让通用大模型成长为行业专才。详解LoRA等高效微调原理,对比RAG优劣,提供数据准备、模型选择、在线训练到效果评估的四步实战指南,助力零基础用户低成本打造专属专业AI。(239字)
639 10
AI也能“专业进修”?不用写代码,教你用微调打造行业专属模型
|
8月前
|
人工智能 数据可视化 搜索推荐
AI智能体实战指南:6大工具构建你的自动化工作流引擎
本文介绍2024年六大AI智能体工具:测试自动化(Playwright/Appium)、代码生成(Cursor/OpenCode)、AI工作流(ClawdBot/Dify/n8n)、短视频创作(FFmpeg/MoviePy)等,助开发者构建端到端自动化工作流,释放创造力。
|
9月前
|
安全 测试技术 网络安全
2026年移动应用渗透测试流程方案及iOS与Android框架对比
文章聚焦2026年移动应用渗透测试,介绍其涵盖信息收集等关键环节且将更重自动化与AI辅助,对比iOS与Android因系统差异在框架上的显著区别。还阐述主流测试方案及优劣势,给出企业实施的最佳实践与落地路径,解答常见问题,助力企业应对安全挑战。
|
存储 网络安全
Curl error (60): SSL peer certificate or SSH remote key was not OK for https://update.cs2c.com.cn/NS/V10/V10SP2/os/adv/lic/base/x86_64/repodata/repomd.xml [SSL: no alternative certificate subject name matches target host name 'update.cs2c.com.cn']
【10月更文挑战第30天】在尝试从麒麟软件仓库(ks10-adv-os)下载元数据时,遇到 SSL 证书验证问题。错误提示为:`Curl error (60): SSL peer certificate or SSH remote key was not OK`。可能原因包括证书不被信任、证书与域名不匹配或网络问题。解决方法包括检查网络连接、导入 SSL 证书、禁用 SSL 证书验证(不推荐)、联系仓库管理员、检查系统时间和尝试其他镜像。
5455 1
|
编解码
h264和h265编码所需要的处理器性能
h264和h265编码所需要的处理器性能
2916 0
h264和h265编码所需要的处理器性能
|
搜索推荐 算法 数据挖掘
数据策略案例
抖音、快手策略推荐分析
1125 0
数据策略案例
|
移动开发 JavaScript macaca
基于Macaca的混合H5应用UI自动化进阶
# 基于Macaca的混合H5应用UI自动化进阶 混合H5应用UI自动化是移动应用自动化中无法绕过的一节,针对混合H5应用的UI自动化入门之前已经写过一篇文章:[https://testerhome.com/topics/9651](https://testerhome.com/topics/9651) ,入门的同学可移步学习。本文主要针对H5应用UI自动化高级使用进行一些分享。 ## 如何定
2224 0
签入/签出是什么意思?
签入/签出是什么意思? 签入和签出在很多文档管理系统中是很普遍的名词,SharePoint也不例外。它们的目的是防止多人同时编辑同一部分内容(在SharePoint中,指列表项目或文件)造成冲突。
4272 0
|
18天前
|
人工智能 JSON API
全网刷屏的 Jev 模型正式开放!一手实战测评 + 保姆级教程
全网爆火的 Jev 模型是什么?有什么用?怎么使用?怎么接入 AI 编程工具?效果真的好么?傻子可懂的 Jev 保姆级实战教程 + 项目实战测评来啦
8640 25
|
17天前
|
人工智能 并行计算 PyTorch
秋叶 ComfyUI 2026 整合包 v3.2 完整部署教程:Python 3.13 + Torch 2.13 全栈升级
秋叶aaaki ComfyUI 2026年8月整合包v3.2正式发布!全面升级Python 3.13.11、PyTorch 2.13.0+cu130及ComfyUI v0.30.2,原生支持MiniMax H3、Wan 2.2、Qwen-Image-2.1等2026主流音视频/图像模型,解压即用,无需环境配置。
3139 14