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

目录
相关文章
|
19天前
|
运维 自然语言处理 安全
自动化运维的利器:Ansible入门与实践
【8月更文挑战第33天】在现代IT基础设施的管理中,自动化运维已成为提高效率、减少错误的关键技术。Ansible作为一款开源的自动化配置管理和应用部署工具,以其简洁性、易用性和强大的功能受到广泛欢迎。本文将介绍Ansible的基本概念、安装步骤和简单使用,通过实际案例展示其在自动化运维中的应用。
|
14天前
|
运维 Ubuntu Devops
自动化运维工具的魅力:Ansible入门
【9月更文挑战第5天】在快速变化的IT世界里,自动化运维不再是可选项,而是必需品。Ansible,一款简单却强大的自动化工具,正成为众多DevOps工程师的首选。本文将带你了解Ansible的基本概念、安装步骤以及如何编写简单的Playbook,从而开启你的自动化之旅。
60 35
|
3天前
|
存储 运维 网络安全
自动化运维工具:Ansible入门与实践
【9月更文挑战第17天】本文将介绍Ansible的基本概念、安装和简单使用,以及如何编写一个简单的Ansible playbook。通过本文,您可以了解到Ansible的基本原理和使用方法,以及如何在实际工作中应用Ansible进行自动化运维。
|
12天前
|
Web App开发 Java 测试技术
自动化测试的利器:Selenium WebDriver入门与实践
【9月更文挑战第8天】在软件开发的海洋中,测试是确保我们不会溺水的那根救生索。Selenium WebDriver,作为自动化测试的明星工具,让这根救生索更加结实可靠。本文将带你快速上手Selenium WebDriver,从基础设置到实际操作,再到实战演练,让你的开发之旅更加平稳顺畅。
|
7天前
|
运维 应用服务中间件 nginx
自动化运维的利器:Ansible入门与实践
【9月更文挑战第13天】在这个快速发展的IT时代,自动化运维已成为提升效率、减少失误的关键。本文将带你了解Ansible,一个强大的自动化工具,它简化了配置管理、应用部署和任务自动化。通过实际案例,我们将探索Ansible的基本概念、安装步骤、关键组件以及如何编写Playbook来自动化日常任务。无论你是新手还是有经验的运维专家,这篇文章都将为你提供宝贵的见解和技巧,让你在自动化运维的道路上更进一步。
|
14天前
|
C# Android开发 开发者
Uno Platform 高级定制秘籍:深度解析与实践样式和模板应用,助你打造统一且高效的跨平台UI设计
【9月更文挑战第7天】Uno Platform 是一个强大的框架,支持使用 C# 和 XAML 创建跨平台 UI 应用,覆盖 Windows、iOS、Android、macOS 和 WebAssembly。本文介绍 Uno Platform 中样式和模板的应用,助力开发者提升界面一致性与开发效率。样式定义控件外观,如颜色和字体;模板则详细定制控件布局。通过 XAML 定义样式和模板,并可在资源字典中全局应用或嵌套扩展。合理利用样式和模板能简化代码、保持设计一致性和提高维护性,帮助开发者构建美观高效的跨平台应用。
27 1
|
19天前
|
运维 监控 应用服务中间件
自动化运维的新篇章:Ansible Playbooks入门与实战
【9月更文挑战第1天】在追求效率和稳定性的今天,自动化运维已经成为IT行业的必修课。本文将带你走进自动化工具Ansible的世界,通过实战案例深入理解Ansible Playbooks的编写和应用。文章不仅介绍基础概念,更通过具体代码示例,展示如何利用Ansible简化日常运维任务,提升工作效率。无论你是运维新手还是希望深化自动化技能的资深人士,本指南都将为你开启一段新的学习旅程。
|
20天前
|
C# 开发者 Windows
全面指南:WPF无障碍设计从入门到精通——让每一个用户都能无障碍地享受你的应用,从自动化属性到焦点导航的最佳实践
【8月更文挑战第31天】为了确保Windows Presentation Foundation (WPF) 应用程序对所有用户都具备无障碍性,开发者需关注无障碍设计原则。这不仅是法律要求,更是社会责任,旨在让技术更人性化,惠及包括视障、听障及行动受限等用户群体。
44 0
|
20天前
|
vr&ar C# 图形学
WPF与AR/VR的激情碰撞:解锁Windows Presentation Foundation应用新维度,探索增强现实与虚拟现实技术在现代UI设计中的无限可能与实战应用详解
【8月更文挑战第31天】增强现实(AR)与虚拟现实(VR)技术正迅速改变生活和工作方式,在游戏、教育及工业等领域展现出广泛应用前景。本文探讨如何在Windows Presentation Foundation(WPF)环境中实现AR/VR功能,通过具体示例代码展示整合过程。尽管WPF本身不直接支持AR/VR,但借助第三方库如Unity、Vuforia或OpenVR,可实现沉浸式体验。例如,通过Unity和Vuforia在WPF中创建AR应用,或利用OpenVR在WPF中集成VR功能,从而提升用户体验并拓展应用功能边界。
31 0
|
20天前
|
运维 关系型数据库 MySQL
自动化运维工具:Ansible入门与实践
【8月更文挑战第31天】 在现代IT运维领域,自动化已成为提升效率和减少人为错误的利器。Ansible作为一款流行的自动化运维工具,以其简洁易用和强大的功能受到广泛欢迎。本文将通过实际操作演示,带你快速入门Ansible,并分享一些实践经验,帮助你构建起自己的自动化运维体系。