基于Macaca的混合H5应用UI自动化进阶

简介: # 基于Macaca的混合H5应用UI自动化进阶 混合H5应用UI自动化是移动应用自动化中无法绕过的一节,针对混合H5应用的UI自动化入门之前已经写过一篇文章:[https://testerhome.com/topics/9651](https://testerhome.com/topics/9651) ,入门的同学可移步学习。本文主要针对H5应用UI自动化高级使用进行一些分享。 ## 如何定

基于Macaca的混合H5应用UI自动化进阶

混合H5应用UI自动化是移动应用自动化中无法绕过的一节,针对混合H5应用的UI自动化入门之前已经写过一篇文章:https://testerhome.com/topics/9651 ,入门的同学可移步学习。本文主要针对H5应用UI自动化高级使用进行一些分享。

如何定位元素

参考上述入门文章:https://testerhome.com/topics/9651

进阶

本文中所涉及的demo示例代码已开源:

https://github.com/macaca-sample/macaca-java-biz-sample

H5基础知识储备

要对H5应用进行UI自动化,首先要掌握一些基础的H5知识,HTML,CSS,JQuery这些是最基础的,建议有此类需求的同学先简单补充下此类基础知识,主要是选择器以及事件触发等,笔者主要参考的是W3school的教程,教程地址如下http://www.w3school.com.cn/。掌握了最基础的H5知识,就可以进入下一步了。

H5内多个webview跳转后操作失败

部分同学反馈,自动化中当从一个H5页面跳转到另一个H5页面后对新的H5页面的操作无效,这大部分是因为H5页面内发生跳转后没有更新上下文导致的,当我们从Native进入一个H5页面后,当前上下文会存在两个,一个是Native,一个是webview,但是当webview内发生跳转时,也会生成新的上下文,比如当我们从上面这个H5跳转到另一个页面后,此时的上下文信息如下:

responseHandler.js:49:14 [master] pid:62034 Send HTTP Respone to Client[2017-11-08 20:45:31]: {"sessionId":"fecd1f1b-1ca4-4c54-9905-97a7af0c0a52","status":0,"value":"["NATIVE_APP","CDwindow-b35eb442-86e4-4dec-913d-ea3b0b69bf6a","CDwindow-59160ffd-74f4-4425-949a-30eb52786ba0"]"}

这里面我们可以发现NATIVE_APP表示Native的上下文,两个CDWindow代表的是两个H5页面,此时如果要对上层的H5页面操作,则必须更新当前上下文到栈顶的上下文,在biz层提供了用于上下文更新的API,如下:

/**
     * 当存在多个上下文时,切换当前上下文为当前最顶部的window,当webview发生跳转时可以通过此API更新上下文
     * @throws Exception
     */
    public void updateTopContext() throws  Exception {
        JSONArray contexts = contexts();
        this.context(contexts.get(contexts.size() - 1).toString());
    }

万能的 'driver.execute()'

Macaca提供了一些常用的H5操作的API,但有些时候这些API无法满足我们的特殊需要,比如我们想拿到页面内所有的跳转链接并跳转以此来完成二级页面的遍历,此时已有的API显然无法满足我们的需要,这时候就需要用到driver.excute(),excute()API可以用来执行js脚本,如此,我们便可以执行任何可以通过js脚本实现的功能,比如我们的demo中百度页面的href属性基本上表示了可跳转的二级页面链接,那我们可以通过如下代码实现二级页面遍历的需求:

如下代码在com.javademo.cases.SampleTest中,可前往https://github.com/macaca-sample/macaca-java-biz-sample查看

// com.javademo.cases.SampleTest
public void  iterateBaiDuPage() throws  Exception{
        JSONObject schemaJson = driver.execute("var arr=[];function getSchemas(){$.each($('[href]'),function(index,item){arr.push(item.getAttribute('href'))}); return arr;};return getSchemas();");
        JSONArray schemas = schemaJson.getJSONArray("value");
        System.out.println("schemas===========" + schemas);

        if (schemas!=null && schemas.size() > 0) {
            // 循环进入各个二级跳转链接
            for (int i = 0; i < schemas.size(); i++) {

                String tmpHref = (String) schemas.get(i);
                String jsCode = "location.assign(\"" + tmpHref + "\")";
                driver.execute(jsCode);
                driver.sleep(3000);
                saveScreen(tmpHref);

                driver.execute("history.back();");

            }

        }
    }

在编写如上脚本所需要的js脚本时,我们可以在inspector页面的console中先进行调试,调试成功后放入driver.excute('')中执行,如下:
img

如此,通过driver.execute(),我们便可以实现通过js脚本能够实现的功能,是不是很强大呢。

注意事项

  • 所有对H5上下文的操作需要在dom ready后执行才会生效,因此建议在H5页面跳转后sleep几秒等待页面ready再进行相应操作

有其他问题,欢迎补充讨论。

目录
相关文章
|
5月前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
290 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
6月前
|
人工智能 自然语言处理 API
UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
UI-TARS 是字节跳动推出的新一代原生图形用户界面(GUI)代理模型,支持跨平台自动化交互,具备强大的感知、推理、行动和记忆能力,能够通过自然语言指令完成复杂任务。
1803 16
UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
|
6月前
|
人工智能 自然语言处理 API
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
UI-TARS Desktop 是一款基于视觉语言模型的 GUI 代理应用,支持通过自然语言控制电脑操作,提供跨平台支持、实时反馈和精准的鼠标键盘控制。
2187 17
用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
|
5月前
|
Kubernetes 持续交付 开发工具
阿里云协同万兴科技落地ACK One GitOps方案,全球多机房应用自动化发布,效率提升50%
阿里云协同万兴科技落地ACK One GitOps方案,全球多机房应用自动化发布,效率提升50%
139 2
|
5月前
|
Kubernetes 持续交付 开发工具
阿里云协同万兴科技落地ACK One GitOps方案,全球多机房应用自动化发布,效率提升50%
阿里云协同万兴科技落地ACK One GitOps方案,全球多机房应用自动化发布,效率提升50%
|
6月前
|
XML 人工智能 文字识别
Mobile-Agent:通过视觉感知实现自动化手机操作,支持多应用跨平台
Mobile-Agent 是一款基于多模态大语言模型的智能代理,能够通过视觉感知自主完成复杂的移动设备操作任务,支持跨应用操作和纯视觉解决方案。
1768 10
Mobile-Agent:通过视觉感知实现自动化手机操作,支持多应用跨平台
|
6月前
|
UED
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
本篇教程将实现一个模拟火车票查询系统,通过输入条件筛选车次信息,并展示动态筛选结果,学习事件处理、状态管理和界面展示的综合开发技巧。
186 13
「Mac畅玩鸿蒙与硬件52」UI互动应用篇29 - 模拟火车票查询系统
|
6月前
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
本篇教程将实现一个打卡提醒小应用,通过用户输入时间进行提醒设置,并展示实时提醒状态,实现提醒设置和取消等功能。
142 10
「Mac畅玩鸿蒙与硬件53」UI互动应用篇30 - 打卡提醒小应用
|
2月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
84 15
|
2月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
81 11