基于图片对比的页面自动化测试实践-阿里云开发者社区

开发者社区> KB小秘书> 正文

基于图片对比的页面自动化测试实践

简介: 本篇文章的封面是1973年的花花公子女郎Lena,直到1988年,她才知道自己已经被从事图像处理行业的工作者所熟知。如今,数字图像处理技术越来越广泛地应用到我们的生活和工作中,比如一些图片的后期制作、军事领域方面以及广告设计方面。而将这一技术引入到软件测试中,也是最近几年才流行起来的。本文讲诉了阿里的测试开发工程师如何将图像对比技术嵌入到整个自动化流程中去,给读者提供了一个过程和结果都可以借鉴和参考的机会。
+关注继续查看

1.背景

背景

收到邀请,去参加北京NCTS云测试行业峰会-技术专场,准备将图片对比在测试自动化领域的实践分享给大家,本文作为分享议题的概述版本,供大家查看。

1.1 软件公司 VS 互联网公司

从软件发布来看软件公司与互联网公司的差异。

1.png

1.2 QA 的职责
1.2.1 软件公司
在软件公司,QA 的职责包括:

  • 研发环节的最后一环;
  • 在研发过程以尽可能多的发现 Bug 作为主要职责,在发布后以 0 Bug 作为主要目标;
  • 流程的推动者、权限的制约者。

1.2.2 互联网公司
在互联网公司,QA 的职责包括:

  • 全流程的质量体系;
  • 工具平台的发起者、创造者;
  • 捍卫真实的用户体验。

1.3 实时质量
实时质量的定义是”运行含测试,实时可反馈”

一句话总结来说就是:将质量手段以模块、组件乃至系统化的方式嵌入到业务型应用中。从代码的纬度来看:

  • 开发写的代码是为业务特性服务的代码;
  • 测试写的代码是为业务质量服务的代码。

1.4 无人值守自动化
无人值守自动化的定位是:基于变更,提供全流程、多样化、智能化的无人值守诊断能力,做到质量的实时反馈。

  • 全流程看护

变更前(预发阶段)

变更中(灰度阶段)

变更后(上线阶段

  • 覆盖所有变更

代码类变更

配置类变更

DB 变更

  • 多维度诊断

自动化诊断

业务监控诊断

业务日志诊断

  • 发布门禁
  • 发布准入

预发阶段和灰度阶段发布卡口

1.5 高频集成的现状
目前我们 BU 在并行的开发着多个特性,每个特性创建了不同的分支, 很难在一个相同的时间点进行统一的持续集成,多个分支可以自由的集成和发布,处于高频集成的状态。这也为回归测试带来了极大的挑战。

image.png

1.6 BU 的分层自动化模型
我们 BU 的分层自动化模型共分 4 层,展示层、接口层、服务层、数据层,每一层在不同的执行阶段与左侧的自动化框架&平台对接。层级越高,稳定性越差,自动化的效果越好。在生产运行阶段进行故障诊断和线上压测;预发布阶段进行运营 CMS 变更和预发布自动化;开发/功能调试阶段进行无线组件和适配测试。

image.png

1.7 MyDiff
MyDiff 是一个零成本配置的截图对比自动化平台

包含了以下特性:成本低、预发布拦截、全屏与区域截图、自定义的前置操作、多浏览器、多语言。

2.概述

2.1 业务与能力
从左侧来看,对接了 GAEA、TESLA 等自动化平台和 AONE 研发协同平台,PI 为算法平台,为我们提供了算法能力。

MyDiff 目前服务了 10 个 BU,产品能力包含任务管理、结果管理、执行机管理、数据统计、告警通知、平台对接等。

核心能力为截图能力和对比能力。截图能力包含对环境、登录、区域、前置操作的管理;对比能力分为像素级和非像素级两种,提供了相似度评估和差异标定。目前应用的场景包括页面回归测试、页面巡检、页面异常检测、适配测试,还有更多的场景等待探索。

image.png

2.2 自动化流程体系
自动化测试构建在协同平台 aone 的发布流程中,在开发提交代码进行预发布后,会同时进行 STC 安全扫描、CodeReview 和自动化测试等处理。盖亚接收到 aone 的消息通知,通过分层进行自动化框架的任务调度,待自动化执行完毕,将执行结果进行反馈,通知 aone。如果自动化执行失败,可以通过配置决定是否卡发布。

image.png

3.实践

3.1 技术架构
用户通过 web 集群来进行操作,如任务管理、任务执行等。MyDiff 为分布式应用,所以需要一个共享存储层,包含 mysql、oss 等存储。整个平台通过 RocketMQ 的消息进行通信,用户在 web 创建任务后,会将其包装成 captureTask,该任务控制执行机集群进行截图操作,待截图完成后,封装成 imgDiffTask,在图片对比集群进行对比操作,完成对比后更新任务状态,用户可查到报告结果。

image.png

3.2 图片对比算法优化
MyDiff 在常规方案中加入了形态学的一些算法操作,在获取像素差值图后,对差值图首先进行形态学膨胀处理,将分散的差值像素点膨胀成一个个连通区域。为避免膨胀后差异区域扩大,在形成连通区域后再对其进行形态学腐蚀。这样就能将原本分散的像素点或小区域,融合成一个个连通区域,差异区域的标记也更加友好。原本一串文本不同,通用算法会标记出多个区域,由于字符间欧式距离很小融合后会形成完整的一个连通区域。差异区域融合后,后续模板匹配的性能与精准性也会更好。

image.png

3.3 非像素级图片对比
3.3.1 需求
在无线端不同的机型有着不同的分辨率,所以同一个 UI 的两张截图也不尽相同。比如下图,存在着 3 个明显差异,头部导航栏、弹出的 toast、底部栏。卡号、文本框、按钮等虽然尺寸不同,但内容相同,在预期中它们是一致的。

image.png

3.3.2 算法
我们初步对 362 组样本进行算法实验,下表是实验结果,实验证明 SSIM+Phash 的算法效果最优,识别率可达 86.74%。

image.png

SSIM(结构相似性算法):

image.png

Phash(感知哈希算法):

image.png

3.3.4 差异标定
这是最终差异标定的结果,我们认为不同机型的头部导航栏和底部栏属于系统区域,在图片对比之前将其裁剪掉。下一步再对两张图进行结构提取,提取后左图元素与右图元素进行相互匹配,在另一张图找不到的元素被认为差异,通过红色矩形框出。

image.png

3.4 卡发布
卡发布的实践是在持续集成中的集成测试环节进行自动化的执行和验证,可配置的在自动化执行失败时是否允许发布。

3.4.1 新建 UI 测试
这里用阿里巴巴的协同平台 aone 来举例,通过 aone 创建一个 UI 测试任务,在页面中选择使用哪一个服务,其中 IMGDiff 代表 MyDiff,接下来设置图片对比任务 ID,将测试任务与 MyDiff 的任务 ID 相关联。

image.png

3.4.2 流程配置
下一步是在流程配置中添加流程,可以自定义一个流程的步骤。

image.png

3.4.3 日常发布流程
以一个日常发布的流程举例,日常集成测试在流程之中。对日常环境部署成功后,会执行配置的测试任务,调用 MyDiff 进行一次图片对比任务的执行。

image.png

3.4.4 卡发布案例
这里是一个真实的案例,持续集成中,MyDiff 自动化执行失败,测试人员可以通过查看结果来分析失败原因,也可以选择跳过进行继续发布。

image.png

3.4.5 MyDiff 案例
3.4.5.1 列表
这是 MyDiff 的执行结果列表,相同数与总数相等,执行通过。

image.png

3.4.5.2 详情
这是一次执行失败的详情,使用了区域截图。

image.png

3.4.5.3 原图差异
预发环境区域截图:

image.png

线上环境区域截图:

image.png

3.4.5.4 对比图差异标定
差异对比图:

image.png

通过差异对比图来使用户很快定位的差异的区域,一目了然。

4.规划

每一个平台都需要不断升级,技术也在不断发展,MyDiff 计划未来在以下领域进行提升。

image.png

5. 最后想说

感谢主办方的辛苦筹备,使大家能开心的在10月26号的技术专场再次见面,畅聊技术;虽然9月经历了一些小小的插曲,但总体而言十分圆满,期待未来再见。

致敬那些对技术充满热情的人。

文章来源:AlibabaTechQA
开发者社区整理

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
MySQL 直接存储图片并在 html 页面中展示,点击下载
数据库实体类: package com.easy.kotlin.picturecrawler.entity import java.util.* import javax.
877 0
一种高效自动化ECS实例数据盘挂载和格式化方式
默认情况下创建的 ECS 实例只有一个40G 的高效云盘系统盘,通过任何形式(控制台、ECS SDK 等) 方式创建的实例,如果需要使用数据盘,必须先进行额外的格式化数据盘工作。 如果需要批量创建大量的有特定格式化需求数据盘的 ECS 实例,那么单独为每一台实例格式化数据盘肯定是一件浪费运维资源的工作。
1699 0
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(三、组件编写及通信)
前言 本文是本系列的第三篇文章。在前两篇文章中我们介绍了关于搭建vue+elementUI开发环境的方法和编写导航页的方法。
2427 0
【前台页面 BUG】回车按钮后,页面自动跳转
点击回车按钮后,页面自动的迅速跳转   原因: 表单隐式提交了。 解决方法: 在方法执行完成后,加上return false; 代码如下: 1 /** 2 * 注册按钮的点击事件 3 */ 4 $("#register").
552 0
开源最佳实践:Android平台页面路由框架ARouter
为了更好地让开发者们更加深入了解阿里开源,阿里云云栖社区在3月1号了举办“阿里开源项目最佳实践”在线技术峰会,直播讲述了当前阿里新兴和经典开源项目实战经验以及背后的开发思路,在本次在线技术峰会上,阿里云资深开发工程师刘志龙分享了Android平台页面路由框架ARouter的技术方案、解决的问题以及在实际场景中的最佳实践。
43323 0
关于iframe页面里的重定向问题
    最近公司做的一个功能,使用了iframe,父页面内嵌子页面,里面的坑还挺多的,上次其实就遇到过,只不过今天在此描述一下。     请允许我画个草图:          外层大圈是父级页面,里层是子级页面,我们是在父级引用子级页面的,由于是两个页面,URL肯定不一样的,“一般的,在子页面做的操作也仅仅对子页面生效”,现在我要说的就是关于这一点的!     公司这个功能,在子级页面完成某个操作以后,需要跳转页面,于是子级页面的代码是这样写的:提交=>提交成功=>跳转B页面。
2392 0
从零开始搭建自己的VueJS2.0+ElementUI单页面网站(二、编写导航页)
前言 在从零开始搭建自己的VueJS2.0+ElementUI单页面网站(一、环境搭建)一文中我们已经配置好了开发所需要的各种环境,在这一篇博文中我们正式进入开发。
2567 0
+关注
1090
文章
1253
问答
来源圈子
更多
文章排行榜
最热
最新
相关电子书
更多
文娱运维技术
立即下载
《SaaS模式云原生数据仓库应用场景实践》
立即下载
《看见新力量:二》电子书
立即下载