用途:Chromatic 是面向 Storybook 组件的云端视觉回归测试平台,会截取每个 Story 的截图并与基线比对,用于在 UI 变更时发现视觉差异。适合搭建视觉测试流程、排查界面回归。
主要能力:云端渲染组件、逐 Story 截图、自动比对差异、人工审核通过或拒绝变更;支持按 Story 配置视口测试、动画延迟、diffThreshold 阈值、多浏览器(chrome/firefox/safari/edge)与主题/语言模式;提供 TurboSnap 增量测试(--only-changed),仅测受改动影响的 Story;支持忽略动态 DOM 元素、模拟数据、字体加载等待等。
安装与使用:npx storybook add chromatic 或 npm install --save-dev chromatic;首次运行 npx chromatic --project-token=<token> 建立基线。配置可写入 chromatic.config.json,也可在 package.json scripts 中定义命令。Story 级通过 parameters.chromatic 控制行为。
CI 集成:提供 GitHub Actions(chromaui/action@latest,需 fetch-depth: 0 以获取准确基线)和 GitLab CI 示例。审核工作流支持 --auto-accept-changes=main、--skip 跳过构建,commit 信息加 [skip chromatic] 也可跳过。
限制:需提供 project-token;视觉测试依赖 Storybook 构建产物与云端服务;动画、字体、时区等异步内容可能造成不稳定结果,需通过 delay、diffThreshold 或等待字体等方式处理。具体收费与价格资料未提供。