html5 注释不能执行测试，仅可辅助说明；应使用 data-testid 属性标记待测元素，配合结构化注释（如 ）明确测试意图，测试逻辑必须写在独立测试文件中。
HTML5 注释本身不支持测试用例标注
HTML 的 <!-- ... --> 是纯文档级注释，浏览器和构建工具默认忽略它，无法被测试框架识别或执行。所谓“在 HTML 里写测试用例”，实际是指：在 HTML 文件中以可读、可维护的方式标记出哪些元素/行为需要被测试，方便人工核对或配合自动化脚本提取。
用 data-test-id 或 data-testid 标记待测元素
这是目前最主流、最可靠的做法。React Testing Library、Cypress、Playwright 等工具原生支持 data-testid 属性，它语义清晰、不影响样式和逻辑，且比 class 或 id 更稳定（不随 UI 重构轻易变动）。
- 不要用
id="submit-btn"做断言依据——ID 可能重复或被动态生成 - 避免用
class="btn-primary"——样式类可能重命名或复用 - 统一使用
data-testid="login-submit-button"，命名采用 kebab-case，语义化描述用途而非外观
<button data-testid="login-submit-button">登录</button> <input data-testid="user-email-input" type="email">
在 HTML 注释中补充测试意图（仅用于人工协作）
如果团队需在源码中快速查看“这个区域要测什么”，可在对应 DOM 上方加结构化注释。注意：这仅作说明，不能替代真实测试代码。
- 用固定前缀如
<!-- TEST: ... -->，便于 grep 检索 - 写明触发动作 + 期望结果，例如：
<!-- TEST: 点击后跳转到 /dashboard，且 URL 包含 utm_source=test --> - 避免模糊描述如“检查是否正常”，要具体到状态、文本、属性或网络请求
<!-- TEST: 点击后显示 .error-message，文本为 "邮箱格式不正确" --> <div class="form-group"> <input type="email" name="email"><div class="error-message"></div> </div>
别把测试逻辑塞进 HTML 注释里
曾见过有人写：<!-- assert: document.querySelector('[data-testid="price"]').textContent === "$99.99" -->。这种写法无效——HTML 注释不会被 JS 解析执行，还污染源码、误导新人。
- 测试逻辑必须写在真实的测试文件中（如
login.test.js） - HTML 只负责提供可定位、可预期的标记（
data-testid）和必要上下文（注释说明） - CI 流程中若依赖 HTML 注释做校验，说明架构已偏离前端测试最佳实践
真正起作用的是 data-testid 的一致性和测试代码的覆盖度，而不是注释写得多详细。很多人花时间美化注释，却漏掉给关键交互节点补上 data-testid，这才是最常被忽略的落地缺口。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
