视觉测试插件进入内部 alpha 测试阶段

本月早些时候，我预览了 Storybook 即将推出的视觉测试插件。只需单击一下，即可自动测试您的 stories 在所有浏览器和视口中的视觉变化。

今天，我很高兴分享内部 alpha 版本，并重点介绍我们迄今为止取得的进展。该项目目前由六位核心开发人员负责，目标是在年底前发布。

请继续阅读以预览该插件的 UI。如果您尚未注册，请立即注册以获得优先体验。

插件开发者体验

您将可以通过 Storybook 中新的 UI 面板访问视觉测试插件的所有功能。在这里，您将能够设置测试、运行测试并查看突出显示像素级变化的测试结果。

让我们逐步分解其工作原理。

Story 状态 API，用于指示更改

我们正在为 Storybook 引入一个新的实验性 API，该 API 在 Storybook 的侧边栏中显示每个 story 的测试状态。

受 VSCode 启发，它使您无需打开每个 story 即可查看哪些 story 具有视觉变化并且需要审查。

按需运行视觉测试

按下此按钮可按需运行所有 stories 的视觉测试。在后台，该按钮将启动静态构建并将其上传到云端进行测试。

每个 story 可以在浏览器、主题、视口、a11y 偏好设置和其他全局设置的不同组合中进行测试。

接受结果并设置新的基线

视觉测试会截取您的 stories 的屏幕截图，并将其与以前的版本进行比较，以捕获任何视觉变化。在该插件中，story 的最新屏幕截图将显示在实时 story 旁边。如果存在视觉差异，它们将以霓虹绿色突出显示，以便您一目了然。

运行测试后，接受 story 的快照作为新的基线。将来进行测试时，该 story 将与该基线进行比较。

如何获得内部 alpha 版本

视觉测试插件目前处于内部 alpha 测试阶段，这意味着它正在向有限数量的用户推出。 如果您有兴趣

👉 注册以获得早期访问权限

如果您已经注册了早期访问权限，我们将在未来几周内通过电子邮件与您联系。优先考虑正在进行中小型项目开发的开发人员。

我们希望您和我们一样对视觉测试插件感到兴奋。我们将继续发布定期更新，以期待我们的公开 alpha 版本。

常见问题解答

视觉测试的优势是什么？

视觉测试是一种务实的方式，通过对抗 UI 回归来确保 UI 保持像素完美。视觉测试补充了其他类型的测试，例如单元测试、交互测试和可访问性测试，从而为 UI 提供全面的覆盖。 了解更多。

这会取代 Chromatic 吗？

不会。此插件由 Chromatic 提供支持。它使您能够使用专用浏览器基础设施并行运行测试，所有这些都可以在 Storybook 的便捷环境中完成。