引入 Chromatic 可视化测试插件

太长不看：我们将推出 Storybook 的可视化测试插件。它会自动对你所有组件的外观进行 QA，跟踪它们的外观变化，并在 Storybook 环境中直接通知你视觉变化。点击此处注册抢先体验！

测试 UI 很麻烦，因为你需要考虑大量的设计细节。“我选的灰色色调对吗？”——“边距是折叠了还是堆叠了？”检查 UI 是否正确的最简单方法是在 Storybook 中手动查看。

但是当你拥有数百个组件和数千种变体时，查看 UI 的每种状态是不切实际的。实际上，大多数团队无法查看每一种状态，因此他们会反复遭遇回归问题。

我很高兴分享 Storybook Chromatic 可视化测试插件的抢先预览。它将你的 stories 变成测试，可以跨浏览器和视口尺寸精确定位回归问题。所有这些都在一个超并行化的云基础设施中运行。

继续阅读了解更多，并注册抢先体验。

什么是可视化测试？

可视化测试捕获 stories 的截图，并将其与之前的截图进行比较，以发现 UI 外观中的回归问题。像 Microsoft、Salesforce 和 Monday.com 这样的数千个团队使用可视化测试来验证他们的 UI 在发布代码之前看起来完全符合预期。

我们认为运行可视化测试的最佳方式是 Chromatic，这是一项由 Storybook 维护者（就是我！）提供的云服务。在过去的 5 年里，Chromatic 为你能想到的每种 Storybook 类型捕获了 30 亿张截图。

Chromatic 如何在 CI 中工作

Chromatic 通过持续监控 CI 中的 stories 以发现视觉变化，从而帮助你检测 UI 回归问题。每次你推送代码时，每个 story 都会被截屏并与“上次已知良好”的截图进行比较。如果发现视觉变化，你会通过 PR 检查收到通知。

CI/CD 面向团队，插件面向你

Chromatic 目前作为 CI 任务与 Storybook 集成，这对于确保 开发团队 确定 UI 符合公司标准至关重要。但如果你是 个人开发者，CI 也意味着需要等待其他任务完成后才能查看你的测试结果。

我们与一些人交流发现，他们要等待 CI 完成 30 分钟。通常情况下，你会被困在修复 bug 然后等待 CI 确认修复的循环中。

可视化测试插件将 Chromatic 的强大功能直接带入 Storybook，因此你无需等待 CI 即可运行可视化测试。

通过注册抢先体验开始

在 Storybook 中运行可视化测试

使用可视化测试插件，你可以直接从本地 Storybook 实例方便地触发 Chromatic 可视化测试。这些测试在云端执行，并在你的 Storybook 中报告结果。这加快了反馈循环，让你可以在开发过程早期捕获错误。

🏆 梦寐以求的工作流程

1. 像往常一样在 Storybook 中构建组件
2. 点击按钮在主流浏览器中运行可视化测试
3. 如果组件外观不正确，直接收到警告
4. 修复 UI 回归问题并继续

该插件补充了你现有的可视化测试 CI 工作流程。利用 Git 历史记录，它能够将 Storybook 中“按需”运行的测试与在 CI 中运行的测试进行核对，以防止重复运行相同的测试。

点击在多个浏览器中测试

可视化测试在真实浏览器中运行，以模拟用户实际体验 UI 的方式。点击“测试”按钮，启动一组云浏览器。

在侧边栏查看所有更改

当在 stories 中检测到视觉变化或错误时，需要在侧边栏中突出显示需要注意的 stories。

精确定位视觉变化

前往一个 story 查看其视觉变化。默认情况下，基准截图和最新截图之间的变化将以霓虹绿色突出显示。

验证更改是否是故意的

变化有两种类型：改进和回归。如果某个变化是故意的，请“接受”它以更新该 story 的视觉基准。如果你发现回归问题，请修复它并再次运行测试以确认你的修复。

还有更多 Chromatic 好东西…

• 🐇 所有测试默认并行执行
• 🌎 Chrome、Safari、Firefox 和 Edge
• 💅 指定视口、国际化 (i18n) 和 CSS 媒体特性
• ➕ 嵌入、Figma、Slack 等等…

它在测试策略中的位置？

可视化测试涵盖了用户界面的一个关键方面：外观。它们结合了基于浏览器的测试的敏锐度和单元测试的便捷性。在 Storybook 中，可视化测试是编写 stories 的自然产物，这意味着无需编写或维护额外的测试。

注册抢先体验

可视化测试插件正在积极开发中，我们需要你的反馈来完善它。请在下方注册以获取抢先体验（和免费使用）以及项目更新。

👉 注册可视化测试插件抢先体验

向贡献者致敬：Norbert de Langen, Tom Coleman, Michael Arestad, Matthew Weeks, Gert Hengeveld, Jarel Fryer