html无法直接驱动测试，需通过data-test-id和data-status等语义化属性构建稳定测试契约；必须依据dom规范取原生属性值，并用mutationobserver监听变化，ssr场景需确保hydration后属性保留。
HTML 本身不执行逻辑，不能直接“驱动”测试；所谓“HTML 实现自动化测试驱动开发”，本质是用 HTML 结构 + 属性作为测试契约，让测试脚本能稳定、可预期地定位和断言状态。关键不在写 HTML，而在怎么写、怎么读、怎么验证。
用 data-test-id 和 data-status 做稳定定位与状态标记
靠 class 或 innerText 定位元素在重构或国际化时极易断裂。真实项目中必须用显式声明的 data-test-id 和语义明确的 data-status：
-
data-test-id只负责存在性：比如<button data-test-id="submit-btn">提交</button>，测试先查document.querySelector('[data-test-id="submit-btn"]')确认组件挂载 -
data-status才表达状态：比如<div data-test-id="payment-form" data-status="loading"></div>，测试再取el.dataset.status判断是否进入加载态 - 避免混用：
data-test-id="counter-5"是反模式——数值应拆到data-value="5"，ID 保持静态可读
get_attribute("disabled") 和 is_selected() 才是真实状态依据
浏览器原生属性（attribute）和 JS 属性（property）不等价，自动化脚本必须按 DOM 规范取值：
- 判断按钮是否禁用：用
element.get_attribute("disabled")（返回"disabled"或None），不是element.is_enabled()—— 后者对 CSS 禁用（pointer-events: none）无效 - 判断 checkbox 是否勾选：用
element.is_selected()，不是element.get_attribute("checked")—— JS 动态设置后前者返回True，后者可能仍为None - 输入框当前值：用
element.get_attribute("value")，不是element.text—— 对普通<input>，text永远为空
用 MutationObserver 监控 data-* 属性变化，别轮询
data- 属性不会自动触发事件，但页面状态变化往往依赖它。手动 setInterval 轮询既低效又易漏判：
- 正确做法是绑定
MutationObserver，监听目标元素的attributes选项，并指定attributeFilter: ['data-status'] - 注意：observer 不捕获初始 HTML 中的属性值，只响应 JS 后续修改；首次检查需在
DOMContentLoaded后立即读一次dataset.status - 自定义元素中若需响应
data-step变化，必须在类中显式声明static get observedAttributes() { return ["data-step"]; }，且回调里attr是完整字符串"data-step"，不是"step"
SSR 水合后 data-* 属性丢失怎么办
Vue/React 服务端渲染（SSR）时，data-test-id 可能被客户端 hydration 过程移除，导致测试脚本找不到元素：
- Vue 用户：确保组件根节点上显式保留该属性，或在
mounted()钩子中补回this.$el.setAttribute('data-test-id', '...') - React 用户：用
useEffect(() => { el.setAttribute('data-test-id', '...') }, [])，但更推荐在 JSX 中直接写死——现代框架默认保留data-属性 - 通用兜底：测试启动前加一段等待逻辑，如
await page.waitForFunction(() => document.querySelector('[data-test-id="xxx"]'))，比硬等 timeout 更可靠
最常被忽略的一点：所有基于 data- 的监控都假设 JS 已执行完毕。如果状态由异步 API 更新，MutationObserver 捕获不到变化，就得配合 page.waitForResponse() 或 page.waitForFunction() 等待数据落地后再查 dataset。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
