本文首发自 微盟技术中心 微信公众平台~
一、前言背景
微盟小程序的页面进行了重大升级,要求确保在上线之后小程序新版、旧版商详页在 UI 方面保持一致。
为此,商城 C 端的前后端/测试团队联合实现了一套技术方案,高效地完成了 UI 对比能力,有力地保证了项目上线质量。该方案包含基础数据准备、任务调度工具、Sonic 云真机搭建&用例编写、图片对比工具等模块,具有很高的可复用性,能解决非常多的实际问题。
二、框架设计
整体流程的时序图:
该方案的核心是围绕着 Sonic 云真机平台提供的基础能力,进行数据准备、用例编写、实现图片对比工具。
Sonic 云真机平台提供了一整套解决方案,可以用 Web 平台/ Rest API 远程管理多台安卓、iOS真机,并可以对手机进行基于 Appium/Selenium 的自动化操作。Sonic 整体功能分为以下几个部分:
三、项目实现细节
3.1 微信小程序批量截图
要对微信小程序做批量自动化截图,首先就依次遇到了2个问题:
1、如何进行大批量的真机截图?
- a.商详页有上百种状态组合,我们需要上百张截图。
- b.手工截图的效率非常低;
- c.截图之后,需要放到合适的目录结构里面,才适合做程序对比。
- d.新旧版都需要做一遍截图,工作量翻倍。
- e.因此需要找到自动化截图工具。
2、如何实现自动化截图?
- a.目前微信官方有 2 个自动化工具:
- 1)miniprogram-automator是基于 IDE 的,需要使用小程序代码包,且是单进程;因此效率很低。
- 2)minium 腾讯云测无法脱离腾讯平台。
- b.因此需要找到第三方的自动化截图工具。
而 Sonic 云真机提供的基础能力,可以帮助我们解决上述问题。关键能力1对 Android 原生元素的自动化操作能力。该示例中,Sonic 可以获取元素的 xpath ,对 Android 原生组件元素进行交互。该能力是基于 Appium 的自动化能力。因此我们可以编写脚本,实现打开微信 App、打开小程序等操作。
关键能力2
对微信小程序 Webview 元素的自动化操作能力。上述 Web 端的截图,Sonic 实现下面3个步骤:
1、通过 adb 转发 Android 真机的 WebView 进程端口,使其可以被外部访问。
2、启动一个无头 Chrome 进程。
- a.使用 Chrome inspector 访问被转发的真机 WebView 端口。
- b.Chrome 进程通过 9222 远程调试端口对外暴露。
3、通过 Sonic 的 Web 端访问 Chrome 进程的 9222 端口,即可实现在 Web 端查看真机小程序 WebView 的能力。
在 Agent 端, Sonic 是把第2步的 Chrome 换成了 Selenium 的 ChromeDriver ,同样实现了对 webview 的自动化操作。
3.2 可视化任务脚本
在上面的关键能力基础上, Sonic 还提供了编写可视化任务的能力。Sonic 可视化用例(局部):该 Sonic 可视化任务的底层原理,是对真机执行封装过的 Appium / Selenium 自动化操作。经查阅 Sonic 源码可知,核心流程中的"获取截图"能力,最终会调用 Agent 上的 ScreenShot 方法。
1、Sonic 会在在安卓手机上安装 appium-uiautomator2-server ,一个安卓自动化工具。
2、在 Agent 端内部, Sonic 实现了一个 androidDriver,通过它可以启动、连接、调用手机上的 appium-uiautomator2-server。
3、在 Agent 端调用 androidDriver 的截图 screenshot 方法,并保存截图。
我们编写的截图能力的任务逻辑如下:通过 Sonic 提供的能力,依次打开微信、打开小程序,然后切换到小程序所使用的 WebView。拿到 Webview 之后,可以使用 JS 能力向下滑动页面。然后使用 Sonic 提供的截图能力,多次滑动页面,对真机截图,最后存入对象存储平台(COS)。
3.3 任务调度工具
在 Sonic 平台上完成了某个小程序的截图任务之后,我们需要做一个任务调度工具。因为我们有很多小程序需要进行截图。Sonic 提供了丰富的 REST API, 我们通过 API 的方式可以控制多个任务。任务调度工具的时序图如下:
3.4 图片对比工具
拿到大量的真机截图之后,然后就可以进行对比了。时序图如下:在截图完成之后,调用图片对比平台的 API,执行对比任务,然后推送对比报告到企业微信群。在对比策略上,我们调研了多个开源的工具库:最终选择了 blink-diff。我们制作了一个网页,用来呈现最终的对比结果:图片相似度的对比,在对比原理上,有多种算法:此外还有深度学习的算法。后续我们会考虑提供多种对比算法,以供使用方自由选择。
四、实践结果
4.1 投入产出实测下来,使用该工具发现9个问题,耗时0.5天。比较重要的如下:
1、商品详情规格信息为空未正常展示。
2、促销样式二时,商品参与活动信息位置展示异常。
可见,该工具的 ROI 非常高,能够快速地定位问题。
4.2 执行效率
Sonic 平台可以水平扩展,挂载 N 台真机,可以并行多个任务。本次需求一共有120个截图任务,一个小时可以执行20个任务,目前挂载了3台手机,因此2个小时即可执行完所有的截图、对比需求。
五、规划
5.1 二次开发
目前截图能力是 Sonic 调用安卓系统的截图能力。只能截当前 ViewPort 高度的图片;需要滚动页面截取多张图,才能看到页面全貌。
我们正在推进新的方案,基于 Chrome 的 CDP 协议拿到更模块化的截图,可以排除掉截图的误差影响。此外还有更多的细节上的调整,以便更好地满足业务需求。
5.2 多渠道小程序自动化测试
各端小程序在原理上大同小异,都是 Webview + Native 组件的混合。我们接下来会探索对支付宝、抖音、快手、小红书小程序的自动化测试实践。
5.3 推广更多的业务应用
自动化截图巡检:可以利用 UI 截图能力对线上的小程序/H5做定时巡检,把截图提交给风控模块进行检测,以便及时暴露一些问题,如:白屏、非法内容、样式错乱等等。
六、参考
1、Sonic 云真机平台官网 https://sonic-cloud.cn/
2、2.0版本,微信小程序UI自动化入门 https://sonic-cloud.wiki/d/1897-20ui
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。