视觉回归测试—UI自动化的最后1分钟

news2024/11/26 12:41:25

视觉回归测试是一种验证应用GUI是否正确地展示给用户的操作。测试目标是找出应用在可视化上存在的软件缺陷,例如,字体、布局和渲染问题。这使得所发现的软件缺陷可在被最终用户看到前得到修正。此外,视觉测试可用于验证页面的内容,非常适用于一些提供图形功能(例如图表、仪表盘等)的软件。执行视觉测试时需要考虑很多元素,包括元素的大小、宽度、长度、位置、可执行性、可见性、可读性、对齐方式以及跨所有屏幕分辨率的一致性。视觉回归测试有助于确保应用程序的 UI 在不同的设备、浏览器和操作系统中保持一致和视觉吸引力。

视觉回归测试的重要性

如果没有视觉回归测试,产品更新可能会面临视觉错误遗漏进入受众端的风险。GUI用户操作界面,是用户和产品接触的首战场。如果GUI问题太多,用户很难继续浏览产品,影响用户体验。如今的时代,任意一款产品都被要求满足基本的美感和可用性,如果达不到,用户会用脚投票。糟糕的GUI也在一定意义上代表着专业性的缺乏,糟糕的布局、错误的按钮只会影响品牌形象。

视觉回归测试的类型

手动视觉回归测试

手动视觉回归是传统视觉回归测试方式,不借助任何工具,仅凭测试人员的视觉敏锐度来发现问题。然而人不是机器,机器都会犯错,人更是会犯错。让人来验证屏幕尺寸、分辨率大小,这就是强人所难。在执行临时测试或探索性测试时,手动测试更快更容易。对于大规模测试,我们需要自动化。

自动化视觉回归测试

通过使用自动化框架自动执行跨所有浏览器、设备查找和比较视觉元素以发现视觉回归的过程。常见的可视化测试自动化框架包括 Selenium WebDriver、Cypress或Appium。由于自动化UI测试脚本依赖于使用选择器,因此它们必须随着代码的发展不断修改。

逐像素比较

自动化UI测试的经典方法是快照测试(或逐像素比较),它涉及在像素级别将实时快照与基线快照进行比较,并标记所有要修改的变动。这种方法听起来不错,但它没有考虑到几个方面:

网站上有动态元素,例如购物车图标。它会根据访问者采取的操作而变化。自动化脚本将此注册为视觉错误,因为像素不同;

不同的硬件渲染图像不同,这会导致颜色和抗锯齿的差异,从而导致漏报;

填充/边距也因浏览器和设备而异。

人工智能视觉测试

AI-Testing可以区分关键和可接受的视觉变化。例如,测试人员可以将脚本配置为忽略UI上的动态元素和区域。他们还可以设置快照之间差异的接受程度,这样微不足道的变化就不会被标记为错误。

一个相对较新和高级的视觉测试功能是布局比较,它定义和匹配检查点和基线快照之间的各个区域,并突出显示任何可见的布局更改。另一个功能是基于文本/内容的比较,它利用机器学习来提取和比较屏幕上的文本,而不考虑字体大小、系列和颜色,并从原始版本中识别出真正修改过的文本。

机器学习最好的部分是它可以从内容和布局的角度逐渐了解您构建应用程序的方式。随着您的代码的发展,机器会变得更好,生成与您的业务需求相关的不断改进的测试结果。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/460766.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

车道线检测

前言 目前,车道线检测技术已经相当成熟,主要应用在自动驾驶、智能交通等领域。下面列举一些当下最流行的车道线检测方法: 基于图像处理的车道线检测方法。该方法是通过图像处理技术从摄像头传回的图像中提取车道线信息的一种方法&#xff0c…

【AI工具 收藏】

文章目录 miniGPT4:chatGPT,支持图片哔哔终结者 BibiGPT:自动总结视频内容Scribble Diffusion:草图绘画ChatGPT Shortcut:prompt提示词其他 博客总结的工具: miniGPT4:chatGPT,支持图…

ROS2下机械手的手眼标定

最近发现老是有人通过爬虫把文章爬去他们网站,因此先发一遍这个草稿,让他们先爬。爬完我再慢慢修改 0.前期准备 0.1机械手要先映射(标定好)世界坐标系与用户坐标系 这个基本应该可以通过机械手自带的坐标系建立完成 一般机械手…

若依代码生成器的使用方式

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、代码生成器是什么?二、使用步骤1.菜单目录2.子菜单3.代码生成的方式 总结 前言 提示:这里可以添加本文要记录的大概内容&#xff1…

符合业务目标的数据战略建设

我们都知道,战略是通往目的的手段,是企业取得最佳商业成果的方法。处于当今的数字化社会,企业需要满足实现数字化转型及数字社会的需求,提升企业数据资产价值,推动行业甚至社会面的数据流通及数据价值变现。因此企业更…

【数据结构与算法】二、线性表的顺序表示【硬核】

文章目录 二、线性表2.1 线性表的定义和特点2.2 线性表的顺序表示和实现2.3 类C语言有关操作补充2.4 线性表基本操作的实现2.4.1 线性表的基本操作:2.4.2 线性表L的初始化2.4.3 销毁和清空线性表L2.4.4 求线性表L的长度以及判断线性表L是否为空2.4.5 顺序表的取值&a…

Docker --- Docker-Compose、镜像仓库

一、Docker-Compose Docker Compose可以基于Compose文件帮我们快速的部署分布式应用,而无需手动一个个创建和运行容器! 1.1、初识DockerCompose Compose文件是一个文本文件,通过指令定义集群中的每个容器如何运行。格式如下: v…

手术机器人企业密集IPO 国产替代寻求突破

原创 | 文 BFT机器人 2023年或为手术机器人国产化元年,谁将成为中国的“达芬奇”?各路资本对中国手术机器人产业热情高涨。 今年以来,多家手术机器人企业启动首次公开发行(IPO)进程,精锋医疗冲刺港股&#…

09-Node.js—express框架

目录 1、express 介绍2、express 使用2.1 express 下载2.2 express 初体验 3、express 路由3.1 什么是路由3.2 路由的使用3.2.1使用Ajax发送一次post请求 3.3 获取请求参数3.4 获取路由参数3.5 路由参数练习 4、express 响应设置5、express 中间件5.1 什么是中间件5.2 中间件的…

echarts 环形图_圆环动画

Echarts 常用各类图表模板配置 注意: 这里主要就是基于各类图表,更多的使用 Echarts 的各类配置项; 以下代码都可以复制到 Echarts 官网,直接预览; 图标模板目录 Echarts 常用各类图表模板配置一、环形动画二、环形图…

(原创)Flutter基础入门:手把手教你搭建Flutter混合项目:AAR方式集成

前言 上一篇博客讲了如何用“模块代码依赖模式”这种方式去搭建Flutter混合项目 因为篇幅原因,AAR集成方式来搭建项目的步骤和注意点放到这篇博客来讲 如果你没看过上篇博客,建议先阅读上一篇: (原创)Flutter基础入门…

快来看看这些前端开发技巧你掌握多少吧

文章目录 一、代码整洁推荐1.1 三元(三目)运算符1.2 短路判断简写1.3 变量声明简写1.4 if真值判断简写1.5 For循环简写1.6 对象属性简写1.7 箭头函数简写1.8 隐式返回简写1.9 模板字符串1.10 默认参数值1.11 解构赋值简写1.12 多条件判断简写1.13 多变量赋值简写1.14 解构时重命…

easyExcel动态导出,合并指定单元格

如上图所示,需要使用easyExcel动态导出上述表格并指定合并其中的单元格,日期是动态的,每个月不相同,直接上实现代码,以demo形式展现,更好理解 /** * 考勤记录动态导出测试 */ GetMapping(&q…

【Kotlin学习】R2DBC与MyBatis性能对比

提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、测试框架选取Spring Webflux VS Spring MVCSpring Data R2DBC VS MyBatis 二、测试代码编写1. 项目1核心代码1.1 引入依赖1.2 接口代码 2. 项目2核心代码2.…

Layui图片上传

前端代码&#xff1a; <div class"layui-upload"> <button type"button" class"layui-btn" id"test1">上传图片</button> <div class"layui-upload-list"> <img class"lay…

如何一次性生成大量结构相同、内容不同的二维码

使用 批量模板数据 的方式&#xff0c;可 一次性生成大量结构相同&#xff0c;内容不同的活码 &#xff0c;大幅提升制码效率。 模板的样式&#xff0c;关联的表单状态等所有内容均可进行修改&#xff0c;修改后所有子码都将批量更新&#xff0c;且模板可重复使用&#xff0c;让…

页面加载进度条(VUE3)

通常我们希望在页面跳转加载中&#xff0c;页面顶部出现进度条。 &#xff08;1&#xff09; 下载依赖 npm install nprogress --save &#xff08;2&#xff09;在router中得index.js中引入 import NProgress from nprogress import nprogress/nprogress.css &#xff08;…

C++——类和对象(2)

作者&#xff1a;几冬雪来 时间&#xff1a;2023年4月25日 内容&#xff1a;C类和对象讲解 目录 前言&#xff1a; 1.this指针&#xff1a; 2.默认成员函数&#xff1a; 3.构造函数&#xff1a; 4.析构函数&#xff1a; 5.构造函数的问题&#xff1a; 结尾&#xff…

Transformer 代码详细解析

Transformer 代码详细解析 文章目录 Transformer 代码详细解析一、Transformer 背景介绍1.1 Transformer 的诞生1.2 Transformer 的优势1.3 Transformer 的市场 二、Transformer架构解析2.1 认识 Transformer 架构2.1.1 Transformer模型的作用2.1.2 Transformer 总体架构图 2.2…

全国计算机等级三级网络技术试卷详解(一)

请点击↑关注、收藏&#xff0c;本博客免费为你获取精彩知识分享&#xff01;有惊喜哟&#xff01;&#xff01; 1.下列关于RPR技术的描述中&#xff0c;错误的是&#xff08;&#xff09;。 A) RPR与FDDI一样使用双环结构 B) 在RPR环中&#xff0c;源节点向目的节点成功发出…