生产环境html质量需用puppeteer端到端检测dom结构异常，监听page.evaluate()返回值、加显式超时等待、避免仅校验源码，并将指标接入prometheus+alertmanager实现业务影响驱动的告警。
生产环境的 HTML 代码质量没法靠人工肉眼巡检，必须用自动化手段卡住底线——核心是监控渲染结果是否符合预期，而非检查源码格式。
怎么用 Puppeteer 检测 DOM 结构异常
真实页面加载后，DOM 可能因 JS 错误、资源加载失败或 SSR 渲染不一致而缺失关键节点。Puppeteer 是目前最可靠的端到端检测工具。
- 重点监听
page.evaluate()返回值，而不是只看page.content()的 HTML 字符串——后者可能包含未执行 JS 的占位结构 - 检测逻辑写在浏览器上下文里，例如：
document.querySelector('header nav')是否为null，比服务端解析 HTML 更贴近用户真实体验 - 避免在
page.goto()后立即执行断言，加await page.waitForSelector('main', { timeout: 5000 })确保关键区域已挂载 - 超时设置必须显式传入，否则默认 30s，会拖慢告警响应速度
为什么不能只用 HTMLLint 或 prettier-check 做生产校验
这些工具只校验源码字符串，对以下情况完全无感知：
- SSR 模板中
{{ user.name }}渲染为空字符串导致<div class=""> 出现非法空 class <li>前端路由切换后，<code>document.title未更新，SEO 抓取到错误标题 - 动态插入的
<script async src="..."></script>因 CDN 故障返回 404，但 HTML 源码本身语法合法 - Vue/React 组件中
v-if或useEffect逻辑出错，导致最终 DOM 缺失data-testid属性，自动化测试脚本失效 - 用
express启一个轻量端点，每次请求触发一次完整页面检测，返回{ "status": "ok", "checks": [{ "name": "header-exists", "passed": true }] } - 在响应头里加
X-Check-Timestamp和X-Page-Url，方便排查告警对应的具体页面和时间点 - 用
prom-client注册自定义指标，例如html_check_failed_total{page="checkout",check="submit-button"} 1，避免告警时只能看到“某处失败” - Alertmanager 的
for时间设为2m，防止单次网络抖动误报；同时配置group_by: [page, check]，避免 checkout 页和首页的错误混在一起
如何把 HTML 质量指标接入 Prometheus + Alertmanager
不要把 Puppeteer 脚本直接塞进 CronJob，得包装成可暴露指标的 HTTP 服务。
真正难的不是跑通检测流程，而是定义哪些 DOM 断言算“不可接受”——比如 footer 缺失可能只是 UI 小问题，但 form[action] 为空就是功能阻断。每个断言都得和业务影响挂钩，否则告警再多也等于没告。
