概括

在数字时代，软件质量控制尤为重要，尤其是针对千万用户的微信小程序。本文详细介绍了如何利用小程序云测试服务来优化海外支付凭证查询小程序的UI自动化测试流程，实现测试效率的显着提升并保证UI的一致性，同时大幅降低人力成本。

背景

凭证查询小程序是微信海外支付提供的重要工具，拥有数千万用户。对于这样一个拥有大量用户的小程序来说，UI显示的一致性和质量就成为了商业成功的关键。每次迭代更新都要求UI严格一致，并记录每次变更，以方便未来产品的不断迭代和回顾。

当面临UI一致性的挑战时，我想到了实现自动截图对比和记录的想法。经过对市场上各种解决方案的深入研究和比较，我发现小程序云测试服务的功能与我们的需求高度吻合。经过与云测试服务团队深入讨论基本能力需求，在他们的大力支持下，我们成功高效地实现了UI对比功能，显着提升了项目上线质量。在此过程中，我还要特别感谢我们部门的两位同事，他们的专业技能和无私帮助为项目的成功发挥了关键作用。

计划实施

鉴于小程序云测试服务的强大功能，我们制定了以下步骤来实现UI自动化测试：

1、在开发者工具中记录用例：使用微信小程序开发者工具记录用户关键操作，模拟真实的用户体验，确保重要UI元素的全面覆盖。

2、小程序云测试服务实机回放：使用云测试服务在真机环境下进行用例回放，保证测试结果的真实性和准确性。

3、图片对比及通知：结合-diff进行图片对比，通过处理图片格式问题，使用腾讯青联推送并记录测试结果。

在实现上述过程中，我们使用了一系列关键工具，并且还详细介绍了它们的具体应用方法。鉴于不同的项目可能有不同的需求和背景，我们鼓励大家根据自己的实际情况做出选择和调整。此外，我们也欢迎业界同行在评论区分享更多高效且功能相似的工具，共同讨论和发现更优化的测试解决方案。

记录用例

微信小程序开发者工具：提供脚本用例记录功能

微信小程序开发者工具下载链接：

官方文档介绍：

为了记录用例，我们使用微信开发者工具的自动化测试功能。微信在官方文档介绍中介绍了微信开发者工具提供的录制和播放操作。小程序开发同学可以使用开发者工具记录相关脚本案例，用于后续流程的自动化回归测试。

注1：录制前可以选择使用虚拟测试账号进行测试，这可以帮助我们尽可能模拟真实用户输入的效果。

如果某些小程序需要身份验证，您可以选择自己的账户进行记录，但需要记住在小程序云测试服务中“添加测试账户”。可以参考真实的微信信号测试。

注2：其中，我们重点关注4.4的截图能力。该功能可以让测试人员对指定场景进行截图，更有利于有针对性的UI页面测试和对比工作。

小程序云测试服务真机播放

小程序云测试服务：提供录制用例回放、用例回放截图、测试报告资源能力。

测试任务提交

测试任务提交界面：

小程序云测试官方提供了一系列丰富的第三方接口，极大方便了开发者在不同场景下提交和管理测试任务。以我们的凭证查询小程序为例，我们通常会在新版本发布之前提交测试任务，以保证版本的稳定性和UI的一致性。

当凭证查询小程序版本发布时，我们通过小程序云测试服务的测试任务提交接口，以“录制回放”模式启动测试。这种模式可以让我们根据不同的验证场景选择合适的小程序版本。比如日常UI检查，我们选择在线版本进行测试；在发布新版本的验证过程中，我们选择试用版本。特别值得注意的是，为了保证UI对比的准确性，我们建议在测试时指定设备型号，以避免因型号差异导致的对比错误。

另外，小程序云测试服务的测试任务接口还提供了描述字段，可以让我们在获取任务列表时快速区分不同类型的测试任务，比如定时测试任务、发布测试任务等。

另外需要关注的一点是：该参数表示点击时是否截图 / 参数表示点击时是否截图。通过观察结果可以清楚地观察到，如果选择启用/，测试任务资源包中会出现更多的图片资源。因此，为了更有针对性的UI对比过程，我们可以关闭这些选项，以方便后续图像对比工作中的图像提取。

获取任务测试记录

获取任务测试记录接口：

我们可以通过获取任务测试记录接口来查询已提交的测试任务，了解之前提交的任务的完成情况及相关信息。围绕“小程序录制操作截图UI对比”这一主题，我们使用的任务类型是“录制并回放”（选择3）。而贴心的小程序云测试服务提供了描述关键词搜索，极大方便了我们单项测试任务的获取。

利用提供的接口，我们可以高效获取两个不同版本的小程序测试任务记录，从而实现灵活的版本比较。在这个过程中，具体选择哪个版本进行比较，完全是业务团队根据需求来决定的。

以我们的小程序为例，我们实现了一套高效的测试策略：

1、定期测试线上版本：我们设置每天自动执行小程序的线上版本测试任务（称为测试版本A），以持续监控和保证用户当前使用的版本的稳定性和性能。

2、试用版测试：在小程序新版本开发过程中，我们创建并测试了小程序的试用版（称为测试版B），重点验证新功能和变更。

通过这种方法，我们可以轻松获取测试版本A和版本B的结果资源，并对其进行详细的对比分析，以确保新版本的变化不会影响小程序的核心功能和用户体验。

获取测试结果资源

获取测试结果资源接口：

小程序云测试服务的测试结果资源下载接口可以让用户轻松获取测试结果，例如截图、日志等。该界面提供下载链接，用于获取打包成 zip 文件的测试结果。下载并解压该文件后，内容将按用例名称和设备 ID 进行分类。

手动截图测试资源识别

我们在开发者工具中记录的测试用例包括截图操作，在小程序云测试服务的自动播放中进行了重现。通过字段，我们可以准确提取录制过程中的具体截图，以便进一步用于UI对比分析。

获取比较资源的代码概述

在微信小程序UI测试的“提交测试任务到提取对比资源”环节中，我们主要分为两部分：提交测试任务和获取对比资源。

1.测试任务提交

这部分的核心是通过接口请求创建测试任务。由于它的操作比较简单，我们这里就不做过多介绍了。

2. 资源获取对比

这是一个关键环节，需要开发者编写定时脚本循环调用接口，保证及时获取测试任务的完成状态，从而启动UI对比工作。以下是实现该功能的关键代码片段：

在这段代码中，我们首先获取两个版本的任务测试记录，这些记录通常是根据各自的业务特点来选择的，比如新版本开发、每天定时运行的最新版本等。接下来，我们下载并解压包含测试任务图像资源的zip文件。最后，将这两个版本的测试图像资源整合成一个数据结构，进行有效的图像比较。

这个过程涉及到图像资源处理的两种思路：一是直接转换图像文件进行比较；二是直接转换图像文件进行比较。另一种是上传到存储桶并使用图片链接进行比较。在后续的图片对比方案中，我们也提供了两种不同形式的方案。

图片对比

-diff：提供图像比较功能

：提供图像转换功能

获取到第三方接口提供的播放截图资源后，我们开始进行图片对比。

在这个过程中，我们最初选择-diff作为图像对比工具，主要是因为它操作方便，对比结果清晰。另外，我们还参考了《微盟小程序UI自动化截图对比实践》这篇文章，详细对比了不同的图片对比工具，对于有兴趣进一步了解的同事来说是一个很好的参考资源。

遇到的技术挑战及解决方案

在比较过程中，我们遇到了一个有趣的技术挑战。由于资源包中提供的资源是JPEG格式的，但-diff不支持这种格式的资源比较，所以会出现“:file”错误。为了解决这个问题，我们使用了工具包来转换图像格式，以保证-diff能够正常比较PNG格式的图像。

优化差异显示

为了更清晰地显示比较结果，我们将该参数设置为true。这样，差异图像就显示了原始图像和修改后图像的合成视图，使前后变化更加明显。同时也可以根据业务特点决定是否设置为true，这样翻译就不会被视为差异。

预期图像采集的代码概述

下面的代码实现了图像比较的自动化过程：首先下载需要比较的两个版本的图像，将它们从JPEG转换为PNG格式，然后使用-diff库比较两个图像之间的差异，并比较根据函数获取的结果是否检测到任何差异，整个流程包含异常处理机制，保证流程的稳定性。

在我们后续的业务流程中，为了让推送UI结果更加方便，我们引入了图片上传功能，可以直接为后续流程提供图片链接。但一个关键点是，目前 -diff 输出的差异比较图像是存在于本地的。因此，需要考虑利用机器环境输出差异图并上传到存储空间。

对于上传图片的过程，您不仅可以使用各自业务部门提供的文件上传服务，还可以考虑使用腾讯青联的腾讯云对象存储服务。通过链接实现存储，方便消息推送等直接操作。

至此，我们就完成了云测试服务的真机播放和播放图片的UI对比过程。我们可以将上面两个过程连接起来观察。部分代码逻辑还是需要根据业务自身的数据结构进行调整，大家可以自行调整。

推送对比结果

增强UI对比度功能的应用程序

在UI对比的各种场景中，我们不仅要满足于确认修改是否符合预期，还要利用录音回放和截图功能延伸到常规测试用例的补充和迭代过程的记录。这样，我们就可以探索和利用这些功能的全部潜力。

多工具集成策略

我们的UI对比结果处理涉及到多种工具的综合应用。这个时候我们就需要考虑使用我们的老朋友腾讯青联了。腾讯青联作为关键一环，帮助开发者在没有深厚基础的情况下快速构建上述所有交互流程。对于个人用户，提供多达1000次免费试用机会。以下是使用腾讯青联构建个人多产品交互流程的步骤：

1、企业微信机器人：作为主要通知工具。

2.腾讯文档：用于更新常规测试用例。

3、腾讯云COS：负责巡检数据的归档和管理。

建立触发事件：通过提供的链接，可以携带参数进行POST请求，实现UI比对完成后的数据推送。

集成企业微信通知模块：通过简单的拖拽操作实现企业微信机器人通知，并支持图片直接推送，方便在移动端查看。

施工例行检查

我们构建了一套小程序工具后台的例行检查模板。例如，检测当用户点击描述文案图标时是否会弹出包含描述文案的弹出层。任何与预期的偏差都需要立即调整。

检查归档的重要性

在产研沟通过程中，我们发现产品团队非常关注产品迭代过程中的细节变化。为此，我们总结了页面操作变化的存档，以帮助产品和设计团队在规划新业务时清晰了解现有网页或组件的最新样式，从而做出更好的产品规划。

结果和好处

采用该解决方案后，我们取得了以下显著成果：

●测试效率提高40%。通过自动化大大减少了重复的手动测试操作，降低了开发和测试时间成本。

●UI一致性检测准确率提升至100%，避免开发交付体验后返工。

●接入小程序云测试服务以来，通过对比现网版本和预发布版本的图片，发现三个问题。这样可以避免用户在使用产品过程中对优惠券情况产生误解。

结论与展望

本次项目实践不仅显着提升了小程序UI测试的效率和准确性，也为未来海外小程序自动化测试的进一步探索和应用奠定了坚实的基础。未来我们计划将这一流程应用到更多的小程序项目中，进一步提升我们的软件质量保障能力。在后续章节中，我们还将介绍如何使用小程序云测试服务完成小程序动画等场景的测试。欢迎您继续关注章节更新。

相关资料补充

小程序云测试服务：

官方文档：小程序云测试服务介绍 |微信开放文档

最后非常感谢小程序云测试团队为海外支付小程序提供的技术支持~