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

目录
相关文章
|
22小时前
|
传感器 监控 安全
传感器在机械自动化中的应用有哪些?
传感器在机械自动化中的应用有哪些?
17 2
|
2天前
|
JSON 监控 调度
局域网管理软件的自动化任务调度:Python 中的 APScheduler 库的应用
使用 Python 的 APScheduler 库可简化局域网管理中的自动化任务调度。APScheduler 是一个轻量级定时任务调度库,支持多种触发方式如间隔、时间、日期和 Cron 表达式。示例代码展示了如何创建每 10 秒执行一次的定时任务。在局域网管理场景中,可以利用 APScheduler 定期监控设备状态,当设备离线时自动提交数据到网站,提升管理效率。
14 0
|
5天前
|
Java 测试技术 持续交付
自动化测试框架选型与实战:深入探索与应用
【5月更文挑战第8天】本文探讨了自动化测试框架的选型与实战应用,强调了其在软件质量保障中的重要性。选型原则包括考虑项目需求、技术栈、可扩展性和可维护性,以及社区支持和文档。介绍了Selenium、Appium、JUnit和Pytest等常用框架,并概述了实战应用的步骤,包括明确需求、搭建环境、编写测试用例、执行测试、分析结果、维护代码和持续集成。合理选型与实践能提升测试效率,保障项目成功。
|
6天前
|
JSON 前端开发 JavaScript
快照测试在前端自动化测试中的应用
在前端自动化测试中,快照测试常用于检验组件渲染与布局。
|
12天前
|
敏捷开发 测试技术 持续交付
探索自动化测试在敏捷开发中的应用移动应用的未来:跨平台开发与操作系统的融合
【4月更文挑战第30天】随着软件开发周期的不断缩短,传统的软件测试方法逐渐显得力不从心。本文将深入探讨自动化测试在敏捷开发环境中的关键作用,分析其如何提高测试效率、减少人力资源成本,并确保软件产品的质量与稳定性。通过案例分析,我们还将讨论实施自动化测试的最佳实践和面临的挑战,为追求高效敏捷开发的组织提供参考。
|
12天前
|
数据采集 机器学习/深度学习 人工智能
自动化测试中AI辅助技术的应用与挑战
【4月更文挑战第30天】随着人工智能(AI)技术的飞速发展,其在软件自动化测试领域的应用日益增多。本文探讨了AI辅助技术在自动化测试中的应用情况,包括智能化测试用例生成、测试执行监控、缺陷预测及测试结果分析等方面。同时,文章还分析了在融合AI技术时所面临的挑战,如数据质量要求、模型的透明度与解释性问题以及技术整合成本等,并提出了相应的解决策略。
|
12天前
|
前端开发 IDE 数据可视化
深入理解与应用自动化测试框架Selenium的最佳实践
【4月更文挑战第30天】 本文将深入剖析自动化测试框架Selenium的核心原理,并结合最佳实践案例,探讨如何有效提升测试覆盖率和效率。文中不仅涉及Selenium的架构解析,还将提供针对性的策略来优化测试脚本,确保测试流程的稳定性与可靠性。通过实例演示,读者可以掌握如何在不同测试场景中灵活运用Selenium,以及如何处理常见的技术挑战。
|
13天前
|
前端开发 测试技术 持续交付
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
【4月更文挑战第30天】本文探讨了 Flutter 应用中UI测试和自动化测试的重要性,包括保障质量、提高效率和增强开发信心。Flutter提供`flutter_test`库进行Widget测试,以及`flutter_driver`进行集成测试。UI测试涵盖界面布局、交互和状态变化的验证,最佳实践建议尽早引入测试、保持用例简洁,并结合手动测试。未来,随着Flutter技术发展,UI测试和自动化测试将更加完善,助力开发高质量应用。
【Flutter 前端技术开发专栏】Flutter 中的 UI 测试与自动化测试
|
13天前
|
前端开发 搜索推荐 UED
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
【4月更文挑战第30天】探索Flutter的高级UI组件,如`TabBar`、`Drawer`、`BottomSheet`,提升应用体验和美观度。使用高级组件能节省开发时间,提供内置交互逻辑和优秀视觉效果。示例代码展示了如何实现底部导航栏、侧边导航和底部弹出菜单。同时,自定义组件允许个性化设计和功能扩展,但也带来性能优化和维护挑战。参考Flutter官方文档和教程,深入学习并有效利用这些组件。
【Flutter前端技术开发专栏】Flutter中的高级UI组件应用
|
13天前
|
敏捷开发 监控 前端开发
深入理解与应用自动化测试框架:以Selenium为例
【4月更文挑战第30天】 在软件开发的快速迭代周期中,质量保证(QA)团队面临持续的压力,需确保产品在每次发布时都达到预期的质量标准。为了应对这一挑战,自动化测试成为了关键工具,它不仅提高了测试效率,还确保了测试的一致性和可重复性。本文将探讨自动化测试框架Selenium的核心组件、工作原理及其在实际测试中的应用。通过分析Selenium的优势和面临的常见问题,我们将讨论如何有效地集成Selenium到现有的测试流程中,以及如何克服常见的技术障碍。我们的目标是为读者提供一个清晰的指南,帮助他们理解和利用自动化测试框架来优化他们的软件测试实践。

热门文章

最新文章