Storybook 的视觉测试插件进入 Beta

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

为什么需要视觉测试？

测试 UI 的挑战在于，你需要的功能测试不足以理解你的 UI 是如何呈现的。例如，一个功能测试可能会确认你的登录按钮的功能正常，但它会忽略布局变化导致按钮消失在导航栏后面的情况。你的测试说它功能正常；而被锁定的用户却有不同的说法！

在这种情况下，专门的视觉测试工具就派上用场了。它们首先会截取 UI 的预期状态快照，并将其设置为基准。然后，当你对代码库进行任何更改时，你的视觉测试工具会捕获新的快照，并与基准进行比较（diffs）。此时，你可以在合并到主分支之前修复任何问题，或者接受你的更改并为未来的测试设置新的基准！

与功能测试相结合，这提供了两全其美的优势：完全确信你的应用程序看起来和工作都正常。

历史上，视觉测试通常在 CI 中进行，作为 PR 评审过程的一部分。它非常有效，我们甚至构建了 一项云视觉测试服务，Chromatic，在整个行业中被用于自动将 Story 转化为视觉测试。

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

开始使用

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

npx storybook@next add @chromatic-com/storybook

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

运行你的第一个视觉测试

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

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

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

高保真，高性能

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

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

最后，我们打造了一个精美的插件用户体验。你可以在 Storybook 侧边栏中查看你的 Story 的测试状态，需要你注意的 Story 会用黄色高亮显示。你还可以过滤侧边栏，只显示包含更改的 Story。

分享你的反馈！

视觉测试插件目前处于公开 Beta 阶段，并已被各种规模的项目积极使用。我们非常希望收到你的反馈，以帮助将其作为 Storybook 8.0 和 Chromatic 3.0 的一部分准备就绪，迎接第一个稳定版本的发布。

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