1.背景
背景
收到邀请，去参加北京NCTS云测试行业峰会-技术专场，准备将图片对比在测试自动化领域的实践分享给大家，本文作为分享议题的概述版本，供大家查看。
1.1 软件公司 VS 互联网公司
从软件发布来看软件公司与互联网公司的差异。
1.2 QA 的职责
1.2.1 软件公司
在软件公司，QA 的职责包括：
- 研发环节的最后一环；
- 在研发过程以尽可能多的发现 Bug 作为主要职责，在发布后以 0 Bug 作为主要目标；
- 流程的推动者、权限的制约者。
1.2.2 互联网公司
在互联网公司，QA 的职责包括：
- 全流程的质量体系；
- 工具平台的发起者、创造者；
- 捍卫真实的用户体验。
1.3 实时质量
实时质量的定义是”运行含测试，实时可反馈”
一句话总结来说就是：将质量手段以模块、组件乃至系统化的方式嵌入到业务型应用中。从代码的纬度来看：
- 开发写的代码是为业务特性服务的代码；
- 测试写的代码是为业务质量服务的代码。
1.4 无人值守自动化
无人值守自动化的定位是：基于变更，提供全流程、多样化、智能化的无人值守诊断能力，做到质量的实时反馈。
- 全流程看护
变更前（预发阶段）
变更中（灰度阶段）
变更后（上线阶段
- 覆盖所有变更
代码类变更
配置类变更
DB 变更
- 多维度诊断
自动化诊断
业务监控诊断
业务日志诊断
- 发布门禁
- 发布准入
预发阶段和灰度阶段发布卡口
1.5 高频集成的现状
目前我们 BU 在并行的开发着多个特性，每个特性创建了不同的分支， 很难在一个相同的时间点进行统一的持续集成，多个分支可以自由的集成和发布，处于高频集成的状态。这也为回归测试带来了极大的挑战。
1.6 BU 的分层自动化模型
我们 BU 的分层自动化模型共分 4 层，展示层、接口层、服务层、数据层，每一层在不同的执行阶段与左侧的自动化框架&平台对接。层级越高，稳定性越差，自动化的效果越好。在生产运行阶段进行故障诊断和线上压测；预发布阶段进行运营 CMS 变更和预发布自动化；开发/功能调试阶段进行无线组件和适配测试。
1.7 MyDiff
MyDiff 是一个零成本配置的截图对比自动化平台
包含了以下特性：成本低、预发布拦截、全屏与区域截图、自定义的前置操作、多浏览器、多语言。
2.概述
2.1 业务与能力
从左侧来看，对接了 GAEA、TESLA 等自动化平台和 AONE 研发协同平台，PI 为算法平台，为我们提供了算法能力。
MyDiff 目前服务了 10 个 BU，产品能力包含任务管理、结果管理、执行机管理、数据统计、告警通知、平台对接等。
核心能力为截图能力和对比能力。截图能力包含对环境、登录、区域、前置操作的管理；对比能力分为像素级和非像素级两种，提供了相似度评估和差异标定。目前应用的场景包括页面回归测试、页面巡检、页面异常检测、适配测试，还有更多的场景等待探索。
2.2 自动化流程体系
自动化测试构建在协同平台 aone 的发布流程中，在开发提交代码进行预发布后，会同时进行 STC 安全扫描、CodeReview 和自动化测试等处理。盖亚接收到 aone 的消息通知，通过分层进行自动化框架的任务调度，待自动化执行完毕，将执行结果进行反馈，通知 aone。如果自动化执行失败，可以通过配置决定是否卡发布。
3.实践
3.1 技术架构
用户通过 web 集群来进行操作，如任务管理、任务执行等。MyDiff 为分布式应用，所以需要一个共享存储层，包含 mysql、oss 等存储。整个平台通过 RocketMQ 的消息进行通信，用户在 web 创建任务后，会将其包装成 captureTask，该任务控制执行机集群进行截图操作，待截图完成后，封装成 imgDiffTask，在图片对比集群进行对比操作，完成对比后更新任务状态，用户可查到报告结果。
3.2 图片对比算法优化
MyDiff 在常规方案中加入了形态学的一些算法操作，在获取像素差值图后，对差值图首先进行形态学膨胀处理，将分散的差值像素点膨胀成一个个连通区域。为避免膨胀后差异区域扩大，在形成连通区域后再对其进行形态学腐蚀。这样就能将原本分散的像素点或小区域，融合成一个个连通区域，差异区域的标记也更加友好。原本一串文本不同，通用算法会标记出多个区域，由于字符间欧式距离很小融合后会形成完整的一个连通区域。差异区域融合后，后续模板匹配的性能与精准性也会更好。
3.3 非像素级图片对比
3.3.1 需求
在无线端不同的机型有着不同的分辨率，所以同一个 UI 的两张截图也不尽相同。比如下图，存在着 3 个明显差异，头部导航栏、弹出的 toast、底部栏。卡号、文本框、按钮等虽然尺寸不同，但内容相同，在预期中它们是一致的。
3.3.2 算法
我们初步对 362 组样本进行算法实验，下表是实验结果，实验证明 SSIM+Phash 的算法效果最优，识别率可达 86.74%。
SSIM(结构相似性算法)：
Phash(感知哈希算法)：
3.3.4 差异标定
这是最终差异标定的结果，我们认为不同机型的头部导航栏和底部栏属于系统区域，在图片对比之前将其裁剪掉。下一步再对两张图进行结构提取，提取后左图元素与右图元素进行相互匹配，在另一张图找不到的元素被认为差异，通过红色矩形框出。
3.4 卡发布
卡发布的实践是在持续集成中的集成测试环节进行自动化的执行和验证，可配置的在自动化执行失败时是否允许发布。
3.4.1 新建 UI 测试
这里用阿里巴巴的协同平台 aone 来举例，通过 aone 创建一个 UI 测试任务，在页面中选择使用哪一个服务，其中 IMGDiff 代表 MyDiff，接下来设置图片对比任务 ID，将测试任务与 MyDiff 的任务 ID 相关联。
3.4.2 流程配置
下一步是在流程配置中添加流程，可以自定义一个流程的步骤。
3.4.3 日常发布流程
以一个日常发布的流程举例，日常集成测试在流程之中。对日常环境部署成功后，会执行配置的测试任务，调用 MyDiff 进行一次图片对比任务的执行。
3.4.4 卡发布案例
这里是一个真实的案例，持续集成中，MyDiff 自动化执行失败，测试人员可以通过查看结果来分析失败原因，也可以选择跳过进行继续发布。
3.4.5 MyDiff 案例
3.4.5.1 列表
这是 MyDiff 的执行结果列表，相同数与总数相等，执行通过。
3.4.5.2 详情
这是一次执行失败的详情，使用了区域截图。
3.4.5.3 原图差异
预发环境区域截图：
线上环境区域截图：
3.4.5.4 对比图差异标定
差异对比图：
通过差异对比图来使用户很快定位的差异的区域，一目了然。
4.规划
每一个平台都需要不断升级，技术也在不断发展，MyDiff 计划未来在以下领域进行提升。
5. 最后想说
感谢主办方的辛苦筹备，使大家能开心的在10月26号的技术专场再次见面，畅聊技术；虽然9月经历了一些小小的插曲，但总体而言十分圆满，期待未来再见。
致敬那些对技术充满热情的人。
文章来源：AlibabaTechQA
开发者社区整理
