DOM Snapshot对比不能直接用于动态HTML质量回归，因其会因时间戳、随机ID、滚动位置、表单值等运行时状态频繁误报；真正可用的快照需分层捕获结构、状态与行为，并配套人工审查机制。
DOM Snapshot对比不能直接用于动态HTML的质量回归——它会因时间戳、随机ID、滚动位置、表单值等运行时状态频繁误报，本质是拿“不可控输出”做断言。
为什么 outerHTML 快照在动态页里基本不可用
直接序列化 document.documentElement.outerHTML 或 container.innerHTML 生成快照，看似简单，但对现代前端应用几乎必然失败：
- Vue/React 渲染的
data-v-xxxx/data-reactroot属性每次构建都变 -
input.value、textarea.value、select.selectedIndex不体现在 HTML 字符串中，快照里全是初始空值 - Canvas 内容、WebGL 状态、滚动偏移（
scrollTop）完全丢失，回滚或比对时毫无意义 - 第三方脚本注入的
id、class（如统计 SDK、A/B 测试工具）引入不可控噪声
真正可用的 DOM Snapshot 必须分层捕获状态
不是存结构，而是存可复现的运行时关键字段。只对业务容器（如 id="app"）做快照，避免全量 DOM：
- 用
cloneNode(true)深拷贝容器节点，再手动补全：input.value、textarea.value、select.selectedIndex、checkbox.checked - 记录
container.scrollTop和container.scrollLeft，恢复时用requestAnimationFrame延迟赋值，避开骨架屏干扰 - 含
<canvas>时，必须调用canvas.toDataURL()（注意跨域）或ctx.getImageData()保存像素数据，而非依赖 outerHTML - 跳过
<script>标签执行：快照中只存src列表，回滚时不重复加载已存在的第三方脚本
回归验证时别比整个快照，聚焦可预期字段
全量快照比对既慢又脆弱。真实项目中应拆解为结构 + 状态 + 行为三层断言：
立即学习“前端免费学习笔记（深入）”；
- 结构层：用
container.querySelectorAll('[data-testid]').length验证关键组件是否渲染，不依赖 class 名或嵌套深度 - 状态层：提取
JSON.stringify({ form: { name: 'Alice' }, scroll: 420 })，和上一版 diff，用jest-diff输出语义化差异 - 行为层：不快照按钮点击效果，而是监听
click事件后检查document.activeElement或 URL 变更，用真实交互链路代替静态截图 - 若仍需快照文件，先清洗干扰项：
snapshotHTML.replace(/data-v-\w+/g, '').replace(/id="[^"]*"/g, '')，但必须人工确认每次变更是否合理
快照不是回归终点，而是触发人工审查的锚点
DOM 快照本身无法判断 UI 是否“正确”，只能指出“变了”。真正容易被忽略的是：快照内容是否稳定、变更是否可解释、回滚是否破坏事件绑定。比如一个 div 节点在快照中多出 data-snapshot-id="v2"，这本身没问题；但如果回滚后该节点上原有的 addEventListener('click', handler) 消失了，那快照就从保障变成了破坏源。所以任何基于快照的回归流程，都必须配套人工审查机制——不是看 diff 红绿块，而是确认“这个变化是否由预期代码修改引起，且未引发副作用”。
