组件视觉测试：一种自动化验证方法，将 UI 组件隔离渲染——脱离完整页面上下文——并将其外观与已验证的参考状态对比，以在视觉回归传播到生产页面之前在设计系统层面检测它们。
有一个前端团队小心回避问的问题："我们的组件在 Storybook 中经过视觉测试了，但我们的生产页面也测试了吗？"大多数情况下答案是否定的。这个缺口代价高昂，因为到达用户的视觉缺陷不存在于 Storybook 中——它们存在于真实页面中，配以真实数据、真实交互和真实组件组合。
Chromatic 是测试隔离组件的出色工具。Delta-QA 专为测试完整页面设计。它们不是严格意义上的竞争对手——它们是从不同高度看同一问题的工具。但如果您必须选一个，或想理解每个带来什么，本对比直入主题。
Chromatic：设计系统的守护者
Chromatic 由 Storybook 维护者创建，是 Storybook 的天然视觉测试扩展。概念在逻辑上很出色：您已经在 Storybook 中以各种状态（stories）定义了组件。Chromatic 在每次提交时捕获每个 story 的截图，与基线对比并标记变化。
对设计系统团队而言，这是完美集成的工作流。您的设计师定义带四个变体（primary、secondary、disabled、loading）的按钮。您的开发者实现它们并创建相应 stories。Chromatic 在每次代码变更时检查四个变体没有视觉回归。如果按钮的 border-radius 意外更改，Chromatic 会在任何代码审查之前捕获它。
该工具还提供 UI Review，允许设计师和开发者在合并前视觉验证变化。本质上是视觉代码审查，对维护设计系统一致性确实有用。
Chromatic 的盲区：真实世界
这里是 Chromatic 不解决的问题——不是因为质量不足，而是因为架构选择：隔离组件的行为不同于组装页面。
在 Storybook 中隔离测试的按钮在受控环境中渲染：固定视口、无邻居、无继承的 CSS 上下文、无动态数据、无与其他组件的交互。这正是组件级测试可靠的原因。但这也是它对组装问题盲目的原因。
生产中视觉上破损的是什么？很少是隔离组件。破损的是组合。一个 header 组件因 z-index 变更而覆盖 nav 组件。一个产品网格因为卡片组件多了一个 margin 而错位。一个表单因为另一种语言中的标签比预期长而溢出容器。一个 footer 因中间节失去最小高度而压在主要内容上。
这些缺陷在 Storybook 中不可见。每个组件单独看视觉上正确。是它们的组装造成了问题。Chromatic 在设计上不测试组装——它测试砖块，不是建筑。
Delta-QA 测试建筑。该工具对比真实浏览器中渲染的完整页面，配以所有组装组件、继承样式、交互和数据。这是现实的测试，不是建筑师蓝图的测试。
无代码 vs Storybook：受众问题
Chromatic 面向使用 Storybook 的前端开发者。这是合法且重要的受众。但范围狭窄。
要使用 Chromatic，您需要配置好的 Storybook 项目、编写 stories 的知识、对基线和视觉快照的理解、对基于 PR 的 CI 工作流的熟悉。简而言之：您需要是前端开发者。
您想在发布前检查页面的 QA 经理？不能直接使用 Chromatic。在 staging 中发现视觉问题的产品负责人？不能运行测试。想对比模型与生产的设计师？不通过开发者就无法访问 Chromatic 工作流。
Delta-QA 向整个团队开放视觉测试。无需 Storybook。无代码。无 CI/CD 流水线要理解。您提供两个 URL、启动对比、阅读报告。每个人都自主。
组件 vs 页面：两个互补的测试层级
与其对立 Chromatic 和 Delta-QA，不如更准确地将它们定位为完整视觉测试策略的两个层级。
组件层级（Chromatic）：验证每个设计系统砖块符合规范。它是视觉单元测试。它在最细粒度层面捕获回归，在开发周期最早阶段。
页面层级（Delta-QA）：验证带真实数据和级联样式的组装页面在视觉上正确。它是视觉集成测试。它捕获组装问题、样式冲突和仅存在于完整页面上下文中的回归。
同时做两者的团队拥有出色的视觉覆盖。但如果您只能选一个——问题是：什么最能保护您的用户？您的用户看不到 Storybook 组件。他们看到页面。
定价模型：快照 vs 自由
Chromatic 按月快照收费。200 个组件每个 3 个 stories 在 2 个浏览器上，那是每次构建 1,200 个快照。每天 20 次构建（活跃团队）意味着每月 720,000 个。
免费计划提供每月 5,000 个快照——对小项目足够，对中等设计系统几天就用完。付费计划随体量扩展。团队最终限制测试的 stories 或构建频率以保持在配额内。一个激励减少测试覆盖的质量工具——悖论很美妙。
Delta-QA 免费。无快照配额、无页面上限、无频率限制。您视觉覆盖的质量取决于您做好的意愿，而非支付的能力。
Chromatic 做到而 Delta-QA 没做的
协作式 UI Review。 Chromatic 的工作流让开发者和设计师在 PR 内验证组件视觉变化。Delta-QA 中没有完全等价。
测试组件所有状态。 如果您的按钮有 12 种变体，Chromatic 系统性地测试它们全部。在页面级测试这 12 种需要找到出现它们的 12 个不同页面。
原生 Storybook 集成。 由 Storybook 创建者制作。集成尽可能深入。
活的视觉文档。 Chromatic 维护每个组件随时间的视觉历史。
Delta-QA 带来而 Chromatic 未覆盖的
测试现实。 带真实数据、真实继承样式、真实组件交互的生产页面。不是 Storybook 的清晰理想化。
普遍可访问性。 任何团队成员都可以运行视觉测试。无需开发技能。
技术独立。 Delta-QA 无论您的前端栈如何都工作。React、Vue、Angular、Svelte、WordPress、Shopify、jQuery 遗留——如果它在浏览器中显示，Delta-QA 就测试它。Chromatic 需要 Storybook，而 Storybook 需要现代 JavaScript 框架。
数据主权。 本地执行，无数据发送到第三方服务器。
零成本。 无快照计算、无计划要选择、无信用卡要输入。
常见问题
Chromatic 不用 Storybook 能工作吗？
不能。Chromatic 依赖 stories 来定义什么被视觉测试。Delta-QA 独立于任何框架工作——无论生产它的栈如何，它都测试网页。
在 Storybook 中测试组件足以保证视觉质量吗？
不够。隔离测试的组件不复现真实页面条件：样式继承、动态数据、组件交互、第三方样式。Chromatic 验证您的砖块正确。Delta-QA 验证组装正确。
Chromatic 检测响应式问题吗？
是的，在 Storybook 显示的范围内。但页面特定的响应式问题（一个元素与其他元素组合时溢出、长真实数据下布局破裂）不会被检测。
Chromatic 的免费计划对小项目够用吗？
免费计划提供每月 5,000 个快照。一个有 100 个组件、每个 3 个 stories、每天 2 次构建的项目消耗约每月 18,000 个快照。Delta-QA 没有体量限制。
Delta-QA 能用于测试隔离组件吗？
Delta-QA 为完整页面优化。如果组件在可访问 URL 上渲染（如已部署的 Storybook），您技术上可以测试它们。但对隔离组件测试，Chromatic 仍是参考。
延伸阅读
- Delta-QA vs Applitools：视觉AI还是结构化无代码方案？
- Delta-QA vs BackstopJS：无代码结构化还是开源逐像素？
- Delta-QA vs BrowserStack：本地专家还是云端巨头？
Chromatic 和 Delta-QA 不是对手——它们是同一枚硬币的两面。一个保护您的组件，另一个保护您的页面。如果您能同时拥有两者，请同时拥有。如果您必须选择，选择保护您用户实际所见的那一个。