html无法直接集成可访问性测试脚本——axe-core等工具依赖浏览器环境与js执行上下文，需通过playwright等驱动在构建产物上运行，并确保字体、css、hydration就绪后扫描断言。
直接在 HTML 架构中“集成”可访问性回归测试脚本不可行——axe-core、Playwright 或 jest-axe 都不运行在纯静态 HTML 环境里，它们依赖 JavaScript 执行上下文、DOM 操作能力或浏览器自动化驱动。所谓“集成”，实际是指把测试逻辑嵌入构建/测试流程，并确保 HTML 输出能被这些工具稳定解析和扫描。
为什么不能把 axe.run() 直接塞进 script 标签里跑
你可能会看到有人在 HTML 底部加一段：
<script src="node_modules/axe-core/axe.min.js"></script><script>axe.run().then(console.log)</script>
这在本地双击打开 HTML 文件时看似能执行，但会立刻报错：TypeError: Cannot read properties of undefined (reading 'document') 或 axe is not defined。原因很实在：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
-
axe-core依赖完整的浏览器环境（比如window、document、getComputedStyle），而本地 file:// 协议下多数现代浏览器禁用跨域资源加载，axe.min.js根本没加载成功 - 即使加载成功，
axe.run()在页面未完成 hydration（React/Vue）或字体/样式未就绪时执行，结果严重失真（比如漏掉color-contrast违规） - 没有断言机制：它只打印结果，不 fail 构建，也不生成报告，对 CI 完全无用
真正可用的集成路径：HTML → 构建产物 → Playwright 测试流程
可访问性回归测试必须发生在 HTML 已部署或已构建为静态产物之后，且由具备控制权的测试驱动器执行。主流可靠路径只有一条：
- 确保你的 HTML 是构建产物（如 Vite/Vue CLI/Next.js 的
dist/或out/目录下真实 HTML 文件） - 用
Playwright启动一个真实 Chromium 实例，page.goto('file:///path/to/dist/index.html')或page.goto('http://localhost:3000') - 注入
axe-core并等待关键节点就绪：await page.waitForFunction(() => document.querySelector('#root')?.children.length > 0) - 执行扫描：
const results = await page.evaluate(() => (window as any).axe.run({ runOnly: ['wcag2aa'] })) - 断言：
expect(results.violations).toHaveLength(0)，失败时用console.error(results.violations.map(v => [v.id, v.help].join(': ')))快速定位
CI 中 HTML 可访问性失败却查不到原因？先盯这三个点
本地全绿、CI 报一堆 heading-order 或 landmark-unique 错误？不是代码问题，是环境导致 axe “看错了”：
-
font-family未加载完成：CI 容器里没有系统字体，自定义 Web Font 加载慢，getComputedStyle返回默认值，触发错误对比。加await page.waitForFunction(() => getComputedStyle(document.body).fontFamily !== 'serif') - CSS 未生效：HTML 引入的是相对路径 CSS（如
./style.css），但在file://协议下 404，axe 扫描的是无样式的 DOM。改用http-server起服务再测 - JS 框架 hydration 不一致：React/Vue 的 SSR 输出在 CI 中 hydration 失败（比如缺少 polyfill 或
process.env.NODE_ENV未设），导致 DOM 结构与本地不同。检查page.content()输出确认实际 HTML 是否匹配预期
最易被忽略的一点：HTML 架构本身无法承载“回归”能力——快照比对（toMatchAriaSnapshot()）或历史 violation 记录，都依赖测试框架的状态管理。你得把 HTML 当作被测物，而不是测试容器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
