html本身不能做自动化测试，因其仅为静态标记语言，无执行能力、断言机制或运行时监控接口；必须依赖javascript测试框架（如playwright、vitest）驱动dom操作与断言。
HTML 本身不支持自动化测试或质量监控——它只是静态标记语言，没有执行能力、断言机制或运行时监控接口。
为什么不能直接用 HTML 做自动化测试
自动化测试需要可编程的执行环境（如浏览器上下文、JS 运行时、DOM 操作能力）和断言逻辑，而纯 index.html 文件打开即渲染，无法主动触发点击、校验状态、捕获异常或上报指标。
- 常见错误现象：
TypeError: document.querySelector(...) is null—— 测试脚本未等 DOM 加载完成就执行 - 使用场景：有人把测试用例写在
<script></script>标签里，手动刷新页面看 console 输出，这不算自动化，也无法集成 CI - 性能影响：内联脚本若含大量断言逻辑，会拖慢首屏渲染，且无法按需启用/禁用
必须搭配 JavaScript 测试框架才能落地
真正可行的路径是：HTML 作为被测载体，由外部 JS 测试框架驱动。核心依赖不是 HTML，而是 window、document 和可注入的测试入口。
- 推荐组合：
Vitest+@testing-library/dom（单元/集成），或Playwright（E2E） - 关键差异：
Playwright启动真实 Chromium 实例加载你的index.html；Vitest则在 JSDOM 环境中模拟 DOM，更快但兼容性略低 - 容易踩的坑：用
jsdom测试时，IntersectionObserver、ResizeObserver等 API 默认不可用，需手动 mock
质量监控需额外注入运行时探针
HTML 页面上线后想监控组件加载失败、资源耗时、JS 错误，得靠运行时脚本采集 + 上报服务，不是靠 HTML 标签本身。
- 最小可行探针示例：
performance.getEntriesByType('navigation')获取首屏时间，window.addEventListener('error')捕获未处理异常 - 配置项注意：
report-uri或report-to需服务端配合接收，否则日志发不出去 - 兼容性影响：旧版 Safari 不支持
PerformanceObserver，需降级用performance.timing
最常被忽略的一点：HTML 中的 data-testid 属性看似是“测试专用”，但它只是辅助定位，不提供任何自动化能力——没 JS 驱动，它就是个普通字符串。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
