backstopjs截图全黑或空白的主因是页面未完成渲染就截图，需配置delay、readyevent或字体加载等待；同时须确保基线与测试环境一致，并用ignoreregions或selectors排除动态内容。
视觉回归测试不是“给HTML加个测试框架就行”，它本质是图像比对——你得先有可比的图，再有靠谱的比对逻辑。没基线图、没稳定渲染环境、没忽略动态区域的机制，跑出来的全是误报。
backstopjs init 之后为什么截图全黑或空白？
常见错误现象：backstop test 执行后生成的 test/ 目录里全是黑图或白图，diff/ 全红（全差异）。
- 页面没等加载完就截图：默认
delay是 0，但 HTML 可能依赖 JS 渲染、字体加载、异步数据；必须显式加"delay": 1000或用"readyEvent": "backstopjs-ready"配合 JS 注入触发 - 无头浏览器没加载字体/CSS：BackstopJS 默认用 Chromium，但某些自定义字体或
@import规则在无头模式下会失效；建议在onBeforeScript中注入document.fonts.load()等待字体就绪 - viewport 高度不够导致滚动截断：比如设了
{"width": 375, "height": 667}，但页面实际高度 2000px，只截顶部一屏；改用"hideSelectors": ["#header", ".ad-banner"]+"removeSelectors": ["#live-timestamp"]清掉干扰元素，再配"captureBeyondViewport": true
pixelmatch 和 resemble.js 差在哪？
两者都做像素比对，但行为差异直接影响误报率：
-
pixelmatch更轻量、速度快，但默认不抗噪：哪怕 1px 抗锯齿偏移、1px 渐变色差都会标红；需手动调threshold（推荐 0.1–0.2）和includeAA: true -
resemble.js自带模糊预处理和颜色容差，更适合 UI 场景；但输出热力图需要额外解析，且对透明通道处理更敏感；若页面含rgba(0,0,0,0.01)这类极低透明度，容易误判为变化 - 真实项目建议组合用：用
pixelmatch做快速初筛（CI 流水线），用resemble.js生成人工复核用的热力图（本地调试）
怎么跳过时间戳、用户头像这类动态内容？
不忽略它们，每次测试必失败。关键不是“截图时隐藏”，而是“比对时排除”：
- 用
selectors精确限定只比对静态区域：比如只比["main", ".product-grid"]，避开.timestamp、.user-avatar - 用
ignoreRegions（BackstopJS 支持）或ignoreAreas（Playwright 插件）画矩形坐标框，直接跳过像素计算 - 对必须存在的动态元素，改用 CSS 覆盖：测试环境注入
body[data-test="true"] .timestamp::before { content: "2026-05-07"; }，让时间固定
最易被忽略的一点：基线图必须在与测试环境完全一致的浏览器版本、DPI 设置、字体栈下生成。换一台 Mac 截的 baseline，放到 Linux CI 上跑 test，连阴影模糊半径都可能差 1px——这不是工具问题，是环境漂移。别省那一步 docker run -v $(pwd):/src mcr.microsoft.com/playwright:focal bash -c "cd /src && npm install && npx backstop test"。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
