共计 1448 个字符，预计需要花费 4 分钟才能阅读完成。
什么是视觉测试
视觉测试（Visual Testing），次要查看软件用户界面（UI）是否正确显示给所有用户。它查看网页上的每个元素的形态、大小和地位是否合乎预期，还查看这些元素是否在不同的设施和浏览器上是否兼容，不同的环境、不同的屏幕大小和其余影响 UI 显示的因素是否会影响产品的应用。视觉测试是解决 GUI 测试的一种测试伎俩。
为什么须要视觉测试
比方，咱们开发了一个在线商城。第一次测试的时候所有的性能都能失常运行，然而当部署到另一个测试环境时，就有可能呈现以下状况，这些都是因为界面布局 bug 导致用户无奈失常应用，视觉测试就是用来发现这些界面布局导致的产品缺点。
- 购买按钮突然被一个弹框遮住，用户无奈下单；
- 商品的详细描述文字相互重叠错乱，导致用户无奈失常浏览；
- 购物车没有失常悬浮在窗口的底部，无奈查看退出了哪些商品；
- 电脑上能失常下单，然而在手机上却只显示了局部页面；
- 所有的图片无奈失常加载等等。
文字重叠示例：
款式缺失示例：
视觉测试和 UI 功能测试的区别
视觉测试和传统的 ui 功能测试不一样。ui 测试是一个很广的范畴，它既包含端对端的功能测试，又包含页面的布局测试，咱们平时议论的 ui 测试，更偏重于功能性测试，而视觉测试更偏重于页面布局测试。
功能测试的确能发现大部分次要的性能缺点，甚至能够发现一些页面布局的缺点，比方某些元素因为布局问题无奈交互，某些元素缺失。然而功能测试的问题在于它须要笼罩的门路太多，执行效率太慢，在迭代比拟快的研发周期上，有些看似不太重要的个性不会去测试。而有些布局问题十分渺小，但足以影响用户体验，功能测试无奈做到。
视觉测试专一于页面布局和显示成果，能够准确到像素级的差别比照，当页面产生任何变动时，都能被视觉测试发现，大到足以影响性能应用的空间、小到让用户不难受的经营文案的比照，都能被及时发现。
视觉测试尽量自动化
视觉测试最好采纳自动化形式实现，它须要对每一个元素都要校验它的大小、形态和地位差别，有的差别十分渺小，肉眼察看很艰难。手工的视觉测试更像是在玩大家来找茬的游戏，只是关卡的难度和关卡的数量都急剧回升，你失去的只有大量的成就感，更多的是丧气和措手不及。
来看一个具体的例子。这是一张 python 官网的截图，这里有一个十分重要的产品缺点，你能当初拜访 python.org 官网，把这个重要的缺点找进去吗？
这是失常的产品截图。通过比照能够发现：黄色的 Donate 按钮没有失常显示，这是 Python 基金会的支出起源，是一个很重要的产品性能，然而它可能被测试人员所疏忽，平时的测试没有对它进行笼罩，从而影响的产品的支出。
视觉测试自动化工具
通常状况下，能够编写代码，对整套对照流程实现自动化，不会编写代码就只能应用在线的图像对照工具或者在测试软件中集成图像对照的服务。这些工具的应用形式都比拟相似，首先关上服务网站：https://www.diffchecker.com/i…，别离上传 baseline 图片和理论图片。
在比照图片中，能间接看到图片中的哪些地位产生了变动，没有变动的元素全副都暗藏。
视觉测试工作流程
- 设置 baseline 对照组，示意产品原本应该的状态。
- 运行用例、通过截图等形式获取以后界面状态。
- 和 baseline 比照、生成报告，报告最好能直观看到页面差别。
- 更新 baseline。
视觉测试对于精准化测试的意义
- 视觉测试的次要目标是发现页面布局的缺点
- 在视觉回归测试中，能立刻发现界面哪些地方进行了批改。
我是九柄，公众号【九柄】，分享软件测试文章、面试、教程材料，欢送来看看。