动态HTML质量需运行时检测，因静态扫描无法捕获v-if、innerHTML等生成的真实DOM；必须用Puppeteer+axe-core在真实浏览器中按路由逐页检测，排除非语义属性并手动触发状态，快照比对应标准化动态值且由QA确认baseline，CI按风险等级设定阈值并回溯JS源码。
动态 HTML 代码质量无法靠静态扫描兜底，必须在 JS 渲染后捕获真实 DOM 状态——否则 v-if 控制的区块、x-data 初始化的结构、innerHTML 注入的内容全被漏检。
为什么 html-validate 无法发现运行时 HTML 问题
它只校验源码字符串，对以下情况完全无感：
-
v-if="showHeader"为 false 时，<header>根本不生成，但校验器仍会检查它是否闭合 -
document.body.innerHTML = "<div id='app'><p>动态内容</p></div>"—— 这段字符串不会被任何 pre-commit 工具扫描到 - React/Vue SSR 与 CSR 混合渲染后，
aria-hidden被 JS 动态移除，静态规则无法感知
真正要拦的不是“写错了”，而是“运行起来错了”。
Puppeteer + axe-core 必须在页面级执行，而非单元素
axe-core 只有在真实浏览器环境里才能读取渲染后的 DOM 属性、计算可访问性树、识别 role 变更。但很多人只在 document.body 上跑一次 axe.run()，结果漏掉关键路径。
立即学习“前端免费学习笔记（深入）”；
- 对每个核心路由（如
/login、/product/123）单独启动页面，等待 JS 加载完成再调用axe.run() - 排除框架自动生成的属性：在
axe.configure()中显式忽略data-v-*、data-testid等非语义属性，避免误报 - 关键节点需手动触发状态：比如点击 tab 切换后，再跑一次
axe.run()，否则aria-selected="true"类变更不会被捕获
快照比对必须排除非确定性内容
直接比对 document.body.outerHTML 会因时间戳、随机 ID、埋点参数等导致每次结果不同，失去可比性。
- 提取关键结构快照：只序列化
body下所有含role、aria-、id、class的元素，并标准化其属性顺序 - 过滤动态值：
id="user-card-78432"→id="user-card-{{ID}}"；data-timestamp="1720445280"→ 删除该属性 - baseline 必须人工确认：首次生成快照后，由 QA 和前端共同核对，确保它代表“当前可接受的正确状态”
CI 中失败阈值不能设为“零新增 violation”
动态内容天然存在波动，强行卡死会导致流水线频繁误伤。关键是区分风险等级和归属。
- critical 级别（如
document has no <title></title>、img element missing required alt）新增 ≥1 条即失败 - serious 级别（如
heading order not sequential）允许新增 ≤2 条，但需在 PR 描述中注明原因并关联 issue - 所有 violation 必须带 source 映射：通过 Puppeteer 的
page.evaluate回溯到触发该 DOM 的 JS 文件与行号，避免甩锅式修复
最常被跳过的环节是：没让测试人员参与 baseline 定义，也没把快照 diff 图嵌入 CI 报告——结果开发看到 “failed”，却不知道哪一行 DOM 变了、为什么变、该不该改。
