Chromatic 是通过 Storybook 进行 UI 组件视觉测试的标杆工具。Delta-QA 测试完整网页，覆盖真实用户路径。它们不是直接竞争对手——而是两个不同层次的测试。理解两者之间的差异，才能避免在只有一半覆盖的情况下误以为已经安全。
Chromatic 测试什么
Chromatic 捕获每个 Storybook story 并与前一版本进行比较。一个按钮的 5 种状态（默认、悬停、激活、禁用、加载中）。一张短标题和长标题的卡片。一个空白和预填的表单。
它在保护组件库方面非常强大。共享组件的任何修改都能被立即检测到。审查界面在设计师和开发者协作方面表现出色。
但问题在于：Chromatic 在隔离环境中测试组件。一个孤立的组件，放在中性容器中，没有页面上下文。而 bug 恰恰隐藏在那里。
Delta-QA 测试什么
Delta-QA 测试完整页面。不是孤立组件——而是真实页面，带有真实的 layout、真实的内容、互相交互的真实组件。
一个在 Storybook 中完美无瑕的 Card 组件，放在三列网格加侧边栏的真实环境中可能会崩溃。一个单独验证通过的按钮，在真实上下文中可能消失在页脚后面。一个在 story 中无可挑剔的表单，集成到模态框中时可能溢出容器。
这些 bug？Chromatic 看不到。Delta-QA 能看到，因为它测试的是用户真正看到的东西——完整的页面，在真实浏览器中，带有真实内容。
Storybook 前提条件
Chromatic 需要 Storybook。如果你的项目不使用 Storybook，Chromatic 就毫无意义。而且仅仅为了视觉测试而搭建 Storybook 是一笔相当大的投资：为每个组件编写 story、保持这些 story 更新、管理演示数据。
Delta-QA 什么都不需要。不需要 Storybook，不需要特定框架，不需要代码。你有网站？你就可以测试。
云端 vs 本地
Chromatic 仅限云端。你的截图会被发送并存储在 Chromatic 的基础设施上。即使使用自托管的 GitLab，也没有 self-hosted 选项。
Delta-QA 默认本地运行。一切数据都留在你的机器上。没有任何数据会离开。
定价
Chromatic 每月提供 5,000 次免费快照，但仅限 Chrome。多浏览器 从 179 美元/月起。而且快照消耗得很快：180 个 story × 3 个视口 = 每次构建 540 个快照，大约 9 次构建就会达到免费限额。
Delta-QA Desktop 完全免费且无限制。多浏览器支持已包含在内。
真正的问题
问题不是"Chromatic 还是 Delta-QA？"。而是"你是在测试组件、页面，还是两者都测？"
如果你有 Storybook 和设计系统，Chromatic 保护你的组件库。这是第一道安全网。
但你还需要第二道网来覆盖完整页面。这就是 Delta-QA 的用武之地。两个工具互补——谁也不能替代谁。
而如果你不使用 Storybook，Delta-QA 是你唯一需要的选项。
常见问题
Chromatic 能脱离 Storybook 使用吗？
Chromatic 从 2025 年开始支持 Playwright 和 Cypress，但这些集成还很年轻。从历史和实践来看，Storybook 仍然是主要前提条件。
在 Storybook 中完美的组件在页面上会崩溃吗？
会。Storybook 的隔离掩盖了与父级 layout、相邻组件、真实内容和屏幕约束的交互。这是孤立组件测试的最大陷阱。
可以同时使用 Chromatic 和 Delta-QA 吗？
可以，而且这是推荐的做法。Chromatic 测组件，Delta-QA 测页面。每个工具覆盖不同层次。
哪个设置更快？
Delta-QA：几分钟。Chromatic：几小时到几天（Storybook 搭建 + 编写 story + CI 配置）。
Chromatic 通过 Storybook 测试孤立的 UI 组件。Delta-QA 测试完整网页和真实用户路径——不需要 Storybook、不需要代码、不需要技术技能。