视觉回归：由代码修改、依赖更新或配置变更引入的、非预期的界面外观变化（布局、颜色、字体、间距、对齐），只能通过对界面两种状态进行自动化比较才能发现。
Lost Pixel 在视觉测试生态中占据了一个有意思的位置。开源，专注于 Storybook 和 Ladle 组件，可集成到 CI 流水线：这是一款直接面向生活在组件世界里的前端开发者的工具。
更新（2026 年 10 月）。 2026 年 4 月 22 日，Lost Pixel 的创始人宣布停止该产品，团队加入 Figma。GitHub 仓库已归档，npm 上最后发布的版本（3.22.0）是 2024 年 11 月的。代码仍以 MIT 许可证提供，但不会再有更新。本对比保留了对该工具的描述（如果你仍在使用它，这仍有用），并帮助你选择后续方案。
但有一个问题，评估中很少有人足够早地提出：你的需求是在 Storybook 中测试隔离的组件，还是验证你的网站在真实条件下视觉上是否正常？
这个问题的答案决定了该迁移到哪里：另一个以组件为中心的工具，还是像 Delta-QA 这样测试真实页面的方法。而这个答案与其说取决于技术，不如说取决于团队的构成和视觉质量问题的性质。
我们所有的对比文章都基于可核实的标准：替代方案与对比。
检测视觉回归，无需碰 npm 或配置文件。 Delta-QA 以无代码方式使用，提供免费账户，无需银行卡。 免费使用 Delta-QA →
Lost Pixel：组件专家
Lost Pixel 是一款开源的视觉回归测试工具，现已归档。它的主场是 Storybook、Ladle、Histoire（界面组件的开发环境）和静态网页。该工具对你的组件或页面截图，并在多次运行之间比较，以发现视觉变化。
以 Storybook 集成为强项
如果你用 Storybook 开发（而在 2026 年，大多数使用 React、Vue 或 Angular 的前端团队都是如此），Lost Pixel 会直接接入你的 stories 目录。每个 story 自动变成一个视觉测试。不需要手动列出要测试的页面，也不需要编写导航场景：你的 Storybook 目录就是你的视觉测试套件。
对前端开发者来说，这是清晰且一目了然的价值主张。你本来就为了文档和组件开发在维护 stories，Lost Pixel 不费力气地把它们变成视觉回归测试。
该工具还支持 Ladle（Storybook 的轻量替代）和 Histoire（用于 Vue），覆盖了组件开发生态的大部分。除了组件，Lost Pixel 还能用“page shots”模式测试完整的网页。
由开发者设计、为开发者服务的工具
Lost Pixel 通过 npm 安装，在 TypeScript 或 JavaScript 配置文件中配置，通过命令行执行。GitHub Actions 的 CI 集成有文档说明，Lost Pixel 平台（云版本）曾增加基准的审查与批准工作流；既然已宣布停止，新项目就不要指望它了。
对开发者来说，学习曲线合理。如果你了解 npm、配置文件和 GitHub Actions，不到一小时就能上手。它比 Applitools 或 Percy 更简单：Lost Pixel 不会用选项和集成淹没你。
但这种对开发者的简单，对其他所有人却是一道门槛。如果你不是开发者，安装 npm 包、编写配置文件、配置 GitHub Action，就像没经过培训去驾驶潜艇一样难以企及。
逐像素比较
Lost Pixel 比较的是截图：从组件或页面捕获的图像。这是视觉测试中最直观、最普遍的方法。你确实能看到变了什么，叠加显示在图像上。
这种方法有不可否认的优点：它是可视化的。报告以图形方式向你展示差异，你不需要懂 CSS，就能看出按钮移动了或颜色变了。
但它也有结构性的弱点：对渲染噪声敏感。两次渲染之间抗锯齿的变化、本地环境与 CI 之间字体的差异、未同步的动画：这些都会产生误报。Lost Pixel 提供可配置的容差阈值，但把这个阈值校准好是一门微妙的艺术：太敏感会被误报淹没，太宽松则真正的回归会被漏掉。
Delta-QA：面向整个团队的视觉测试
Delta-QA 的出发点很简单：视觉测试不应该只属于开发者。最有资格评判界面视觉质量的人（设计师、功能 QA、产品负责人）常常被排除在流程之外，因为现有工具要求技术能力。
开发者同样没有被排除：用 Playwright 编写测试的人现在可以使用 SDK Vision，每个要检查的页面一行，与无代码录制的场景处于同一个空间。
无代码方法
使用 Delta-QA，你创建免费账户，输入网站的 URL，像用户一样正常浏览。路径中的每一步都成为一个检查点。下一次执行时，Delta-QA 在真实浏览器里重放该路径，将每个页面与其基准比较，并向你展示变化。
不需要 npm，不需要配置文件，不需要命令行，不需要 GitHub Actions。只要会使用网页浏览器，就会使用 Delta-QA。
这种易用性并不是以牺牲工具能力为代价：这是一个设计选择，大大扩展了能为视觉质量做出贡献的人群。设计师可以验证规格是否得到遵守。功能 QA 可以把视觉测试纳入自己的验证流程。产品负责人可以在放行之前确认某次部署没有在视觉上破坏任何东西。
像人眼那样比较，而不是按像素
Lost Pixel 逐像素比较图像，而 Delta-QA 比较页面的元素，并用清晰的语言说明变化。这是一个根本差异，改变了结果的性质。
当 Delta-QA 标出一处变化时，它不会给你看图像上的一个彩色矩形，而是准确告诉你发生了什么：“标题的 font-size 从 24px 变成了 20px”“页头的背景色从 #FFFFFF 变成了 #F8FAFC”“按钮的 padding 从 16px 减小到 12px”。
这些信息可以直接行动。你知道该修什么、去哪条 CSS 规则里找，以及如何验证修复是否生效。用图像比较，你只知道视觉上有东西变了，要找出具体是什么，需要人工排查。
这种方法也限制了误报。抗锯齿或亚像素的变化不会改变元素的颜色、大小或位置：没有理由去标记。留给你判定的，是真正触及页面的变化。
On-Premise 选项
对于有此要求的组织，Delta-QA 提供 On-Premise 方案，通过 Docker 安装在你的基础设施上：没有任何数据离开你的网络，也没有截图发送到远程服务器。
SaaS 仍是最快的入口：免费账户，无需银行卡。On-Premise 方案可通过为期一个月的免费 POC 评估。
核心争论：隔离组件 vs 真实页面
在 Lost Pixel 和 Delta-QA 之间做选择，背后是一个更深层的争论：对一个应用做“视觉测试”到底意味着什么。
组件方法：必要但不充分
Lost Pixel 通过其 Storybook 集成，测试隔离的组件。每个组件在受控环境中，以定义好的 props 单独渲染。这对于在组件层面发现回归非常出色：border-radius 变了的按钮、placeholder 消失的文本框、颜色变得不一致的徽章。
但影响最大的视觉缺陷并不发生在隔离的组件层面，而是发生在组件组装成真实页面的时候。导航组件把内容往下推了 50 像素。页脚在手机上盖住了主内容。卡片网格因为某段文字比预期更长而错乱。窗口调整大小后，模态框不再正确居中。
这些视觉集成问题在 Storybook 中是不可见的，因为 Storybook 展示的不是集成，而是单个的砖块。就像把手表的每个齿轮分别测试，然后得出手表能走的结论。齿轮单独看可能都完美，装配到一起后却可能咬合不上。
页面方法：用户的现实
Delta-QA 测试真实页面，在真实浏览器里，带着你应用真实的 HTML、CSS、JavaScript 和交互。当 Delta-QA 告诉你页面在视觉上是正确的，那是因为它在用户将看到的条件下确实正确。
这不是抽象，不是隔离的环境，也不是局部渲染。这是你的页面整体，包含组件之间所有的交互、所有继承的样式、所有 CSS 覆盖、所有层叠效应。
这种方法能发现隔离组件测试在结构上遗漏的视觉集成缺陷。它也能发现与真实数据相关的问题：一个 40 个字符的名字溢出了字段，一个 5 位数的价格破坏了布局，一张缺失的图片使页面塌陷。
面向 Storybook 的开源方案很强大，但需要配置。 Delta-QA 不需要一行配置就能检测你的视觉回归：免费账户，无代码，无需银行卡。 免费使用 Delta-QA →
Lost Pixel 做得好的地方
这些优势解释了为什么团队采用了它，以及需要在别处找回什么。
原生的 Storybook 集成。 如果你维护着 Storybook 目录，Lost Pixel 毫不费力地把它变成视觉测试套件。每个 story 都成为一个测试。对于以组件为中心的团队，这是非凡的价值主张。
CI/CD 自动化。 Lost Pixel 自然地融入 GitHub Actions 流水线。视觉测试在每个 pull request 上自动触发，无需人工介入。覆盖是持续且系统的。
成本。 Lost Pixel 是开源的，自托管版本免费。云平台是付费的，价格亲民；它受到已宣布的停止维护的影响。
组件粒度。 单独测试每个组件，可以在最细的层面定位回归。某个组件变化时，你立刻知道是哪一个，不必在完整页面里寻找。对于逐个组件工作的开发者，这是高效的工作流。
开源。 代码仍以 MIT 许可证保持可读、可复用。但归档的仓库不再接收修复：每当 Storybook、Playwright 或 Node.js 更新，兼容性就得由你自己保证。
Delta-QA 额外带来的价值
完全的易用性。 没有任何技术前提。没有 npm，没有 CLI，没有配置文件，没有 GitHub Actions。只要会浏览网站，就会使用 Delta-QA。
结果的质量。 每处差异都对应页面上的一个元素，并以清晰的语言描述。你知道什么变了：而不仅仅是“这个矩形里视觉上有东西变了”。
集成层面的覆盖。 Delta-QA 测试完整页面，而不是隔离的组件。它能发现组件测试按设计会遗漏的视觉集成缺陷：布局问题、样式冲突、真实数据对页面布局的影响。
数据主权。 使用 On-Premise 安装，没有任何数据离开你的网络：没有第三方云服务，也没有外部传输。对于受 GDPR 或严格安全策略约束的企业，这是结构性优势。
上手时间。 从创建账户到录制第一条路径，Delta-QA 只需几分钟。而使用 Lost Pixel，需要安装包、编写配置、有一个能用的 Storybook、配置 CI：对有经验的开发者来说更像是一到两个小时。
整个团队的参与。 使用 Delta-QA 的无代码视觉测试是一项协作活动。设计师、QA、产品负责人和开发者都可以参与、阅读结果，并批准或拒绝变更。
典型案例：为什么只有组件是不够的
来看每个前端团队都经历过的场景。你有一个设计系统，其中的 Card 组件在网站各处使用。每张 Card 有标题、图片、描述和一个按钮。在 Storybook 中，该组件完美无缺：经过视觉测试，所有变体都已覆盖。
有一天，一名开发者修改了站点的全局 CSS。为了提高可读性，他改了全局的 line-height 变量。Storybook 组件测试通过了：全局 line-height 不影响有自己上下文的隔离 stories。在生产环境中，以网格形式展示 12 张 Card 的目录页彻底坏了：文字变高后把按钮推了下去，Card 的高度不再一致，网格在视觉上杂乱无章。
这个缺陷在 Storybook 中不可见，因此对只测试 stories 的工具也不可见。而在 Delta-QA 中它是可见的，因为 Delta-QA 测试的是应用了全局 CSS 的真实页面。
这不是极端或人为构造的案例，而是前端开发的日常：组件生活在一个生态之中，它们的视觉表现取决于这个生态。孤立地测试组件是必要的，但那是必要条件，而不是充分条件。
结论：用什么替代 Lost Pixel
如果你的需求以 Storybook 为中心， 请寻找仍在维护的组件工具：由 Storybook 团队出品的 Chromatic 是最直接的例子（见我们的 Chromatic 与 Delta-QA 对比，以及我们关于不使用 Chromatic 的 Storybook 视觉测试的思路）。Lost Pixel 仍然可以按原样运行，但不会再有修复。
在以下情况选择 Delta-QA： 你的团队包含需要参与视觉测试的非技术角色。你需要测试完整页面和路径，而不只是隔离的组件。你想要可读的、与页面元素相关联的结果。数据主权是你的一项标准，可通过 On-Premise 方案满足。你希望以分钟而不是小时来投入运行。
在以下情况结合两个层级： 你想要完整覆盖：在 CI 流水线中用组件工具监控基础砖块，用 Delta-QA 测试完整页面、让非技术角色参与，并在每次发布前验证视觉集成。
准备好不做任何配置就测试你的真实页面了吗？ 用 Delta-QA 发起你的第一次比较，免费账户，无需银行卡。 免费使用 Delta-QA →
常见问题
Lost Pixel 还在维护吗？
没有。2026 年 4 月 22 日，其创始人宣布停止该产品并加入 Figma。GitHub 仓库已归档，最后一个 npm 版本（3.22.0）是 2024 年 11 月的。代码仍可在 MIT 许可证下使用，但不会再有修复或演进：请规划迁移。
Delta-QA 能像 Lost Pixel 一样测试 Storybook 组件吗？
Delta-QA 测试完整的网页，而不是 Storybook 中的隔离组件。如果你能通过浏览器访问你的 Storybook，理论上可以用 Delta-QA 测试你的 stories，但这不是它的主要用途。Delta-QA 的强项是测试组件在完整页面中的真实集成：这正是 Lost Pixel 没有覆盖的。
Delta-QA 能检测到与 Lost Pixel 像素比较相同的问题吗？
Delta-QA 检测元素的可见变化：颜色、大小、边距、字体、位置、边框，并给出每处变化的细节。而被修改图像的内部变化，或文本内容的不同，两种方法检测的方式则不同。
使用 Lost Pixel 需要 Storybook 吗？
不需要，Lost Pixel 也能用“page shots”模式测试完整网页。但其 Storybook 集成是它的主要价值主张。对于页面测试，包括 Delta-QA 在内的其他仍在维护的工具可以接手。
哪个工具最快上手？
Delta-QA。创建账户、打开你的网站、浏览：几分钟内就录制好了第一条路径。Lost Pixel 需要 npm、配置文件、可用的 Storybook（或页面模式），最好还要配置好 CI 流水线：对有经验的开发者来说需要一到两个小时。
如何从 Lost Pixel 迁移到 Delta-QA？
Lost Pixel 的基准是其像素逻辑特有的图像，无法迁移。你在 Delta-QA 中录制主要路径，它在第一次执行时创建自己的基准。对于开发者的 Playwright 测试，SDK Vision 每个页面只需一行即可添加 Delta-QA 检查。