什么是视觉/回归测试？
寻找视觉差异
首先，我有个问题。你玩过不同的拼图游戏吗？这个游戏规则简单，玩起来很容易。你应该比较图片，发现一个或多个视觉差异，并圈出来。视觉回归测试实际上是类似于斑点差异拼图游戏。您应该检查用户界面(UI)和视觉差异在您的网站与比较您的设计文件。
此外，你应该检查网页上的每个元素是否在正确的位置、大小、字体、填充等等。如果你在你的网站中发现任何视觉上错误的元素或页面，你必须报告这个潜在的视觉错误。如果你的网站没有太多的功能或页面，你可以手动这样做。
但是，如果你所在的网站拥有成千上万的功能和页面(比如电子商务网站、视频游戏或视频广播网站) ，你必须更加努力地推动自己，因为你的页面没有视觉缺陷。另一方面，在每次功能更改或者添加新功能之后，你的网站应该显示回归测试。视觉缺陷的挑战在于软件系统的多样性和复杂性。当你的软件系统变得越来越复杂和多变时，你的可视化测试过程就会变得越来越难。
发现差异
视觉/回归测试/工具在做什么？
一个视觉缺陷的例子
想象一个电子商务网站。您编写了一个关于迁出过程的 ui 测试。测试将 t 恤添加到篮子中，然后进入结帐页面。输入财务信息并完成结账。这个测试工作良好，您的结帐功能是在线的客户。但不幸的是，没有人使用移动浏览器结账。因为您的结账按钮被您的应用程序中的文本所覆盖。在用户界面测试阶段，您的 E2E 测试工具没有检测到这一点，因此成为用户体验中的一个重大障碍。这就是可视化回归测试工具的来源。
现在有很多可视化的回归测试工具可以使用。其中一些是商业用途和付费工具。但是相反的是，有些工具是完全开源的，而且很容易使用。大多数的可视化回归测试工具都是基于一个基本的解决方案。形象差异。图像分辨是一种基于计算机视觉的技术，用于确定图像中的视觉变化。一个可视化测试工具基本上比较 UI 截图，并找出其中的像素变化。感知差异，pdiffs，CSS 差异，和 UI 差异是两个截图之间的计算差异。您可以对整个页面或组件进行可视化测试。特别是基于组件的测试可以在你的网站上的每个页面中找到可视化的信息 bug，而这是你的 UI 测试自动化工具所不能做到的。
当你不断地进行大规模的可视化测试时，它们就会变得真正有价值。可视化回归测试工具可以帮助你安装真实的设计快照，并在新设计出现时更新它们。您可以将可视回归测试添加到 CI 服务中，以便在每次提交时进行可视测试。特别是如果你的网站必须在不同的视窗(如手机，平板电脑，桌面等)上伸缩，你可以为每个视窗选项添加快照，并测试它们以确保这里没有视觉缺陷。此外，如果您的可视化回归工具支持跨浏览器测试，那么您可以在您的网站上为使用最多的浏览器的客户进行跨浏览器可视化测试。这是可视化测试工具的一个重要特性，因为你不能保证我的网站没有可视化的 bug，在你只用一个浏览器测试之后。某些可视化 bug 可能发生在特定的浏览器或浏览器上，而您并没有在其上进行测试。你也应该在其他浏览器上进行测试，以便可视化地覆盖你的网站。
可视化回归工具简介
关于Percy的屏幕截图
在下一篇关于可视化测试的文章中，我将尝试讲述 Percy 的可视化测试自动化工具，但首先我想做一个简短的介绍。是一个付费工具，可以在 BrowserStack 中使用。珀西截取了屏幕截图，将其与基准图进行比较，并突出显示了视觉上的变化。在开始使用 Percy 之前，您应该安装 Percy 的 SDK。的 SDK 支持一些 E2E 测试框架:
Java 的 Selenium
Cypress
Puppeteer
Ember
TestCafe etc.
我将在下一篇文章中解释如何使用 Cypress E2E 测试工具安装 Percy 的 SDK，以及如何编写一些可视化测试脚本。此外，我还将讲述如何在真实世界应用程序(RWA)中使用Percy，以及如何在Percy网站上进行可视化测试。
感谢阅读，请随时提问。