关注留言点赞，带你了解最流行的软件开发知识与最新科技行业趋势。

视觉回归测试验证应用程序或网站的外观和行为是否符合预期。本指南将带您了解有关视觉回归测试的所有内容。

视觉回归测试验证应用程序或网站的外观和行为是否符合预期，并且没有对视觉外观或功能进行意外更改。此过程涉及将基线应用程序或网站版本与当前版本进行比较，并检查视觉差异。

在视觉回归测试期间，应用程序或网站的图像被捕获并使用突出差异的专用工具进行比较。两个版本之间可能存在差异，这表明应用程序的外观或布局已更改或需要修复错误或问题。

它通常与其他形式的测试结合使用，例如功能测试或可用性测试，以确保应用程序和网站正常工作并符合质量标准。当应用程序或网站的外观对其用户体验至关重要，或者经常进行需要密切监控的更改时，它会很方便。

什么是视觉回归测试？

在直接进入视觉回归测试之前，让我们先看看回归测试到底是什么。回归测试可确保您对软件进行的任何更改都不会导致任何正常工作的元素出现故障。此外，严格来说视觉效果，此测试可确保软件中的任何更改都不会导致样式问题。

视觉回归测试，也称为视觉测试，验证应用程序用户界面视觉方面的适当性。因此，我们也可以将其称为视觉验证或视觉测试。此质量保证操作旨在验证应用程序的前端显示正确的内容和数据。

通常，视觉回归测试工具会截取最新用户界面的屏幕截图，并与原始屏幕截图进行比较。尽管进行了多次修改，网页仍应呈现准确的预期。它还应该在各种浏览器中具有相同的外观和工作方式。

为什么要执行视觉回归测试？

当今的应用程序根据客户需求而发展。这种情况发生在各种浏览器及其版本中，因此保持功能和布局的可管理性至关重要。

此外，现在大多数公司都实施了持续集成流程，可视化测试发挥了至关重要的作用。

用户界面必须在各种设备、屏幕分辨率、Web 浏览器和操作系统上看起来都不错。只需要一个微小的 UI 缺陷就会造成过多的收入损失！例如，如果客户使用充满故障的银行应用程序，出于安全原因，他们极不可能再次使用。即使它不像银行业那样敏感，不方便和烦人也足以让用户远离应用程序。

当 QA 团队在早期的 SDLC 阶段与开发人员测试一起运行视觉回归测试时，发现视觉差异将变得更加容易。这种方法还将为企业节省大量资源和时间，他们可以将这些资源和时间投入到其他扩展方法中。总而言之，您的应用程序功能多么完美并不重要。只要它不能为用户提供非凡的界面和体验，它对企业来说就毫无用处。无论我们谈论 UX 还是 UI，视觉测试都是质量保证中不可否认的一部分。

视觉回归测试至关重要的另一个原因是高价值设计通过强化品牌形象为企业提供更多的可信度和信任。可视化测试可以做得很好的一些领域包括 Web 和移动应用程序以及客户系统，例如银行、旅游、航空公司和营销网站。

此外，公司需要找到一种方法来承担让昂贵的视觉错误逃逸到生产中的费用。当我们谈论传统的功能测试时，它只是验证数据输入和输出。尽管它处理许多错误，但发现视觉错误只是其最重要领域的一部分。这些错误甚至可以在没有视觉测试的情况下通过最充分测试的应用程序。

上面的例子展示了西南航空公司的应用程序是如何用一个非常明显的视觉错误让客户失望的。尽管所有页面元素似乎都已成功加载，但按钮是重叠的。考虑到用户甚至无法继续结帐，这是一个错误！我们只能想象这个特定界面会获得多少跳出率。这正是功能测试可以放过但视觉测试不能放过的错误类型。

由于可视化测试可以看到页面元素，因此它们并不完全依赖于带有选择器的编码断言来验证所有元素。视觉回归测试简化了断言的创建和维护，并使任务耗时更少。

视觉回归测试的好处

运行视觉回归测试有几个好处，例如改善用户体验、降低成本、提高产品质量等。

• 单个测试检查屏幕上是否存在标签、字体类型、对齐方式、布局、颜色和链接。
• 允许测试分析师将更多时间投入到解释和实际问题上。
• 显示材质和小型 UI 变体。
• 跨多个浏览器的视觉元素比较。
• 它诱使用户注意特定的页面元素。
• 能够增加功能性自动检查的价值。

视觉回归测试的不同方法

视觉回归测试在实施更改之前截取用户界面的屏幕截图，并将它们与另一个屏幕截图进行比较。然后测试工程师检查差异并进一步处理。

让我们看看视觉回归测试的类型和过程。

视觉测试负责屏幕截图的制作、分析和比较，以检查像素的变化。有一个测试运行器和一个框架。第一个支持编写和运行测试，框架在用户浏览时复制用户活动。它还涉及模仿用户操作并拍摄长快照以根据基准衡量修改。一旦设置了基准，QA 就会执行测试代码。

根据您使用的视觉回归测试工具，它会在执行完成后创建一个自动报告。如果出现问题，开发人员可以运行修复并重新运行测试以确定修复是否成功。根据要求，开发人员可能还必须更新一些基线图像以检查未来的视觉测试。

手动视觉测试

顾名思义，开发人员在不使用自动化测试工具的情况下手动执行视觉回归测试。这涉及在每次发布期间扫描页面并检查视觉缺陷。

这种方法在早期开发阶段特别有用，因为它可以进行探索性或临时测试。缺点是采用完全手动的方法来测试整个应用程序极其繁琐且缓慢。人为错误因素是另一个主要缺点。

布局比较

这种方法比较用户界面元素而不是像素的大小和位置。因此，如果元素位置的大小发生变化，测试将失败。

逐像素比较

此方法比较两个屏幕截图并在像素级别进行分析。因此，它会在出现差异时提醒测试工程师。逐像素比较或像素不匹配通常会标记所有可能的问题。

但不利的一面是，它们可能还会涵盖一些肉眼几乎可以忽略不计且与可用性无关的不相关案例。一些问题包括抗锯齿、渲染和边距差异。但是，测试工程师可以手动筛选此类误报。

结构比较

这种方法比较 DOM 结构以确定 HTML 标记更改。如果它们存在，测试将导致失败。

视觉人工智能比较

这种视觉测试类型使用 ML 和 AI 拍摄两张图像。您可以在动态 Web 应用程序上使用它而不需要基线图像。简而言之，计算机视觉看到的用户界面与人类完全一样。此方法可有效防止耗时的误报。其他功能包括测试动态内容和仅在发生意外更改的区域标记问题。

基于 DOM 的比较

布局比较构成了这种方法。第一步是在结构上比较 UI 元素并检查它们的大小和位置。换句话说，文档对象模型构成了状态变化前后 DOM 分析比较的基础，随后是差异标记。因此，这会引起 DOM 代码更改的注意。但不利的一面是，测试结果可能会变得不稳定。因此，测试人员必须仔细、缓慢地审查它们，以防止视觉错误逃逸。

创建专用视觉回归测试

如果您想完全控制视觉验证，创建专门的视觉回归测试是可行的方法。它将帮助您保持适度的测试编写工作，即使从头开始编写测试需要一些时间。

插入视觉检查点

当您使用现有的功能测试插入可视检查点时，您已经拥有验证应用程序功能所需的测试。您所做的只是在这些功能测试之间添加视觉检查以验证页面。这是利用现有代码进行功能测试的好方法。然而，不利的一面是，它限制了测试覆盖率工具。

插入隐式视觉验证

您现有的测试框架是这种方法的一大优势。这种方法涉及将仅使用几行新代码的隐式视觉验证插入当前测试框架。它非常适合执行基因验证，但您将无法验证特定的框架组件。

实施视觉回归测试

有几种方法可以实现视觉回归测试。以下是实施可视化测试可以采取的步骤的概述。

创建适当的测试场景

首先定义您应该在快照中记录的内容以及在测试期间拍摄它们的时间。由于当产品上市时软件总是要处理用户交互，所以不要忘记将这些交互合并到此类场景中。

比较聪明

使用自动视觉测试方法将没有的屏幕截图与最近的屏幕截图进行比较。好消息是您已经有了一份详细的报告，列出了不同屏幕截图集之间的所有差异。

详细审查

审阅者或审阅者团队检查如何在不中断预期结果的情况下执行调整，并相应地报告。

更正

如果测试人员发现错误，第一直觉应该是纠正错误或通知负责的开发人员做必要的事情。重要的是要记住更新最近的屏幕截图作为即将进行的视觉测试的新基线。

手动与自动视觉回归测试

虽然手动视觉回归测试可能非常耗时且容易出错，但有时，最好的自动化测试无法捕获每个场景的正确性。因此，这种测试的主观性使得选择变得困难。如果您选择手动测试，测试人员会手动检查布局中各种视觉元素的外观。

它还涉及投入精力将这些与基线图像进行手动比较以识别差距。您还可以使用组件资源管理器来定义测试状态并选择要在屏幕上检查的组件和状态。

然而，以这种方式找出视觉错误可能需要很长时间。而且，通过手动测试，许多测试环境都存在这个问题。由于多次执行、环境和视觉兼容性问题，如果您的网站或应用程序在响应式设计上蓬勃发展，则手动测试会变得更加困难。

手动测试也不考虑第三方升级，例如浏览器突然升级或将错误引入应用程序或网站。不断警惕突然和突然的变化，测试必须是一个持续的活动。这种方法的手动管理本身几乎是不可能的。

这就是自动化视觉测试出现的时候。自动化视觉测试提供了更快的运行测试速度、更高的准确性（通过消除人为错误）以及长期的成本效益。尽管前期费用可能略高，但随着时间的推移，测试维护会变得更加容易。在未来的几年里，这是一项值得的投资。最好的方法是选择一个平台，帮助您使用像 Selenium 这样的框架开始在云上进行智能视觉测试。

选择视觉回归测试工具

我们的可视化测试工具有多种选择。但是，每个组织都有不同的要求，适当的选择取决于他们的需要。尽管存在一系列问题，但您应该在入围一些新工具之前先问问自己。

手动与自动

根据视觉回归测试的频率，您可以选择手动、自动或两者之间的平衡。例如，手动测试通常足以进行定期抽查，而如果您不愿意让单个视觉错误逃逸，则自动视觉测试是合适的。如果您选择自动化，请使用学习曲线更简单的工具。

浏览器和设备支持

始终考虑您将要选择的可视化测试工具是否支持跨设备和跨浏览器的可视化验证。如果没有此参数，您的代码可能不会在各种浏览器和设备上产生功能差异。但是，就视觉而言，它仍然会产生负面影响。

静态或动态用户界面

如果您的用户界面有更多的静态页面或元素，更简单的工具可以帮助您解决视觉错误。但是，如果您有更频繁更改的动态内容。在这种情况下，选择具有智能和高级功能的工具更好。

辅助功能

一些可视化测试工具需要编码，而另一些则只是简单地记录和回放或拖放。有些是两者的结合。您选择的可视化测试工具应该能够满足您组织的可访问性要求。

屏幕截图测试和快照稳定

在寻找强大的视觉测试工具时，屏幕截图测试是必须进行比较的。它还应该能够消除误报。它应该能够识别抗锯齿、像素偏移等。

支持其他框架和无缝集成

每个组织都使用项目管理和第三方工具，例如 Slack、GitHub、JIRA 等。将可视化测试工具添加到您的组织框架不应中断不同框架的工作。因此，请确保您即将入围的视觉回归测试工具符合此要求。

预算

现在我们已经确定了视觉测试的重要性，明智的做法是将预算的特定部分分配给它。与其只看数字，不如检查你的工具为所花的钱提供了多少价值。

视觉回归测试工具

有许多可视化测试工具可用。但是，这里有五个最佳选择，可以帮助您避免做出明智决定的永无止境的困境。

Selenium

用于视觉回归测试的 Selenium 赢得了作为跨所有浏览器、浏览器版本和操作系统进行测试的伞式项目的声誉。大多数测试人员将其用作 Firefox 扩展来帮助记录、编辑和调试。此外，这款开源工具还支持不同的编程语言，如 Java、C#、Python 等。

Chromatic

Chromatic 允许用户跨不同的桌面和移动浏览器和操作系统测试 Web 应用程序。您可以轻松地在各种浏览器组合和操作系统中执行并行测试，并加速您的视觉测试周期。在 Chromatic 中，测试发生在组件级别，因此很容易识别回归。

Endtest

Endtest 的屏幕截图视觉布局测试和智能测试自动化使为您的网站或 Web 应用程序创建高效的端到端测试变得简单。其可靠和安全的测试平台使这种可视化布局测试工具成为企业级安全的理想选择。

Silk Test

Silk Test 是一种可视化布局测试工具，可自动执行回归和功能测试。该商业工具适用于开发便携且可靠的功能测试。Silk Test 不仅支持跨浏览器测试、移动浏览器测试和更快的测试执行，还可以为本机、在线和其他应用程序执行测试用例。

Ghost Inspector

Ghost Inspector 是一种无代码可视化布局测试工具，可作为新手 QA 测试人员和经验丰富的测试工程师之间的桥梁，以达到高质量保证标准。它充当时间守卫，因为在编写 Selenium 测试时无需走钢丝。

视觉测试的最佳实践

以下是执行可视化 UI 测试时应遵循的一些最佳实践。

• 选择可以过滤掉误报的测试执行工具。该工具应该能够处理抗锯齿、像素偏移和其他错误，而不会让您的测试失败。
• 测试自动化应该用于动态和移动的内容。
• 不要依赖错误率或阈值。最重要的是变化是否对一个人可见，以及它将如何影响用户体验。
• 自动化算法应该能够评估页面结构和比较布局。
• 不要验证单个组件，而是验证整个 UI 页面。这将导致覆盖率增加。通过验证特定部分，您可能会忽略无法预料的错误。

结论

我们生活在一个视觉推动销售和成功的世界，因此无论组织属于哪个行业，将视觉回归测试作为重中之重才有意义。如果各个团队采取正确的方法，视觉测试可以改变任何公司的游戏规则。只要您拥有正确的工具，就没有理由不提升您的视觉游戏。