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

简介: 本篇文章的封面是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
开发者社区整理

目录
打赏
0
2
0
1
4751
分享
相关文章
浅谈网页端IM技术及相关测试方法实践(包括WebSocket性能测试)
最开始转转的客服系统体系如IM、工单以及机器人等都是使用第三方的产品。但第三方产品对于转转的业务,以及客服的效率等都产生了诸多限制,所以我们决定自研替换第三方系统。下面主要分享一下网页端IM技术及相关测试方法,我们先从了解IM系统和WebSocket开始。
71 4
自动化测试框架的演进与实践###
本文深入探讨了自动化测试框架从诞生至今的发展历程,重点分析了当前主流框架的优势与局限性,并结合实际案例,阐述了如何根据项目需求选择合适的自动化测试策略。文章还展望了未来自动化测试领域的技术趋势,为读者提供了宝贵的实践经验和前瞻性思考。 ###
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
42 5
以项目登录接口为例-大前端之开发postman请求接口带token的请求测试-前端开发必学之一-如果要学会联调接口而不是纯写静态前端页面-这个是必学-本文以优雅草蜻蜓Q系统API为实践来演示我们如何带token请求接口-优雅草卓伊凡
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
38 1
【02】写一个注册页面以及配置打包选项打包安卓apk测试—开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
小团队 CI/CD 实践:无需运维,Java Web应用的自动化部署
本文介绍如何使用GitHub Actions和阿里云Kubernetes(ACK)实现Java Web应用的自动化部署。通过CI/CD流程,开发人员无需手动处理复杂的运维任务,从而提高效率并减少错误。文中详细讲解了Docker与Kubernetes的概念,并演示了从创建Kubernetes集群、配置容器镜像服务到设置GitHub仓库Secrets及编写GitHub Actions工作流的具体步骤。最终实现了代码提交后自动构建、推送镜像并部署到Kubernetes集群的功能。整个过程不仅简化了部署流程,还确保了应用在不同环境中的稳定运行。
82 9
自动化运维在现代数据中心的应用与实践####
本文探讨了自动化运维技术在现代数据中心中的应用现状与实践案例,分析了其如何提升运维效率、降低成本并增强系统稳定性。通过具体实例,展示了自动化工具如Ansible、Puppet及Docker在环境配置、软件部署、故障恢复等方面的实际应用效果,为读者提供了一套可参考的实施框架。 ####
探索软件测试的深度与广度:从理论到实践
在数字化时代,软件已成为我们生活中不可或缺的一部分。随着技术的不断进步和用户需求的多样化,确保软件质量变得尤为重要。本文将深入浅出地介绍软件测试的核心概念、类型及其在软件开发生命周期中的重要性。我们将通过实际案例,展示如何实施有效的测试策略,并探讨自动化测试的未来趋势,旨在为读者提供一套完整的软件测试知识体系,帮助提升软件质量和开发效率。
自动化运维实践:打造高效的DevOps流水线
在软件开发的快节奏中,自动化运维成为提升效率、确保质量的关键。本文将引导你理解自动化运维的价值,通过实际案例分享如何构建一个高效、可靠的DevOps流水线。我们将从持续集成(CI)开始,逐步深入到持续部署(CD),并展示代码示例来具体说明。准备好让你的运维工作飞跃式进步了吗?让我们开始吧!
探索软件测试的奥秘:从理论到实践
在软件开发的宇宙中,软件测试犹如一颗璀璨的星辰,指引着质量的方向。本文将带你穿梭于软件测试的理论与实践之间,揭示其内在的逻辑和魅力。从测试的重要性出发,我们将探讨不同类型的测试方法,并通过实际案例分析,深入理解测试用例的设计和应用。最后,我们将通过一个代码示例,展示如何将理论知识转化为实际操作,确保软件质量的同时,也提升你的测试技能。让我们一起踏上这段探索之旅,发现软件测试的无限可能。
自动化测试框架的搭建与实践
在软件开发领域,自动化测试是提升开发效率、确保软件质量的关键手段。本文将引导读者理解自动化测试的重要性,并介绍如何搭建一个基本的自动化测试框架。通过具体示例和步骤,我们将探索如何有效实施自动化测试策略,以实现软件开发流程的优化。
116 7

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等