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

目录
相关文章
|
15天前
|
敏捷开发 测试技术 持续交付
探索自动化测试在敏捷开发中的应用与挑战
本文深入探讨了自动化测试在现代软件开发流程,特别是敏捷开发环境中的重要作用和面临的挑战。通过分析自动化测试的基本原理、实施策略以及在实际项目中的应用案例,揭示了其在提高软件质量和加速产品交付方面的巨大潜力。同时,文章也指出了自动化测试实施过程中可能遇到的技术难题、成本考量及团队协作问题,并提出了相应的解决策略,为软件开发团队提供了有价值的参考和指导。
|
5天前
|
运维 应用服务中间件 Linux
自动化运维的利器:Ansible在配置管理中的应用
【10月更文挑战第39天】本文旨在通过深入浅出的方式,向读者展示如何利用Ansible这一强大的自动化工具来优化日常的运维工作。我们将从基础概念讲起,逐步深入到实战操作,不仅涵盖Ansible的核心功能,还会分享一些高级技巧和最佳实践。无论你是初学者还是有经验的运维人员,这篇文章都会为你提供有价值的信息,帮助你提升工作效率。
|
11天前
|
Java 测试技术 持续交付
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
本文重点讲解如何搭建App自动化测试框架的思路,而非完整源码。主要内容包括实现目的、框架设计、环境依赖和框架的主要组成部分。适用于初学者,旨在帮助其快速掌握App自动化测试的基本技能。文中详细介绍了从需求分析到技术栈选择,再到具体模块的封装与实现,包括登录、截图、日志、测试报告和邮件服务等。同时提供了运行效果的展示,便于理解和实践。
46 4
【入门思路】基于Python+Unittest+Appium+Excel+BeautifulReport的App/移动端UI自动化测试框架搭建思路
|
8天前
|
机器学习/深度学习 传感器 算法
智能机器人在工业自动化中的应用与前景###
本文探讨了智能机器人在工业自动化领域的最新应用,包括其在制造业中的集成、操作灵活性和成本效益等方面的优势。通过分析当前技术趋势和案例研究,预测了智能机器人未来的发展方向及其对工业生产模式的潜在影响。 ###
38 9
|
8天前
|
运维 Ubuntu 应用服务中间件
自动化运维工具Ansible的实战应用
【10月更文挑战第36天】在现代IT基础设施管理中,自动化运维已成为提升效率、减少人为错误的关键手段。本文通过介绍Ansible这一流行的自动化工具,旨在揭示其在简化日常运维任务中的实际应用价值。文章将围绕Ansible的核心概念、安装配置以及具体使用案例展开,帮助读者构建起自动化运维的初步认识,并激发对更深入内容的学习兴趣。
29 4
|
6天前
|
运维 安全 应用服务中间件
自动化运维的利剑:Ansible在配置管理中的应用
【10月更文挑战第37天】本文将深入探讨如何利用Ansible简化和自动化复杂的IT基础设施管理任务。我们将通过实际案例,展示如何用Ansible编写可重用的配置代码,以及这些代码如何帮助运维团队提高效率和减少人为错误。文章还将讨论如何构建Ansible playbook来自动部署应用、管理系统更新和执行常规维护任务。准备好深入了解这个强大的工具,让你的运维工作更加轻松吧!
21 2
|
6天前
|
Java 测试技术 Android开发
探索自动化测试的奥秘:从入门到精通
【10月更文挑战第37天】本文将带你进入自动化测试的世界,从基础知识到实战案例,逐步揭示自动化测试的神秘面纱。我们将一起探讨如何利用代码来简化测试过程,提高效率,并确保软件质量。无论你是初学者还是有经验的开发者,这篇文章都能为你提供有价值的见解和技巧。让我们一起踏上这段探索之旅吧!
|
15天前
|
机器学习/深度学习 数据采集 运维
智能化运维:机器学习在故障预测和自动化响应中的应用
智能化运维:机器学习在故障预测和自动化响应中的应用
41 4
|
12天前
|
运维 负载均衡 Ubuntu
自动化运维的利器:Ansible入门与实践
【10月更文挑战第31天】在当今快速发展的信息技术时代,高效的运维管理成为企业稳定运行的关键。本文将引导读者了解自动化运维工具Ansible的基础概念、安装步骤、基本使用,以及如何通过实际案例掌握其核心功能,从而提升工作效率和系统稳定性。
|
14天前
|
NoSQL 测试技术 Go
自动化测试在 Go 开源库中的应用与实践
本文介绍了 Go 语言的自动化测试及其在 `go mongox` 库中的实践。Go 语言通过 `testing` 库和 `go test` 命令提供了简洁高效的测试框架,支持单元测试、集成测试和基准测试。`go mongox` 库通过单元测试和集成测试确保与 MongoDB 交互的正确性和稳定性,使用 Docker Compose 快速搭建测试环境。文章还探讨了表驱动测试、覆盖率检查和 Mock 工具的使用,强调了自动化测试在开源库中的重要性。