图片对比一试，玩转自动化测试

微

微信团队2024年06月25日约 4 分钟

在小程序开发过程中，我们常常要进行版本更新来丰富其功能。当我们对小程序进行功能改进或修复时，却意外发现原有功能不能用了？用户页面显示不一致了？！

一般情况下，我们希望这些更改不会对现有功能产生负面影响。那么，有没有一种简单的方式可以直观地进行测试呢？当然有啦！

这个好办法就是——小程序云测中的图片对比功能（详细操作文档）。在自动化测试的过程中，我们将版本更新前后的小程序界面图片进行对比，直观地圈出两次截图的外观不同之处，就能简单判断出是否改动到了原有的功能。

使用例子：（可右滑继续查看）

那具体应该如何操作呢？

第一步获取图片

以下分录制回放和自定义测试两种情况：

录制回放

1、首先打开小程序开发工具，点击 “工具” → “自动化测试”。

2、清理一下缓存。

3、点击开始录制。

4、当处于录制过程中时，选择 “ 截屏 ”，即可截取需要对比的图片。

（可右滑继续查看）

tips

1、只有通过上述截屏操作获取到的图片，才会加入到图片对比中。其他的截图，如操作步骤中截图不参与对比。

2、如果开发者工具没有截屏操作，请升级版本（1.06.2301160以上版本具有该功能）。

3、以前的录制回放用例，如果继续录制并使用了截屏操作，产生了新的截图，则需要在云测平台重新同步用例或者重新上传用例，才能收集到对应的图片。

网页版云测平台为上传案例。

插件版云测平台为同步用例。

自定义测试

除了录制回放，我们还有自定义测试功能，即可以使用 Minium 框架来编写测试用例，在云测服务中执行自动化测试。它的优势在于：

1、开发者可以完全自主定制测试场景，更加灵活。

2、和录制回放相比，既可以支持截取整张图片，也可以截取部分元素。

具体操作步骤：

1、开发者先根据业务需求，编写 Minium 测试脚本。

具体如何编写，可以参见文档

具体来说：在 capture 接口中，会根据参数 region 的值来判断截图类型：

· Page ：传入当前 page 实例，截取 page 当前屏幕图片（不包含手机顶部的 banner ，因为 banner 的时间显示，会干扰截图对比的效果）。

· Element ：传入具体元素实例，截取元素区域的图片。

· 不传入：表示这次截图不需要进行图片对比，默认不传入。

示例代码：

import minium, osclass FirstTest(minium.MiniTest):    def test_capture(self):        path = self.capture("test_capture.png")        self.assertTrue(os.path.exists(path), "截图路径存在")
    def test_capture_region(self):        el = self.page.get_element("button")        path = self.capture("test_capture_el.png", region=el)        path = self.capture("test_capture_page.png", region=self.page)        self.assertTrue(os.path.exists(path), "截图路径存在")