为了进一步降低进入小程序生态经营和卖货的门槛，让所有中小微商家、个体创业者可以快速拥有一个小程序店铺，在微信内实现电商业务的自主运营，2024年8月份，微信对视频号小店进行升级，推出 微信小店。

微信小店业务迭代非常快，同时还需要保证线上功能稳定，这对开发和测试同学，是一个很大的挑战。 为了防新开发功能，影响到线上已有能力，开发同学提出，希望借助图片对比的能力，在每次上线前，针对P0页面，将开发中的版本和线上版的相同功能进行对比，对差异化的内容进行确认。

为此，小程序云测服务 对原有的自动化测试进行升级改造，全面支持图片对比能力

下面具体讲述利用小程序云测服务进行图片对比测试完整的实践流程，并以微信小店作为最佳实践，讲述如何将图片对比能力纳入质量红线

一、实践流程

一般来说，图片对比有几个关键流程：

1. 获取测试图片：即如何获取需要测试的页面截图
2. 确定基准图片和对比图片：确定需要测试的图片和对比的基准图片是哪些，它们用什么规则相互匹配
3. 选择对比方式：确认图片对比方式，比如是否需要使用区域对比能力
4. 查看报告：云测在报告总览页面，特别增加了“图片对比”Tab，方便查看所以图片对比信息

1. 获取测试图片

获取测试图片有2中方法：

• 录制回放：在开发者工具中，录制用例时，选择截屏操作，即可产生页面截图
• Minium：通过小程序自动化框架Minium，在Python脚本中，调用 capture截图接口。特别注意：如果需要做图片对比，必须传入参数region。

两种方式优缺点对比如下：

方法	优点	缺点
录制回放	学习门槛低，通过点点点方式录制即可，无需写代码	只能截整张图，不如Minium灵活
Minium	操作灵活，支持截取部分元素和整张截图，并可以直接指定忽略区域等相关信息	需要写Python3脚本，有一定学习门槛

在Case编写完成后，可以手动或通过上传用例接口，上传到云测，然后构建测试计划，最后通过手动或提交任务接口进行跑测

**常见问题：**可以用系统接口，直接截图吗？

不行。 因为直接截取整张图片时，保留了手机顶部的banner，如当前时间等，干扰图片对比结果（如因为顶部banner截图时间不同导致对比失败）。通过上述两种方式截图，可自动去掉手机顶部的banner，只保留小程序框架中的内容，提升图片对比的抗干扰性。所以在小程序云测中，只对比通过上述2种获取到的图片

2. 确定基准图片和对比图片

这里一般业务会根据实际情况选择，可以分为以下两个部分：

确认基准图片

基准图片，顾名思义，就是正确的图片集合。

比如以微信小店为例，根据业务需求，选择小程序现网的页面截图作为基准图片的作为基准图片。具体来说，在云测执行上面Minium脚本，选择线上版

在测试完成后， 可以在云测的“项目管理”=>“图片对比管理”中手动将本次任务跑测的所有图片设置为基线图片，或者调用 图片对比的API接口 设定基线图片

确认对比图片

对比图片是用来和基准图片进行对比，看两者是否一致。

还是以微信小店为例，将小程序开发中版本的图片作为对比图片。如果图片对比一致，表示本次改动，没有影响现网原功能。

具体来说，然后云测执行时，选择 开发中版本，再次执行上面Minium脚本即可。

测试结束后，如果已经设置好了基准图片，云测会自动根据 “!!#009900 五个相同!!”（相同小程序AppID，相同机型，相同页面路径，相同截图名称，相同截图类型）的基准图片，会自动和对应的基线图片对比。

【特别注意】从这里可以看出，在前面写Minium的Case中， 截图名称很重要，因为只有截图名称相同图片，才会进行对比。而且在截图时，尽量避免使用同名图片，以免映射关系混乱。截图类型是指Minium截图中，是整张截图还是部分元素截图

3. 选择对比方式

云测采用的业内常用的SSIM算法去对比图片，对比结果小于1时，即判定对比失败，默认是整张图片一起对比。

在具体实践过程中，我们发现，如果直接对比整个页面，图片对比可用性较差，因为很难保证整个页面一直不会改动。而整张截图对比时，如果UI稍微改动，就可能对比失败。

为了提升图片对比可用性，Minium在截图时，可以指定元素截图，较好的解决这个问题。但这个方式有几个问题：

• Minium指定元素截图用例编写有一定门槛，需要先获取到元素
• 如果录制回放截图时，不支持指定元素截图
• 只有部分截图，在某些场景下，也不够灵活。比如页面有一部分是动态显示，对比图片时，希望对比整个截图，但是忽略这部分动态内容

为此云测端特别支持了**!!#009900 区域对比!!**能力，具体来说，对于所有截取的图片（包括整图和部分截图），在云测可以指定2种区域对比能力：

• 仅对比选择的区域：只对比选择的区域，区域外的图片不对比。适合有明确需要对比对象的场景
• 忽略选择的区域 ：和上面类型相反，对选择的区域全部忽略，仅对比区域外的图片。适合整图对比，但是希望去除部分噪声的场景

具体配置方式也很简单，可以直接在云测的 “项目管理”=>“图片对比管理” 中设置，或者通过Minium接口，在截图的时候直接设定好。

FYI：云测支持针对每个图都设置不同的对比方式。这么多灵活的对比方式，最终目的是提升图片对比可用性和准确性

4. 查看报告

云测在用例结果展示页面，提供了图片对比的筛选，可以快速看到每个用例执行的图片对比结果

此外，在报告总览页面，汇总了所有用例的图片对比结果截图，更快更直观发现问题

二、 微信小店最佳实践

微信小店的实践流程也上面介绍的一样，三个步骤具体实践如下：

1. 获取测试图片

小店采取了编写Minium脚本的方式获取测试图片。主要是考虑到:

• Minium更加灵活，修改拆分Case比较方便
• 可以直接在Minium脚本中直接指定后续图片对比的方式和区域，无需后续手工配置对比图片，非常适合集成到Devops流程中
• 在电商业务中，常常存在一些变化的数据（如购买量，推荐商品等），对图片对比效果产生较大干扰。Minium脚本支持hook和mock数据方法，可以较好解决这个问题，提升对比稳定性

其中获取截图的关键函数示例如下：

region_info = {
         "type":   "ignore",  # 对比类型选择忽略部分区域，如果希望仅对比部分区域，type要改为 "focus"
         "rects": rects #多个区域 starts,starty,endx,endy
 }  # 指定多个区域，后续在怎么对比中，会介绍type和rects的作用

# 这里采用截取整图的方式，注意图片命名也很重要，后续对比时，会根据文件名去判断对比对象
self.capture(platform+"_"+str(item.get("product_id"))+"_product.png", region=self.page,region_info=region_info)

2. 设定基准图片和对比图片

前面提到，在小店业务中，我们是将最新现网图片作为基准图片，开发分支的测试结果作为对比图片。

为了及时获得现网最新图片，每天凌晨会有定时任务，在云测用线上版本，运行Minium用例。任务运行完成后，调用API接口，将任务下面的所有图片设置为基准图片

3. 选择对比方式

几种对比方式在小店都有用到，例如当页面重点是希望对比标签，样式区别，banner大图不是关注点，所以对于banner图，采用了忽略选择的区域方式。

4. 查看报告

云测支持分享报告的能力，并提供API接口调用方式获取分享链接。这样可以很方便将报告发送给开发排查问题，或者推送到群聊中

Tips: 在获得分享报告连接，建议在报告后面增加 &tab=pic_diff&summary=0 参数，可以方便快速定位到图片对比的Tab

5. 小店最佳实践流程总结

微信小店使用图片对比能力整理流程图如下，整个流程，通过小程序云测提供的API接口，自动化运行并产出报告：

1. 编写Minium自动化用例，指定忽略区域，和图片对比方式。编写好的用例，上传到小程序云测服务，建立好测试计划
2. 利用 提交任务API 跑测线上版，轮询测试任务。等任务结束后，调用 将任务所有图片设为基线图片API ，将线上版的图片设置为基准图片。一般采用定时任务在凌晨执行。
3. 在开发提交或Merge代码时，自动触发流水线，提交任务API，提测开发中版本。任务跑测结束后，云测会自动按照“五个相同”（相同小程序AppID，相同机型，相同页面路径，相同截图名称，相同截图类型）原则，和线上版本的图片进行对比。对比完成后，可以调用分享任务API，获取报告的链接，将结果报告进行通知推送
4. 如果发现图片对比结果，误报率比较高，可以再次调整忽略区域块或者忽略阈值，调整完成后，调用 重新对比任务图片 API，重新生成图片对比结果报告

三、 解决对比图片“误判”问题

在实践过程中，遇到一个棘手的问题是：相同机型，对相同小程序页面，不同时刻截图，在像素点上会有细微差异，导致人眼看起来图片是一致的，但是SSIM判断对比失败，从而导致误判。

例如下面的banner图，相同机型在不同时刻的截图，细微的差异很大。!!#ff0000 分辨率越高的机器，差异越多，误判率越高!!

经过查阅资料，发现产生这种情况可能的原因有：

1. 抗锯齿和渲染算法：操作系统和应用程序在渲染图像时可能使用抗锯齿技术和其他图像处理算法。这些算法在不同时间点可能会有微小的变化，导致截图的像素点不同
2. 屏幕刷新率和帧同步：即使页面内容是静态的，屏幕仍然会不断刷新。不同时间点的截图可能捕捉到屏幕刷新过程中的不同帧，导致像素点的细微差异
3. 自动调节算法：屏幕的色彩表现和亮度可能会根据不同的亮度和色温自动调节，会影响截图效果

整体来说，这主要和手机操作系统和显示屏技术相关，!!#ff0000 无法避免!!。

云测从两方面来解决这个问题：

1. 支持自定义阈值，忽略较小的差异

我们发现这些差异区域，一般是非常小的框或者线条，比如同样的 “山” 字，在相同机型下，跑测的结果都有细微区别，右边的竖线没有划到最下面

又比如，会遇到这种情况，对比图片渲染的时候，会对出一条很小的细线

为了处理这种毛刺情况，云测支持项目在“项目管理”=>“产品管理”中，设置忽略面积和忽略距离，当差异面积或者差异的长宽差，!!#009900 小于阈值时，忽略这个微小的差异!!。

在微信小店中，将忽略面积的阈值设置为120，忽略距离设置为10，表示差异区域的面积，如果小于100，或者差异区域的长度差或者宽度差小于10，这个差异区域可以忽略。其他业务可以根据自己情况动态调整。
注意每次调整后，可以在报告总览页面，点击“重新对比图片”按钮，方便查看调整后效果

2. 利用开源的视觉对比算法

除了SSIM对比方式，云测还尝试了其他图片对比的算法，比如计算 mse， PSNR，感知哈希等等。但是这些算法均不能很好处理细微像素点不一致时，是否应该判断正确还是错误的问题。

回到问题的根本，误判的根源是，人眼对细微像素识别不出来，但是机器对这些差异非常敏感

自然而然的，我们想到了视觉对比算法。云测将开源的视觉对比算法 vision-ui，集成到了云测

vision-ui可以较好解决SSIM毛刺问题，并且可以“增量” 显示差异区域，但是算法会对每行数据进行压缩，当差异比较小时，会无法正确识别到。比如下图中，未能识别商品评价数量的差异。

3. 利用大模型能力

上面两种方案各有瑕疵。近期以GPT为代表的大模型发展很快，这里我们也正在尝试用大模型的能力，去优化对比效果

目前正在和腾讯的混元大模型团队对接，正在模型精调阶段，后续会上线到云测，敬请期待。

最后，如果有微信小程序自动化测试，性能测试需求的同学，欢迎使用 小程序云测服务 ~，使用中有任何问题，欢迎联系加入我们官方企微群，联系群主反馈