微盟小程序 UI 自动化截图对比实践

原创牛壮微盟技术中心

一、前言背景

微盟小程序的页面进行了重大升级，要求确保在上线之后小程序新版、旧版商详页在 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

推荐阅读

微盟直播和多商家小程序身份互通的方案设计与实践

小程序商品页性能优化开发实践

JS也能做图像处理 - 会员卡主题色提取的方案解析

用纯 CSS 方式实现动态切换主题风格

继续滑动看下一个