用于 Storybook 的 Percy 与 Chromatic

Percy 是一个基于云的 VRT 平台，可与持续集成流水线集成。它会捕获网页和 Storybook 故事的屏幕截图，将基线存储在云端，并通过网页界面生成可访问的视觉差异审查结果。它支持 Playwright、Cypress、Selenium 和 Storybook。

Chromatic 是一个专为 Storybook 打造的 VRT 平台。它会在云端浏览器中捕获所有故事，将其与基线进行比较，并生成差异审查界面。Chromatic 还会将 Storybook 发布为托管的组件文档站点。

Percy 和 Chromatic 都会自动发现并为每个 Storybook 故事创建快照。无需编写额外的测试代码——为组件编写故事，运行 CLI，每个视觉状态都会自动接受测试。这使现有 Storybook 项目能够快速采用这些工具。

安装 @percy/cli 和 @percy/storybook，将 PERCY_TOKEN 环境变量添加到持续集成环境，并将 percy storybook ./storybook-static 添加到持续集成流水线中。Percy 会自动为所有故事创建快照，并将 VRT 构建结果发布到 Percy 控制面板。

安装 chromatic，将 CHROMATIC_PROJECT_TOKEN 添加到持续集成环境，然后运行 chromatic --project-token=...。首次运行会建立基线。后续运行会与基线进行比较，并将审查链接发布到 GitHub PR 检查中。

两种工具都会添加一项 PR 检查，显示“检测到 X 项更改。”点击后会打开审查界面，其中包含并排或叠加的差异。评审人员可以批准有意进行的更改（建立新的基线），也可以要求修复意外的回归问题。

使用 Storybook 参数（控件）创建多个故事变体：默认、加载中、错误、禁用、LongText、SmallViewport。每个变体都会成为独立的 VRT 快照，无需编写单独的测试文件即可实现全面的状态覆盖。

Chromatic 和 Percy 支持为每个快照配置多个视口宽度。可以在故事中配置视口，也可以通过 .storybook/preview.js 全局配置。为每个视口和每个主题（浅色/深色）运行 VRT，可以同时捕获响应式和主题回归问题。

在重大版本升级或有意重新设计时接受所有更改。两种工具都支持批量接受。重大设计系统更新后，可以一次性接受所有差异，新的屏幕截图就会成为未来增量更改的基线。

将 Storybook 的 play() 函数（交互测试）与 VRT 结合使用：play() 会模拟用户交互（点击按钮、打开模态框），然后由 VRT 快照捕获交互后的状态。这样可以测试复杂交互组件的视觉输出。

Percy 和 Chromatic 按快照收费。包含数百个故事、多个视口和多个主题的大型 Storybook 测试套件，会为每个 PR 生成数千个快照。请监控使用量，高效使用故事装饰器，并考虑对纯逻辑类故事跳过 VRT。

与通用 VRT 工具相比，Chromatic 为什么特别适合 Storybook 项目？

Percy 和 Chromatic 会通过在云端浏览器中发现并为所有故事创建快照、生成 PR 差异审查结果以及管理基线，自动化 Storybook 的 VRT。结合用于状态覆盖的故事参数和用于交互测试的 play()，它们可以为组件库提供全面的视觉质量保障。