Storybook 的视觉测试插件进入 Beta 阶段

Storybook 8 引入了一种全新的工作流程，通过 Storybook 的视觉测试插件来保护您的 UI 免受意外的视觉变化！了解其工作原理，立即试用 Beta 版。

为什么进行视觉测试？

测试 UI 的挑战在于，您需要的不仅仅是功能测试来了解 UI 的外观。例如，功能测试可能确认您的登录按钮的功能，但它会错过布局偏移导致按钮在导航栏后消失的情况。您的测试说它是功能正常的；您被锁定的用户却不这么认为！

在这种情况下，专业的视觉测试工具可以解决问题。它们首先拍摄 UI 应有的快照，并将其设置为基线。然后，当您对代码库进行任何更改时，您的视觉测试工具会捕获新的快照，并将其与基线进行比较。届时，您可以修复合并到主分支之前的任何问题，或者接受您的更改并为未来的测试设置新的基线！

与功能测试相结合，这提供了两全其美的优势：完全确信您的应用程序外观和功能都正确。

从历史上看，视觉测试发生在 CI 中，作为 PR 审查过程的一部分。它非常有效，以至于我们甚至构建了云视觉测试服务 Chromatic，该服务在整个行业中用于自动将 stories 转换为视觉测试。

视觉测试插件为 Storybook 带来了一种全新的视觉测试方法。您现在可以在开发的任何阶段在 Storybook 中获得视觉差异，而无需等待 CI。功能包括自动跨浏览器测试、主题测试（如亮色和暗色模式）、视口和设备测试等等。

开始使用

要使用视觉测试插件，您需要使用 Storybook 8 Beta 版。如果您使用 npx storybook@next init 在 Storybook 8 中初始化一个新项目，则该插件将自动安装。如果您使用 npx storybook@next upgrade 升级现有项目，则需要通过以下方式手动添加该插件

npx storybook@next add @chromatic-com/storybook

在文档中了解更多关于设置的信息.

运行您的第一个视觉测试

设置完成后，下次加载 Storybook 时，您将看到一个新的视觉测试插件面板。您可以通过单击 Storybook 侧边栏中的 ▶️ 按钮来运行您的第一个测试

然后，在运行测试后，您可以在 Storybook 插件面板中查看和检查差异

如果更改是故意的，请接受它们以设置新的基线。如果不是，请修复检测到的更改，然后重新开始该过程

高保真度，高性能

Chromatic 是目前市场上速度最快的视觉测试工具，能够每分钟处理数千个 stories。但是，在 CI 中很快的速度在交互式 UI 中可能会感觉很慢。因此，作为插件开发的一部分，我们将工作流程加速了 78%，从而降低了延迟结果，以保持您的工作效率。

这与 Storybook 8 许多更改的主要主题相符：性能。在许多其他改进中，您现在可以为测试工作流程创建快 3 倍的构建，并且我们将 React 项目的启动时间缩短了 20-40%。

最后，我们精心设计了美观的插件 UX。您可以在 Storybook 侧边栏中查看 stories 的测试状态，该侧边栏会以黄色突出显示需要您注意的 stories。您还可以过滤侧边栏以仅显示包含更改的 stories。

分享您的反馈！

视觉测试插件目前处于公开 Beta 阶段，并已被各种规模的项目积极使用。我们非常希望您提供反馈，以帮助其准备好作为 Storybook 8.0 和 Chromatic 3.0 的一部分首次稳定发布。

使用视觉测试插件时遇到的任何问题，请与Storybook 和 Chromatic 团队分享。