最近在搞移动端自动化测试的学习,遇见了一个比较头痛的事情,如何对原生app嵌套h5页面进行测试:

首先介绍一下 Hybird APP:

Hybrid App(混合模式移动应用)是指介于 Web App(套壳)、Native App(原生)这两者之间的 app ,兼具“ Native App 良好用户交互体验的优势 ”和“ Web App 跨平台开发的优势 ”。

也就是说,Hybrid App 是运用既包含类似移动端浏览器打开网站的相关技术,又包含原生应用调取底层接口(摄像头、传感器等等)的相关技术开发出来的应用。

工具:

基于 UiAutomator+Chromedriver 来进行移动端与APP进行混合测试

获取webvivew页面的三种方式:

1. 使用 chrome://inspect/#devices 进行测试,但是缺点需要FQ,虽然非常强大但是缺比较麻烦

2. 使用 driver.page_source 获取html页面

3.找开发人员要源文件

以上三点都比较麻烦,那么我们如何可以进行记不需要FQ也不需要麻烦开发人员呢?下面我给大家介绍一款比较强大的工具 uc-devtools:

uc-devtools 下载地址:

工具安装及使用效果

安装步骤嘛很简单傻瓜式安装:直接点击下载安装即可,由于是基于Chromium,所以原理其实和chrome的inspect类似,只不过不需要FQ了!使用步骤:

打开手机/模拟器,保证能够通过adb devices检测到设备

打开任意手机端浏览器访问网页或者H5页面,注意:如果是app内嵌web页面,需要打开app的webview debug模式

进行到第二步如果发现显示不出来,可以选择设置->本地Devtools Inspector UI资源

连接:

使用usb或者wifi adb连接手机,手机上运行支持devtools协议调试的浏览器webview应用(如果是UC浏览器,需要运行开发者版本)。成功运行可以看到webview设备列表界面:

以下就是获取到的h5页面了,可以进行与web端自动化一样的定位元素方式进行定位啦!

GitHub 加速计划 / de / devtools
63
6
下载
vuejs/devtools: Vue.js 开发者工具,这是一个浏览器插件,可以安装在 Chrome 和 Firefox 等现代浏览器中,用于调试 Vue 应用程序,提供了组件树查看、状态快照、时间旅行等高级调试功能。
最近提交(Master分支:4 个月前 )
79116147 - 1 年前
f0359002 - 1 年前
Logo

AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。

更多推荐