如何在视觉回归测试中执行调试？

lsekfe

调试在测试过程中起着至关重要的作用。任何失败的测试都需要认真分析，以确定失败的根本原因并努力纠正它。
　　自动化框架，如 Selenium、Cypress、Puppeteer 和剧作家最适合并广泛用于功能测试。如果您需要验证应用程序用户界面的外观和感觉怎么办？实现此目的的一种方法是使用 CSS 选择器检查 CSS 值，但这是一个乏味的过程并且不可靠。
　　去表演视觉测试对于 Web 应用程序，它是一种智能工具，它提供了一种自动检测 UI 更改的方法 视觉回归测试 。Percy 是一种一站式解决方案，用于捕获屏幕截图以检测视觉变化并通过突出显示发生的确切变化来通知团队。
　　让我们了解如何从失败的测试构建访问 Percy 仪表板，以执行失败背后的根本原因分析。
　　如何从 Failed build 访问 Percy 仪表板
　　要开始使用 Percy，以下是所需的先决条件。
　　先决条件：
　　1、在 CI 中设置 Percy。
　　2、珀西设置 使用各种测试自动化工具。
　　设置 Percy 并运行视觉回归测试后，找到您想要对其进行根本原因分析的失败测试。然后按照下面提到的步骤从 Percy 访问失败的测试。
　　步骤1： 打开失败的构建的拉取请求后，您可以针对 Percy 失败的步骤检查详细信息链接。

　　第2步： 单击详细信息以打开相关的 Percy 构建，突出显示更改。

　　在视觉回归测试中执行根本原因分析
　　当您第一次运行 Percy 集成测试时，Percy 会捕获快照并将其存储为基线图像，并在接下来的后续运行中将基线图像与新捕获的图像进行比较。
　　例如，此处搜索输入元素中的占位符文本被修改为——
　　前： 搜索怪物！
　　后： 搜索怪物？
　　所以比较的区别是 ！ 变成 ? 珀西用红色突出了这种变化。同样，Percy 使用逐像素比较突出显示基线和新快照中的任何更改。

　　现在，QA 或 BA 都可以使用 Percy 中的工作流验证更改是有意的还是错误，如下所示。
　　工作流程：请求对此快照进行更改
　　步骤1： 如果更改不是预期的并且开发人员意外更改了它，您可以通过单击此快照上的请求更改来拒绝更改。

　　第2步： 您还可以添加评论以拒绝更改，如下所示：

　　第 3 步： 一旦快照在 Percy 中被拒绝，Percy 就会将此信息发送回 Github，并且构建状态将更改为 对 1 个视觉更改请求的更改。 在这里，开发人员现在可以恢复意外更改，Percy 构建将成功。

　　工作流程：批准构建
　　步骤1： 现在，如果开发人员按预期进行更改并且您需要批准更改，那么 QA 和 BA 需要单击 Approve Build 按钮。

　　第2步： 随着构建获得批准，Percy 将此信息发送到 Github，失败的检查将更新为成功状态。这个新批准的快照成为 Percy 中的新基线图像。

　　视觉上的不一致深深影响着用户的旅程，这意味着需要彻底消除它们。视觉测试是快速、准确、全面地实现这一点的唯一方法，这使得它们对于任何希望在线存在的企业来说都是不可或缺的。因此，在失败的视觉回归测试的调试过程中，进行根本原因分析至关重要。