介绍 Chromatic Visual Tests 插件

TLDR：我们正在为 Storybook 推出一个可视化测试插件。它会自动 QA 您所有组件的外观，跟踪它们的外观，并在您的 Storybook 环境中直接通知您视觉变化。在此注册以获得早期访问权限！

测试 UI 很麻烦，因为您必须考虑大量的设计细节。“我是否选择了正确的灰色阴影？”– “边距是否折叠或堆叠？” 检查 UI 外观是否正确的最简单方法是在 Storybook 中手动查看它。

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

我很高兴分享 Chromatic Visual Tests Storybook 插件的抢先体验。它将您的 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 也意味着需要等待其他作业才能查看您的测试结果。

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

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

通过注册以获得早期访问权限开始使用

在 Storybook 中运行可视化测试

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

🏆 理想的工作流程

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

该插件补充了您现有的可视化测试 CI 工作流程。使用 git 历史记录，它可以协调在 Storybook 中“按需”运行的测试与在 CI 中运行的测试，以防止重复运行相同的测试。

单击以在多个浏览器中测试

Visual Tests 在真实浏览器中运行，以模拟用户实际体验 UI 的方式。单击“测试”按钮以启动云浏览器队列。

查看侧边栏中的所有更改

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

精确定位视觉变化

转到 story 以查看其视觉变化。默认情况下，基线和最新屏幕截图之间的更改将以霓虹绿色突出显示。

验证更改是否是故意的

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

以及更多 Chromatic 好处……

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

它在测试策略中的位置？

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

注册以获得早期访问权限

Visual Tests 插件正在积极开发中，我们需要您的反馈才能使其成为现实。在下面注册以获得早期访问权限（和免费使用权）和项目更新。

👉 注册 Visual Tests 插件早期访问权限

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