# 在自动化测试中，使用图片对比能力说明
图片对比能力一般作为自动化测试的补充能力，可用于比较稳定的小程序页面，在版本更新时，通过UI是否一致来校验是否改动到原有的功能。
# 使用前必读
在使用图片对比能力前，首先需要了解以下几点：
- 使用限制：目前只有 录制回放 和 自定义测试 测试类型，才能使用图片对比能力
- 基线图片：基线图片是用于和测试报告图片对比的模板，即报告中图片要和谁去对比
- 对比规则：设置基线图片后，报告中遇到对比图片时，且满足**”5个相同“**（相同小程序AppID，相同机型，相同页面path，相同名称，相同截图类型）条件的图片才会进行对比。
- 判定方式：图片对比算法采用 ssim，只有ssim等于1，才判定对比通过。默认采用整张图片去对比。为了提升图片对比可用性，支持在图片中设定多个对比区域，仅仅对比区域内的截图
- 对测试结果影响：图片对比不通过时，测试结果会标注为 不通过，问题分类是 图片对比错误/异常
下面详细说明使用流程
# 1、获取图片
在每次的录制回放和自定义测试测试中，有非常多种截图。注意只有按照下面指引获取到的图片，才会用于图片对比：
# 录制回放
录制回放是在开发者工具中进行，在操作中，选择 ** 截屏 **，即可截取需要对比的图片。
特别注意：
- 只有通过截屏操作获取到的图片，才会加入到图片对比中。其他的截图，如操作步骤中截图不参与对比。
- 如果开发者工具没有截屏操作，请升级版本
- 以前的录制回放用例，如果使用的截屏操作，需要重新同步下用例或者重新上传用例，才能收集到对应的图片
# 自定义测试（Minium）
自定义测试，可以在Python代码中，使用 **capture接口 ** ，来指定截图。
和录制回放相比，Minium更加灵活，可以支持截取整张图片以及截取部分元素。
具体来说：在capture接口中，会根据参数 region 的值来判断截图类型：
- Page：传入当前page实例，截取page当前屏幕图片（注意，为了提高对比的成功率，截图时会自动去掉手机顶部的banner，因为banner的时间显示，会干扰截图对比的效果）
- Element：传入具体元素实例，截取元素区域的图片
- 不传入：表示这次截图不需要进行图片对比。默认不传入
特别注意：
- 在后续图片对比中，整张图片只能和整张图片对比，部分元素截图和部分元素截图去对比。
- capture接口中，强烈建议指定截图文件名。文件名非常重要，因为在测试报告中对比规则中，在相同page中，相同图片名称的截图才会对比。建议取和截图相关含义且唯一的名称
录制回放/Minium 的用例编写完成后，提交到云测跑测即可。云测会自动根据测试结果，自动记录收集到的图片
# 2、设定基线图片
基线图片是对比源，即解决测试结果的图片和谁对比的问题
通过步骤1, 已经收集到了很多用于图片对比的截图。下面来设置基线图片，首先点击左侧导航栏中的 “项目管理” => “图片对比管理”，进入图片对比管理页面
图片对比管理页面中，展示了所有测试报告中设定的指定对比图片。
上面有很多筛选项，用户可以根据自己需要配置的页面，进行筛选（比如筛选页面路径和机型等），然后设置对比的基线图片
特别注意：对于”5个相同“（相同小程序AppID，相同机型，相同页面path，相同名称，相同截图类型）的图片，只能有1个基线图片，当设定当前图片为基线图片时，会自动取消原来的基线图片标志。 如果已有基线图片时，在设置时也会给出提示。
# 部分区域对比
上面流程中，在设置基线图片时，默认是整张图片一起对比。到具体实践中，很难保证小程序整个页面都没有改动。一旦页面有少许改动，整张图片对比就失败了。
为了提升图片对比的可用性，这时候可以尝试下部分区域对比。
云测支持两种区域对比的方式：
- 仅对比选择的区域：只对比选择的区域，区域外的图片不对比
- 忽略选择的区域 ：和上面类型相反，对选择的区域全部忽略，仅对比区域外的图片
具体操作也很简单。首先在对比类型中，选择“部分区域对比”，然后点击“选择区域”，选择需要指定的区域，最后选择对比类型即可
在弹出的窗口中，主要有2个区域。左侧是图片，右侧是操作说明和对比区域信息。
在左侧的图片中，直接用鼠标拖动就可以画出需要对比的区域。这里我们支持：
- 划定多个区域。增加区域时，继续用鼠标绘制即可
- 移动区域：先将鼠标移动到矩形框内部，然后按住拖动即可
- 删除区域：鼠标移动到矩形框内部，点击下，然后按住delete键即可删除。或者在右边使用删除按钮删除
选择完成后，记得点确定，然后回到修改图片信息窗口中，点立即修改即可。注意，一定要点立即修改按钮，本次修改才会生效。
# 3、提交测试，查看测试报告
设置好基线图片后，在每次跑自动化任务时，碰到有满足 5个相同 的基线时条件，会自动和基线图片进行对比，并在报告中展示。
特别注意： 如果图片对比失败，测试结果也会改为失败，并提示图片对比失败/异常
点击详情，可以看到对比失败的详细结果
# 4. 更新对比结果
有些用户在发现对比不一致是由于基线图片设置不正确导致的，这时候可以先按照步骤2，重新设置基线图片，然后再对应“测试报告总览”中，点击“重新对比图片”，即可立即更新对比结果
# 实践流程
下面我们介绍下具体实践流程，可以分为以下几个步骤：
- 先编写Case，定义哪些场景需要对比图片
- 云测跑测，这时可用稳定版本去测试，获取正常情况下的图片结果
- 在对比图片管理页面，将获取到的图片，按照页面维度，设置下基线图片。这里可根据项目实际情况，选择全部对比或者部分区域对比
- 后续日常测试中，如测试开发版，跑测到对应的Case时，当满足”5个相同“条件时，会自动和基线图片对比，并将对比结果整合到报告中
- 如果发现页面已经更新，可以更换基线图片，并在测试报告，重新对比图片
以示例小程序举例来说整个流程。
首先在录制回放中，我们录制了一个验证首页是否正常的用例。示例用例比较简单，就对首页进行一次截图。如下图所示
用例同步到云测，然后建立测试计划，并且提交测试任务。任务完成后，我们在“对比图片管理”页面，找到了这个图片。这里我只想对首页的其中两个区域做对比，所以选择了部分区域对比的方式。
基线图片设置完成后，在后续开发过程中，假如某个版本中，把首页的视图容器被修改了。我们再次跑测用例时，可以发现通过图片对比，可以识别出这种改动
点击“详情”按钮，可以进一步查看具体不同支持。在对比结果中，中间的对比图，已经用红色框框显示了不同支出。
Tips：如果图片不够清晰，可以点击看放大图
如果你任何建议或需求，欢迎下面需要帮助页面中，扫码加入云测官方企微群，联系云测小助手反馈。