BackstopJS 是目前唯一能稳定落地的视觉回归测试方案，因其通过 Docker 统一渲染环境解决字体、抗锯齿等底层差异，而 Autoprefixer 和 Normalize.css 无法检测渲染结果一致性。
BackstopJS 是目前唯一能稳定落地的方案，其他工具要么已废弃，要么在 CI 中频繁失败。
为什么不能只靠 Autoprefixer 或 Normalize.css？
Autoprefixer 解决的是「写的时候加前缀」，Normalize.css 解决的是「默认样式不一致」，两者都不检测「渲染结果是否真的一致」。比如：flex-wrap 在 Chrome 和 Firefox 中对换行判定略有差异，font-smoothing 在 macOS 和 Linux 容器里像素级输出不同——这些只有截图比对才能暴露。
常见错误现象包括：
- 本地
backstop test通过，CI 上 100% 失败 - 同一份 CSS，在 Safari 截图里按钮阴影偏右 1px，对比直接报错
- 响应式菜单在 Firefox 下高度多出 2px，
requireSameDimensions: true导致误判
必须用 Docker 运行 BackstopJS
字体、抗锯齿、子像素渲染、系统 DPI 这些底层差异，靠配置参数根本调不平。官方镜像 backstopjs/backstopjs 内置 Chromium + Ubuntu 环境，和绝大多数 CI（GitHub Actions、GitLab CI）容器一致。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- CI 脚本里不要用
npx backstop test，改用docker run --rm -v $(pwd):/src backstopjs/backstopjs test - 本地开发也应统一用 Docker：避免 macOS 字体渲染 vs CI Ubuntu 渲染的天然像素差
- 禁用本地 Puppeteer 缓存：在
backstop.json的engineOptions里加"args": ["--no-sandbox", "--disable-setuid-sandbox"]
scenarios 配置里三个关键字段不能省
很多人只设 url 和 selectors，结果测的不是组件，是整页噪音。
-
selectors: ["#header-nav"]—— 必须精确到 DOM 节点，避免滚动条、广告位干扰 -
onReadyScript: "puppeteer/onReady.js"—— 注入脚本触发状态，例如document.querySelector('.btn').click()测 hover 后效果 -
delay: 300—— JS 动画、transition、字体加载都需要缓冲，否则截图截到中间帧
容差别乱调：misMatchThreshold: 0.1（即 0.1% 像素差异）是安全起点；超过 0.5 就容易漏掉真实问题。
CI 中 approve 差异必须人工介入
BackstopJS 的 approve 命令会把当前测试截图覆盖为新 baseline，但 CI 环境里自动执行等于放弃审核权。真正卡住落地的，从来不是“怎么截图”，而是“谁来确认这个差异是预期变更还是 bug”。
推荐流程：
- CI 只跑
test，生成html_report - 报告链接发 Slack 或邮件，附带差异高亮图
- 前端同学点击「Approve」按钮，触发
backstop approve并提交新 baseline 到 Git - 禁止在 CI 脚本里写
&& backstop approve
最容易被忽略的是：hideSelectors 和 removeSelectors 行为完全不同——前者保留 DOM 占位，后者彻底删节点，对 flex/grid 布局影响天壤之别，选错就导致整个对比基线失效。
