HTML结构混乱导致测试脚本频繁失效，根源在于DOM不稳定；应采用语义化标签（如nav、main）、data-testid、alt/aria-label等稳定锚点，并确保DOCTYPE、lang、charset等元信息完备，避免div堆砌与表现型class命名。
HTML结构混乱会导致测试脚本频繁失效
DOM结构不稳定，是前端自动化测试失败的常见根源。比如用 div 堆砌导航栏，测试脚本靠 class 名定位 $('.nav-item')，一旦某次改版把 class 改成 nav-link 或加了嵌套层级，所有相关用例就挂掉。
语义化标签天然提供稳定锚点：nav、main、article 这些元素名不会随样式调整而变，比 class 更可靠。Lighthouse 的“Accessibility”审计项里，document.querySelector('nav') 的稳定性远高于 document.querySelector('.js-nav')。
- 避免用
div模拟语义容器（如用div class="header"代替header） - 表单控件必须配
label，否则getByLabelText()类测试 API 会找不到目标 - 动态渲染内容优先用
data-testid属性，而不是依赖 class 或文本内容
alt 和 aria-label 缺失让可访问性测试直接报错
axe 或 Lighthouse 的可访问性扫描不是“锦上添花”，而是 CI 流程里硬性卡点。一张没写 alt 的图片，或一个没配 aria-label 的图标按钮，在 axe.run() 结果里就是明确的 image-alt 或 button-name 错误，测试不通过。
更实际的影响是：React Testing Library 的 screen.getByAltText()、screen.getByRole('button', { name: /提交/ }) 这类查询方式，全依赖这些属性存在。没有它们，就得退回到脆弱的 screen.getByTestId()，等于放弃语义化测试优势。
立即学习“前端免费学习笔记（深入）”；
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
-
img标签必须有alt，装饰图写alt=""，非装饰图写准确描述 - 纯图标按钮（无文字）必须带
aria-label，例如<button aria-label="关闭弹窗">✕</button> - 自定义组件（如封装的
Toggle）要透传aria-*属性，不能在内部丢弃
未声明 lang 或 charset 会让部分测试环境解析异常
某些测试运行器（如 Jest + jsdom）对文档元信息敏感。没写 <html lang="zh-CN">，jsdom 默认用 en-US，可能导致基于 locale 的组件逻辑（如日期格式化）在测试中行为偏移；没声明 <meta charset="UTF-8">，中文文本可能被截断或乱码，使 textContent 断言失败。
这类问题往往只在 CI 环境暴露，本地跑得通——因为浏览器容错强，而 jsdom 更严格。W3C 验证器会标出缺失项，但很多人忽略它，直到测试流水线突然红了才回头查。
- 每个 HTML 文件顶部必须有
<!DOCTYPE html>和<html lang="xx-XX"> -
<head>内第一行 meta 必须是<meta charset="UTF-8"> - 不要依赖 HTTP header 传递 charset，HTML 内联声明才是测试环境唯一可靠来源
嵌套过深或 class 命名随意拖慢测试调试效率
当测试失败时，你得快速定位 DOM 片段。如果看到这样的结构：<div class="a"><div class="b"><div class="c"><div class="d">…</div></div></div></div>，光靠 devtools 点开就要 5 秒；而 <section><article><header><h2> 一眼就能看清层级意图。
kebab-case 的 class 命名（如 user-card-header）比 userCardHeader 或 box1 更易 grep、更易被测试代码引用。Prettier + HTMLHint 能自动约束缩进和命名，但得先配置规则，否则编辑器不会报错。
- 块级嵌套建议不超过 4 层，超深时优先拆成独立组件或用
section/aside划分语义区域 - class 名禁用
left、red、box这类表现型词，改用sidebar-nav、error-banner - CI 中集成
htmlhint，规则启用attr-lowercase、attr-quote-style、id-class-ad-disabled
真正影响可测试性的，从来不是某一行代码写得“够不够漂亮”，而是结构是否稳定、语义是否可预期、元信息是否完备。这些点看似琐碎，但每一条都在测试执行路径上埋了雷——炸不炸，只取决于你什么时候改需求、换框架，或者哪天 CI 环境升级了 jsdom 版本。
