引入剧作家的视觉测试-DEV365 开发者社区

剧作家是测试用户流以确保实际工作的必不可少的工具（例如，“注册”或“添加到购物车”流）。

但是，这些E2E测试仅验证逻辑。您仍然需要手动检查每个页面以确认它“看起来正确”。换句话说，您还需要注意视觉错误。

对视觉错误的测试很乏味。 UI在不断变化，使得跟上破裂的布局，缺少资产和跨浏览器渲染差异的挑战。此外，现代UI很复杂，需要考虑数百个组成部分和成千上万的州。每个视觉细节的写作断言是完全不可能的。

想象一下，如果您可以确保用户流动正常并看起来正确，而无需编写更多测试。我们正在构建一个工具，该工具会在E2E测试页面的每个步骤上自动运行视觉测试，而剧作家则驱动浏览器。

继续阅读以了解更多或 sign up now for early access。

什么是视觉测试？

如果e2e测试确认事物的工作正确，视觉测试会验证事物 fook right。

视觉测试通过捕获渲染UI的像素完美快照，包括造型和静态资产，检测UI外观中的错误。然后将这些快照与基线快照进行提交代码进行比较，有助于捕获UI错误。

这些不应该与一般快照测试混淆，该测试比较文本的斑点以检查差异。

视觉测试通过提供一个新方面来检查：外观来完成您的测试策略。几乎没有努力，它们为浏览器中的实际外观提供了可靠的检查。

让您说您是在线购物产品的开发人员。您负责验证数据如何从后端流向前端的关键产品详细信息页面。特别是，您必须测试最重要的现在购买按钮。

使用传统的E2E测试方法，您可以创建像左侧的测试一样。但是，如果您能够使用视觉测试，它与右侧的测试一样简单。

右侧的视觉测试将拍摄页面的图像快照，这使您可以一眼验证左侧测试的所有信息。不仅如此，您还要重新测试数据流正确，并且页面的外观也正确。

这是您为编写和维护测试所需要做的工作的巨大减少。在上面的示例中，代码少5倍。

由于上面的代码非常最小，因此您有效地免费获得视觉测试。它如何工作？

一个库位于剧作家的浏览器自动化之上，并拍摄了经过测试的页面的快照。这为您提供了应用程序中每个密钥页面的全面视觉覆盖。当您的应用程序更改时

还有更多方便的好处：

更少的工作：视觉测试是您现有的剧作作者E2E测试套件的一部分。为测试配置和进行设置工作可能很困难且耗时。通过视觉测试，您可以使用任何其他代码重复使用测试数据，模拟模块和其他配置。
可发现性：视觉测试与剧作作者测试一起进行。快照在测试结束时会自动捕获，该选项可在任何时候捕获更多的快照。这简化了组织和发现性能而无需切换工具。

通过替换一行代码来设置E2E视觉测试。视觉测试软件包@chromaui/test-archiver包装了@playwright/test软件包，以在剧作家测试中生成页面的快照。

现在，您的工作流程可能会如下所示：

，而不是手动检查您的应用程序是否有视觉更改

我们的色彩团队正在构建E2E视觉测试，以帮助您自动捕获UI错误。我们目前正在为飞行员做准备，并且仍然有一些可用的地方。如果您有兴趣及早访问（和免费使用），请填写表格以查看您的公司是否有资格。

为什么不使用剧作家的内置屏幕截图功能？
视觉测试是一个多步过程。剧作家的屏幕截图是该过程的一部分。要创建DEV实际想使用的视觉测试工作流程，您还需要存储这些屏幕截图，查看它们，编排CI以捕获它们，并与GIT集成以进行PR检查。我们为您处理所有这些，并随着时间的推移维护。

更重要的是，色彩E2E视觉测试同时捕获了屏幕截图和真实页面（DOM +资产）的Web存档。这使您可以像用户一样复制应用程序在实际浏览器中呈现的方式。无需再次介入整个E2E测试即可进行调试，您可以通过视觉更改直接跳到页面。