浏览器解析HTML表格时自动补全或修正结构导致DOM不一致，应使用快照、语义化定位及验证caption/thead/tbody/th/colgroup等语义标签。
HTML表格重构后，直接用 document.querySelectorAll('tr') 断言行数或结构，测试在 Chrome/Firefox/Safari 中必然失败——这不是你代码写错了，是浏览器解析容错机制天然不一致。
为什么表格 DOM 结构在不同浏览器里会“变样”
Chrome 会自动补全缺失的 <tbody>，Safari 可能丢弃非法嵌套后的节点，Firefox 甚至拒绝插入未闭合的 <code><p></p> 后续内容。一段含 <div>
<p>text</p>
<table><tr><td>data</td></tr></table>
</div> 的 HTML，在三端执行 document.querySelectorAll('tr').length 可能返回 1、0、undefined。
常见错误现象：
- 本地跑通的结构断言，CI 上 Firefox 报 “no matching nodes”
- 重构后表格视觉正常，但 E2E 脚本突然找不到第 3 行的
td - 人工检查 DOM 面板看到的结构，和脚本里
el.innerHTML读出来的不一致
必须用 <template></template> 做跨引擎结构快照
<template></template> 不渲染、不执行脚本、不加载资源，只存原始字符串——这是唯一能绕过浏览器解析差异的原生机制。
立即学习“前端免费学习笔记（深入）”；
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
实操建议：
- 把待测表格 HTML 字符串写进
<template id="test-table"></template> - 用
template.content.cloneNode(true)获取纯净副本，再操作 DOM - 避免用
el.innerHTML = htmlStr注入，它触发实时解析，立刻掉进浏览器差异坑里 - 对快照做断言时，只比对
tagName、attributes（过滤掉id/class中哈希）、textContent（忽略空格换行）
定位表格内容时，别碰 table 和 tr 标签名
页面里常有多个表格，By.tagName("table") 拿到的几乎总是错的；嵌套表格中 tr 更是满屏乱飞。
真正稳的定位方式：
- 优先用
data-testid="user-table"这类语义锚点，且打在关键列头或操作按钮上，比如data-testid="user-table-header-email" - 限定父级的 CSS：用
table[data-testid="user-table"] tbody tr:nth-child(2) td[data-label="status"]，而不是table tr td:nth-child(3) - XPath 用
//td[contains(normalize-space(.), "admin")]，不是//td[text()="admin"]——前者能吞掉前后空格和换行 - 验证表头是否正确：检查
th[scope="col"]是否存在，别只看文本是不是“姓名”
重构后必须重验的三个语义硬指标
视觉和功能正常 ≠ 表格语义没退化。以下三点必须写进回归测试用例，否则上线后会被屏幕阅读器用户投诉。
- 检查
<caption></caption>是否存在且非空：document.querySelector('table caption')?.textContent.trim() - 验证
<thead> 和 <code><tbody> 是否显式写出（不能靠浏览器补全），否则打印时表头不重复 <li>确认 <code>th元素有正确的scope属性：th[scope="row"]或th[scope="col"]，不能全写成th[scope="auto"]或干脆没有
最容易被忽略的是 <colgroup></colgroup> 和 <col> 的缺失——它们不影响显示，但会让 CSS column-width 和打印样式彻底失效，而这种问题只有在真实打印场景下才会暴露。
