直接比对HTML字符串无效，因浏览器引擎对HTML解析、盒模型、字体回退等渲染行为存在细微差异，导致相同HTML渲染结果不一致；应基于渲染树做像素级或DOM结构级比对。
为什么直接比对 HTML 字符串没用
HTML 字符串一致 ≠ 渲染一致。浏览器（Chromium/WebKit/Gecko）对同一段 HTML 的解析、盒模型计算、字体回退、行高处理、甚至空格折叠规则都不同。比如 white-space: normal 在 Safari 中可能多折一次行，Firefox 对 基线偏移的处理比 Chrome 小 0.8px——这些差异肉眼难察，但会破坏 PDF 导出或截图比对。
自动化测试若只校验 document.body.innerHTML 或服务端吐出的 HTML 字符串，等于在测“写没写错”，而不是“画没画对”。真正要捕获的是渲染树（render tree）落地后的像素布局和语义结构。
用 Playwright + Vision AI 做跨引擎像素级比对
Playwright 支持 Chromium、Firefox、WebKit 三端并行启动，配合 Vision AI 工具（如 Percy 或自建 OpenCV 差分服务），可实现带容差的视觉回归测试。
- 必须显式指定 viewport 和 device scale：例如
webkit: { viewport: { width: 1280, height: 720 }, deviceScaleFactor: 2 }，否则 WebKit 默认用 1x 缩放，导致字体渲染模糊、rem 计算偏差 - 禁用抗锯齿和亚像素渲染干扰：在 launch 选项中加
--disable-lcd-text --disable-remote-fonts（仅 Chromium），WebKit 则需 patchWKWebViewConfiguration.defaultWebpagePreferences关闭字体平滑 - 截图前强制触发重排：调用
await page.evaluate(() => window.dispatchEvent(new Event('resize')))，避免因初始尺寸未稳定导致布局抖动 - 容差阈值设为 3%～5%，但对文字区域单独设更低阈值（
text: { threshold: 0.5 }），防止字体 hinting 差异误报
用 DOM 快照代替 HTML 字符串做结构一致性断言
比起比对原始 HTML，提取标准化 DOM 快照更可靠：过滤掉动态生成的 class、内联 style、data-* 属性（除 data-test-id），保留 tag、id、aria-*、role、textContent 结构。
- 用
page.evaluate(() => { ... })提取精简快照，例如只保留nodeName、id、getAttribute('role')、textContent.trim().slice(0, 50) - 对表格、列表等语义结构做深度校验：检查
table > tbody > tr是否存在、ol > li的value属性是否连续，而非只看标签名 - 注意 Shadow DOM：默认快照不包含
shadowRoot内容，需显式递归遍历el.shadowRoot?.children并合并到主快照 - SSR 水合后属性丢失？快照应在
page.waitForLoadState('networkidle')后立即执行，避开 hydration 阶段的临时 DOM 不一致
字体与盒模型的隐性差异必须单独建模
WebKit 的 box-sizing 默认行为、Firefox 对 border-radius 裁剪的处理、Chromium 的 font fallback 顺序，都会让相同 CSS 在不同引擎下产出不同 layoutMetrics。不能靠“看起来一样”蒙混过关。
- 注入调试脚本获取真实布局数据：
page.evaluate(() => Array.from(document.querySelectorAll('*')).map(el => ({ tag: el.tagName, offsetWidth: el.offsetWidth, clientTop: el.clientTop, fontSize: getComputedStyle(el).fontSize })) - 对关键容器（如页眉、卡片、按钮）做 layout diff：比较
offsetWidth、scrollHeight、getBoundingClientRect()，容忍 ±2px 偏差，但top/left偏差超过 1px 即告警 - 字体检测必须走
document.fonts.check()+getComputedStyle(el).fontFamily双校验，避免 fallback 到系统默认字体（如 macOS 的 San Francisco vs Windows 的 Segoe UI）引发行高突变 - Flex/Grid 兼容性兜底：对
gap、place-items等新属性，快照中应记录是否被降级为 margin 模拟，并在测试报告中标记“非原生支持”
最常被跳过的一步是：没把字体加载完成作为测试就绪条件。用 document.fonts.ready.then(...) 等待所有 @font-face 加载完毕再截图，否则 WebKit 下常出现空白字形或回退失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
