视觉测试插件进入私测阶段

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

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

请继续阅读以预览插件的 UI。如果你还没有，请立即注册以抢先体验。

插件开发者体验

你将能够通过 Storybook 中的新 UI 面板访问视觉测试插件的所有功能。在这里，你将能够设置和运行测试，并查看精确到像素级的更改结果。

让我们一步步分解它如何工作。

用 Story 状态 API 指示变化

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

受 VSCode 启发，它可以让你看到哪些 stories 有视觉变化需要检查，而无需打开每个 story。

按需运行视觉测试

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

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

接受结果并设置新基线

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

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

如何获取私测版本

视觉测试插件目前处于私测阶段，这意味着它将向有限数量的用户推出。 如果你感兴趣

👉 注册以抢先体验

如果你已经注册了抢先体验，我们将在接下来的几周内通过邮件联系你。优先考虑正在进行中小型项目开发的开发者。

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

常见问题

视觉测试有什么优势？

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

这会取代 Chromatic 吗？

不会。这个插件是由 Chromatic 提供支持的。它让你能够利用专用的浏览器基础设施并行运行测试，这一切都在 Storybook 中方便地进行。