摘要
在数字化时代，软件质量控制尤为重要，特别是面向千万级用户的微信小程序。本文详细介绍了如何利用小程序云测服务优化境外支付代金券查询小程序的UI自动化测试流程，实现了测试效率的显著提升和UI一致性的确保，同时大幅度降低了人力成本。
背景
代金券查询小程序是微信境外支付提供的重要工具，拥有千万级用户。对于这样的高用户量小程序，UI展示的一致性和质量成为了业务成功的关键。每次迭代更新，都要求在UI方面保持严格的一致性，同时记录每次变更，以便于未来产品的持续迭代和回溯。
在面临UI一致性的挑战时，我萌生了实施自动化截图对比并记录的想法。经过深入研究和对比市场上的多种方案，我发现小程序云测服务的功能与我们的需求高度契合。在与云测服务团队深入交流基础能力需求后，我们在他们的大力支持下，顺利并高效地实现了UI对比功能，显著提升了项目的上线质量。在此过程中，我还要特别感谢我们部门的Markel和Elvinpeng两位同事，他们的专业技能和无私协助对项目的成功发挥了关键作用。
方案实施
鉴于小程序云测服务的强大功能，我们制定了以下步骤来实现UI自动化测试：
1.开发者工具中录制用例：使用微信小程序开发者工具录制关键用户操作，模拟真实用户体验，确保全面覆盖重要的UI元素。
2.小程序云测服务真机回放：通过云测服务进行真机环境下的用例回放，保证测试结果的真实性和准确性。
3.图片对比与通知：结合blink-diff进行图片对比，通过sharp处理图像格式问题，利用腾讯轻联进行测试结果的推送和记录。
在实施上述流程中，我们采用了一系列关键工具，其具体应用方式也一并进行了详细介绍。鉴于不同项目可能有不同的需求和背景，我们鼓励大家根据自身实际情况进行选择和调整。此外，我们也欢迎业界同行在评论区分享任何具有类似功能但更高效的工具，以共同探讨和发掘更加优化的测试解决方案。
录制用例
微信小程序开发者工具：提供脚本用例录制能力
微信小程序开发者工具下载链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/nightly.html
官方文档介绍：https://developers.weixin.qq.com/miniprogram/dev/devtools/auto/record.html
录制用例我们采用的是微信开发者工具的自动化测试能力。微信在官方文档介绍中给大家介绍了关于微信开发者工具提供的录制回放的操作，小程序开发同学可以利用开发者工具进行相关的脚本用例录制以用于后续流程的自动化回归测试。
注意点1：在录制前可以选择使用虚拟测试帐号进行测试，这能帮助我们尽可能模拟真实用户进入的效果。
如果对于一些小程序需要身份验证等需要，可以选择自己的帐号录制，不过需要在小程序云测服务中记得“测试账号添加”。可以参考使用真实微信号测试。
注意点2：其中我们重点关注下4.4的截图能力，这个能力可以实现测试者对指定的场景进行截图，这对于针对性的UI页面测试对比工作是比较有帮助的。
小程序云测服务真机回放
小程序云测服务：提供录制用例回放、用例回放截图、测试报告资源能力。
测试任务提交
小程序云测官方提供了一系列丰富的第三方接口，极大地方便了开发者在不同场景下提交和管理测试任务。以我们的代金券查询小程序为例，我们通常在新版本发布前提交测试任务，以确保版本的稳定性和UI的一致性。
在代金券查询小程序的版本发布时，我们通过小程序云测服务的测试任务提交接口，启动“录制回放”模式的测试。这一模式允许我们根据不同的验证场景选择合适的小程序版本。例如，对于日常的UI巡检，我们选用线上版本进行测试；而在发布新版本的验证过程中，则选择体验版。特别值得注意的是，为了确保UI对比的准确性，我们建议在测试时指定设备型号，以避免由于机型差异而引起的对比误差。
此外，小程序云测服务的测试任务接口还提供了描述字段，便于我们在获取任务列表时快速区分不同类型的测试任务，如定时测试任务和发布测试任务。
额外有个关注点是：assert_capture参数表示在assert的时候是否截图/enable_tap_capture参数表示在点击操作时是否截图。通过观察结果，可以明显观察到如果选择了开启assert_capture/enable_tap_capture的话，会出现比较多的图片资源在测试任务资源包中。因此对于针对性比较明确的UI对比流程我们可以关闭这些选项，便于后续的图片对比工作中图片提取。
获取任务提测记录
我们可以使用获取任务提测记录接口查询提交过的测试任务，获知之前提交任务的完成情况以及相关信息。围绕“小程序录制操作截图UI对比”的主题，我们采用的任务类型是“录制回放”（选择3）。并且贴心的小程序云测服务提供了描述关键字搜索，极大的方便我们对单次测试任务的获取。
利用MiniTest提供的接口，我们能够高效地获取两个不同版本的小程序测试任务记录，从而实现灵活的版本对比。这一过程中，具体选择哪些版本进行对比完全由业务团队根据需求来决定。
以我们的小程序为例，我们实施了一套高效的测试策略：
1.定时测试线上版：我们设定每日自动执行小程序的线上版测试任务（称为测试版本A），以持续监控和确保当前用户所使用版本的稳定性和性能。
2.体验版测试：在小程序的新版本开发流程中，我们创建并测试小程序的体验版（称为测试版本B），专注于新功能和改动的验证。
通过这种方法，我们可以方便地获取测试版本A和版本B的结果资源，并对它们进行详细的对比分析，以确保新版本的改动不会影响小程序的核心功能和用户体验。
获取测试结果资源
小程序云测服务的测试结果资源下载接口使用户能够方便地获取测试结果，如截图和日志。该接口提供了一个下载链接，用于获取打包成zip文件的测试结果。下载并解压这个文件后，内容将按照用例名称和设备ID进行分类。
手动截图测试资源的识别
我们在开发者工具中录制的测试用例包含了截图操作，这些在小程序云测服务的自动化回放中得以复现。通过screenshot_capture字段，我们可以精确提取录制过程中的特定截图，进一步用于UI对比分析。
获取对比资源的代码概览
在微信小程序UI测试的“测试任务提交至提取对比资源”环节，我们主要分为两个部分来处理：测试任务的提交和对比资源的获取。
1. 测试任务提交
这一部分的核心是通过接口请求创建测试任务。由于其操作相对直接，我们在此不做过多展开。
2. 对比资源的获取
这是一个关键环节，要求开发者编写定时脚本以循环调用接口，确保及时获取到测试任务的完成状态，从而启动UI对比工作。下面是实现此功能的关键代码段落：
在此代码中，我们首先获取两个版本的任务提测记录，这通常根据各自业务特性来选择，如新版本研发与每日定时运行的最新版本。接下来，我们下载并解压包含测试任务图片资源的zip文件。最后，将这两个版本的测试图片资源整合到一个数据结构中，以便进行有效的图片对比。
这个过程涉及两种处理图片资源的思路：一是直接将图片文件转换为Buffer以进行对比；二是上传至存储桶并利用图片链接以进行对比。后续的图片对比方案中我们也提供了两种方案采用不同的形式。
图片对比
blink-diff：提供图片对比能力
sharp：提供图片转换能力
在获取到第三方接口提供的回放截图资源后，我们着手进行了图片对比工作。
在这一过程中，我们在图片对比工具上初步选择了blink-diff，主要因为其操作便捷性和对比结果的清晰度。此外，我们还参考了《微盟小程序 UI 自动化截图对比实践》一文，该文详细对比了不同的图片对比工具，对于有兴趣深入了解的同行来说是一个很好的参考资源。
遇到的技术挑战及解决方案
在对比过程中，我们遇到了一个有趣的技术挑战。 由于资源包中提供的资源是JPEG格式，可是blink-diff对该格式资源不支持对比，会出现“Error: Invalid file signature”的报错。为了解决这一问题，我们采用了sharp工具包对图片进行格式转换，从而确保blink-diff能够正常进行PNG格式的图片对比。
优化后的差异展示
为了更清晰地展示对比结果，我们设置了composition参数为true。这样，差异图像就会显示原图像和修改后图像的合成视图，使得前后变化更加一目了然。同时大家也可以根据业务特性决策是否需要设置 hideShift 为 true，这样平移不会被视为差异。
预期图片获取的代码概览
下面代码实现了一个图像比较的自动化流程：首先下载两个版本需要对比的图片，将它们从JPEG转换为PNG格式，然后使用 blink-diff 库比较这两张图片的差异，并根据hasPassed函数比较结果以获取是否检查到有差异，整个过程中包含了异常处理机制以确保流程的稳定性。
在我们的后续业务流程中，为了使UI结果的推送更加便捷，我们引入了图片上传功能，这样可以直接提供图片链接给后续流程。但是有个关键点在于，目前blink-diff输出的差异对比图片是存在本地的。因此需要考虑使用到机器环境进行差异图输出并且上传到存储空间。
对于上传图片的过程，大家不仅可以使用各自业务部门提供的上传文件服务，也可以考虑使用腾讯轻联的腾讯云对象存储服务。通过webhook链接实现存储，从而便于直接进行消息推送等操作。
就此我们已经完成了云测服务的真机回放以及回放图片的UI对比流程。我们可以将上面的两个流程进行串起来观察下。其中有些代码逻辑还是需要结合业务自身数据结构进行调整，大家可以自行调整下。
对比结果推送
增强UI对比功能的应用
在进行UI对比的多样场景中，我们不仅应满足于确认修改是否符合预期，还应利用录制回放和截图功能，扩展到常规化测试用例的补充和迭代流程的记录。这样，我们能够充分发掘并利用这些功能的潜力。
多工具集成的策略
我们的UI对比结果处理涉及多个工具的综合应用，这时候就需要考虑到使用我们的老朋友 腾讯轻联。腾讯轻联作为一个关键环节，帮助开发人员无需深厚基础就能快速搭建上述所有交互流程。对个人用户而言，它提供了多达1000次的免费体验机会。以下是利用腾讯轻联搭建个人多产品交互流程的步骤：
1.企业微信机器人：作为主要的通知工具。
2.腾讯文档：用于常规化测试用例的更新。
3.腾讯云COS：负责检查数据的存档和管理。
建立Webhook触发事件：通过提供的链接，支持POST请求携带参数，实现UI对比完成后的数据推送。
企业微信通知模块的集成：通过简单拖拽操作实现企业微信机器人通知，支持图片直接推送，便于移动端查看。
常规化检查的构建
我们构建了一套针对小程序工具型背景的常规化检查模板。比如，检测用户点击说明文案icon时，是否会弹出含说明文案浮层。任何偏离预期的情况都需要立即调整。
检查存档的重要性
在产研沟通中，我们发现产品团队对产品迭代过程中的细节变更十分关心。为此，我们总结了页面操作的变化存档，帮助产品和设计团队在规划新业务时能够清晰地了解现网页面或组件的最新样式，从而做出更好的产品规划。
成果与效益
采用此方案后，我们取得了以下显著成效：
●测试效率提升了40%，通过自动化显著减少了重复的人工测试操作，降低开发通许在测试时间成本。
●UI一致性检测的准确率提高到了100%，避免了研发交付体验后的重新返工。
●接入小程序云测服务以来，通过现网版本与预发布版本的图片对比，累积发现了3个问题。避免了用户在使用产品过程中对券情况产生误解。
结论与展望
本次项目实践不仅显著提升了小程序UI测试的效率和准确性，而且为境外小程序未来在自动化测试方面的进一步探索和应用打下了坚实的基础。未来，我们计划将这一流程应用于更多小程序项目，进一步提升在软件质量保障方面的能力。在后续的章节中我们还会介绍到如何利用小程序云测服务完成对小程序动画等更多场景的测试，欢迎大家持续关注章节更新。
相关信息补充
小程序云测服务：https://minitest.weixin.qq.com/cloudtest
官方文档：MiniTest 小程序云测服务简介 | 微信开放文档
最后非常感谢小程序云测团队对境外支付小程序提供的技术支持~
