隆重推出 Chromatic Visual Tests 插件

核心摘要：我们推出了一款适用于 Storybook 的视觉测试插件。它可以自动质检所有组件的外观，跟踪其显示效果，并在 Storybook 环境中直接通知您视觉变化。在此处 注册 即可获得早期访问机会！

测试 UI 很棘手，因为您需要考虑大量设计细节。“我选择了正确的灰色吗？”——“边距是塌陷了还是堆叠了？” 检查 UI 外观是否正确的最简单方法就是手动在 Storybook 中查看。

但是，当您有成百上千个带有数千种变体的组件时，查看 UI 的每种状态是不切实际的。实际上，大多数团队无法查看每一种状态，因此他们会反复遭受回归的困扰。

我很高兴与大家分享 **Chromatic 视觉测试插件 for Storybook 的预览版**。它将您的 Storybook 故事转化为测试，可在不同浏览器和视口尺寸下精确找出回归问题。所有这一切都在高度并行化的云基础设施上完成。

继续阅读以了解更多信息并 注册以获得早期访问机会。

什么是视觉测试？

视觉测试 会截取 Storybook 故事的屏幕截图，并将其与之前的屏幕截图进行比较，以捕获 UI 外观上的回归。Microsoft、Salesforce 和 Monday.com 等成千上万的团队使用视觉测试来验证其 UI 在上线代码前是否如预期所示。

我们相信，运行视觉测试的最佳方式是使用 Chromatic，这是 Storybook 维护者（我！）提供的云服务。在过去的 5 年里，Chromatic 已为各种 imaginable 的 Storybook 捕获了 30 亿张屏幕截图。

Chromatic 在 CI 中如何工作

Chromatic 通过在 CI 中持续监控 Storybook 故事的视觉变化来帮助您检测 UI 回归。每次推送代码时，都会截取每个故事的屏幕截图，并与“上一个已知良好”的屏幕截图进行比较。如果发现视觉变化，您将通过 PR 检查收到通知。

CI/CD 是为团队准备的，插件是为您准备的

Chromatic 目前作为 CI 作业与 Storybook 集成，这对于让 **开发团队** 确信 UI 符合公司标准至关重要。但如果您是 **独立开发者**，CI 也意味着需要等待其他作业完成才能查看测试结果。

我们交谈过的一些人需要等待 30 分钟才能完成 CI。通常，您会陷入一个修复 bug 然后等待 CI 确认修复的循环。

视觉测试插件将 Chromatic 的强大功能直接引入 Storybook，因此您可以在不等待 CI 的情况下运行视觉测试。

通过 注册以获得早期访问机会 来开始

在 Storybook 中运行视觉测试

借助视觉测试插件，您可以方便地直接从本地 Storybook 实例触发 Chromatic 视觉测试。这些测试在云端执行，并将结果报告回您的 Storybook。这可以加快反馈循环，并使您能够在开发过程的早期捕获 bug。

🏆 终极工作流程

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

该插件是对您现有的视觉测试 CI 工作流程的补充。它能够利用 git 历史记录，协调在 Storybook 中“按需”运行的测试与在 CI 中运行的测试，以避免重复运行相同的测试。

点击即可在多个浏览器中进行测试

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

在侧边栏中查看所有更改

当在 Storybook 故事中检测到视觉更改或错误时，需要关注的故事将在侧边栏中突出显示。

精确找出视觉差异

转到 Storybook 故事以查看其视觉差异。默认情况下，基线屏幕截图和最新屏幕截图之间的差异将以霓虹绿高亮显示。

验证更改是否为有意

有两种类型的更改：改进和回归。如果更改是有意的，请“接受”它以更新该 Storybook 故事的视觉基线。如果发现回归，请修复它并重新运行测试以确认您的修复。

以及更多 Chromatic 的其他功能……

• 🐇 默认情况下所有测试都经过并行化
• 🌎 Chrome、Safari、Firefox 和 Edge
• 💅 指定视口、i18n 和 CSS 媒体功能
• ➕ 嵌入、Figma、Slack 等等……

在测试策略中扮演什么角色？

视觉测试涵盖了用户界面的一个关键方面：外观。它们将基于浏览器的测试的精确性与单元测试的易用性结合在一起。在 Storybook 中，视觉测试是编写 Storybook 故事的自然副产品，这意味着无需编写或维护额外的测试。

注册提前体验

视觉测试插件正处于积极开发阶段，我们需要您的反馈来将其变为现实。在下方注册即可获得早期访问机会（以及免费使用）和项目更新。

👉 注册以获得视觉测试插件的早期访问机会

感谢贡献者 Norbert de Langen、Tom Coleman、Michael Arestad、Matthew Weeks、Gert Hengeveld、Jarel Fryer