选择适合项目的快照库

快照库选不好，后面折腾跑不掉。你可能会想，不就是存个截图对比吗，随便拿一个用不就行了？嗯，我以前也是这么想的，直到在某个项目里被坑得很惨——换库的成本比写测试还高。这一节，我把我踩过的坑、总结的经验全掏出来，帮你一次选对。

主流快照库，谁更靠谱？

目前市面上主流的快照库就三个：Pixelmatch、LooksSame、Resemble.js。外加一个杀手级的商业方案Percy。我列个表，直接看对比：

库名	算法类型	维护活跃度	抗噪能力	社区生态	推荐场景
Pixelmatch	像素级差异	高（每月更新）	弱	★★★★★	严格对比、CI流水线
LooksSame	结构感知	中（半年一更）	强	★★★★	跨平台渲染、SVG
Resemble.js	像素+忽略色差	低（两年未更）	中等	★★★	老项目、无维护要求
Percy (商业)	AI降噪+像素对比	非常高（团队维护）	极强	★★★★★	大规模UI回归、多浏览器

选库的核心决策因素

我习惯把决策拆成三个维度：项目需求、团队技术栈、维护活跃度。少一个维度，都可能出问题。

1. 项目需求——你到底要测什么？

• 像素级完美？ 比如设计稿验收、图标对齐。那就必须 Pixelmatch，它没有任何“容忍”，差一个像素就标红。我在项目中遇到过客户要求「每个像素都必须一致」，用 LooksSame 反而因为抗噪太强漏了 bug。
• 抗干扰？ 比如 Mac 和 Windows 字体渲染差异、抗锯齿不同。这时候 LooksSame 的结构感知算法更靠谱，它忽略那些人类眼注意不到的小差异。
• 批量与性能？ CI 里几千张截图对比，速度很重要。Pixelmatch 纯 Rust 编译的 wasm 版本极快，LooksSame 稍慢但可接受。

2. 团队技术栈——别搞出额外依赖

你是 React 项目？还是 Vue？或者后端用 Python 生成图片？

• 前端项目（Node.js 环境）：Pixelmatch / LooksSame 直接 npm install，零配置。
• 纯 Python 项目：可以用 pixelmatch-py 或者直接调系统命令，但注意 Python 生态下的快照库普遍不活跃。我建议用 Node 子进程调用走通。
• 跨端项目（RN、Flutter）：LooksSame 对 canvas 的模拟更友好，Pixelmatch 需要额外处理 alpha 混合。

3. 维护活跃度——这决定了你一年后要不要返工

我有个原则：半年不更新的库，直接淘汰。为什么？

• Compose 版本、浏览器引擎、CI 系统（比如 GitHub Actions、Jenkins）都在变，库必须跟进。
• 安全漏洞没人修。
• issues 里有未解决的 bug，你只能自己改源码。

查维护活跃度很简单：上 GitHub 看最近 3 个月的 commit 频率、issue 响应时间、Release 标签。Pixelmatch 几乎月月有 commit，LooksSame 大概半年一次大版本，Resemble.js 已经停了。Percy 商业版有专人维护，但一年几万块，不是每个团队都扛得住。

选择决策流程图

下面这张 SVG 图把整个选库逻辑串起来了。你可以直接贴在团队文档里，方便新同学理解。

说白了，选库其实就是三问：要完美还是抗噪？团队用 JS 还是别的？库还活着吗？按这个流程走，基本不会踩大坑。

补一句：商业方案要不要考虑？

预算充足且要跨浏览器覆盖率（Chrome、Firefox、Safari），直接上 Percy。它内置了抗噪、批处理、可视化 diff，还能在 PR 评论区贴图。我自己在 ToB 项目里用过一年，除了贵，没毛病。

但你要是个人项目或小团队，别折腾——Pixelmatch 自己搭，半小时搞定。