当前位置：网站首页>一种新的测试方法：视觉感知测试

一种新的测试方法：视觉感知测试

2022-08-10 15:57:00 【InfoQ】

什么是视觉测试

视觉测试（Visual Testing），主要检查软件用户界面（UI）是否正确显示给所有用户。它检查网页上的每个元素的形状、大小和位置是否符合预期，还检查这些元素是否在不同的设备和浏览器上是否兼容，不同的环境、不同的屏幕大小和其他影响UI显示的因素是否会影响产品的使用。视觉测试是解决 GUI 测试的一种测试手段。

为什么需要视觉测试

比如，我们开发了一个在线商城。第一次测试的时候所有的功能都能正常运行，但是当部署到另一个测试环境时，就有可能出现以下情况，这些都是因为界面布局 bug 导致用户无法正常使用，视觉测试就是用来发现这些界面布局导致的产品缺陷。

购买按钮忽然被一个弹框遮住，用户无法下单；

商品的详细描述文字互相堆叠错乱，导致用户无法正常阅读；

购物车没有正常悬浮在窗口的底部，无法查看加入了哪些商品；

电脑上能正常下单，但是在手机上却只显示了部分页面；

所有的图片无法正常加载等等。

文字堆叠示例：

样式缺失示例：

视觉测试和UI功能测试的区别

视觉测试和传统的ui功能测试不一样。ui测试是一个很广的范围，它既包括端对端的功能测试，又包括页面的布局测试，我们平时谈论的 ui 测试，更偏重于功能性测试，而视觉测试更偏重于页面布局测试。

功能测试确实能发现大部分主要的功能缺陷，甚至可以发现一些页面布局的缺陷，比如某些元素因为布局问题无法交互，某些元素缺失。但是功能测试的问题在于它需要覆盖的路径太多，执行效率太慢，在迭代比较快的研发周期上，有些看似不太重要的特性不会去测试。而有些布局问题非常微小，但足以影响用户体验，功能测试无法做到。

视觉测试专注于页面布局和显示效果，可以精确到像素级的差异对比，当页面发生任何变化时，都能被视觉测试发现，大到足以影响功能使用的空间、小到让用户不舒服的运营文案的对比，都能被及时发现。