一、前言背景
微盟小程序的页面进行了重大升级，要求确保在上线之后小程序新版、旧版商详页在 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 元素的自动化操作能力。
