HTML结构健全性需验证document.documentElement、head、body三者均存在且嵌套正确，缺一即结构残缺，会导致自动化断言失效；须在页面加载后立即检查运行时DOM状态，而非仅依赖源码或渲染表象。
HTML结构健全性不是“看起来能渲染就行”，而是必须可被解析器稳定识别、可被辅助技术准确理解、可被后续自动化流程可靠提取——不满足这点，前端自动化测试的断言就容易失效或误报。
怎么用脚本批量检查 DOM 根结构是否完整
很多自动化测试跑通但线上出问题，根源是测试环境里 DOM 已被 JS 动态篡改，而测试用例没覆盖这个前提。真实校验不能只看 HTML 源码，得在页面加载后立刻抓取运行时状态。
- 执行
document.documentElement，确认它存在且 tagName 是"HTML"；若为null或类型不对，说明文档未正确初始化 - 检查
document.head和document.body是否都非null，且document.children.length === 1（即只有html一个子节点） - 用
document.querySelectorAll('html > head, html > body').length !== 2快速判断是否严格嵌套——注意：head或body被挂到document下（而非html内）是 SSR hydrate 失败的典型信号
为什么 XPath 断言 //body//div[@class="main"] 有时查不到元素
不是选择器写错了，而是 body 根本没内容——DOM 结构残缺导致所有后代查询失效。这种问题在 Puppeteer/Playwright 中尤其隐蔽，因为页面看似渲染完成，但 document.body.childElementCount 可能为 0。
- 在 waitForNavigation 后加一步：等待
document.body && document.body.children.length > 0，否则直接 fail - 避免依赖
document.querySelector('body')的返回值做后续操作——它可能不为空，但里面没子节点 - 若使用自定义 fixture 加载 HTML 片段（如 Jest + jsdom），需手动设置
jsdom.options.resources = 'usable'并确保传入完整文档结构，否则head和body可能被省略
W3C Validator 报 Element head is missing a required instance of child element title 怎么办
这不是警告，是硬性结构缺陷。缺少 <title> 不仅影响 SEO，更会导致部分自动化工具（如 Lighthouse、axe-core）跳过可访问性扫描，或让某些 headless 浏览器拒绝执行后续脚本。
立即学习“前端免费学习笔记（深入）”；
-
<title>必须存在且非空，即使只是占位符如<title>Test Page</title> - 动态生成 title 的场景（如 React Router），需在 mount 后同步检查
document.title是否已设置，不能只信 SSR 输出 - CI 流程中用
tidy -errors -quiet或html-validate替代人工粘贴——它们能批量读取文件并输出 exit code，适合接入 pipeline
结构健全性最易被忽略的点：它不报错，也不阻断渲染，但会让所有基于 DOM 树的自动化逻辑变得脆弱。一旦 head 被移除、body 被清空、或根节点被替换，后续所有 selector、XPath、甚至 document.querySelector(':root') 都可能返回意料之外的结果。
