axe-core 不能直接在纯 HTML 页面运行自动化测试，需浏览器上下文、测试框架或 Node.js 环境；常见错误因 DOM 未就绪或缺少断言机制；最小可运行场景是 DevTools 控制台手动执行 axe.run()；自动化必须集成 Playwright、Vitest/Cypress 或 Karma；规则需显式配置 WCAG 级别、iframe 和 Shadow DOM 支持。
axe-core 不能直接在纯 HTML 页面里“运行自动化测试”——它需要执行环境（如浏览器上下文、测试框架或 Node.js 运行时）来调用 axe.run() 并读取真实 DOM。 纯静态 HTML 文件双击打开后，axe.run() 会报错或静默失败，因为缺少初始化时机、异步等待能力与测试断言机制。
为什么直接在 HTML 中写 axe.run() 常常没反应
常见错误现象包括：ReferenceError: axe is not defined、TypeError: axe.run is not a function，或控制台无输出但测试未执行。根本原因是：
-
<script src="axe.min.js"></script>加载完成 ≠ axe 已就绪 —— 它依赖 DOM 渲染完成，且某些框架（如 React、Vue）的动态内容需额外等待 - 纯 HTML 没有测试断言（如
expect(results.violations).toHaveLength(0)），即使检测出问题也无法触发失败 - 无障碍问题常出现在交互后（如展开菜单、提交表单），静态 HTML 无法模拟这些状态
真正能跑通的最小可运行场景：浏览器 DevTools 控制台手动验证
这是最轻量、无需构建工具的验证方式，适合快速排查单页问题：
- 确保页面已完全加载（含 JS 渲染），再打开开发者工具 → Console 标签页
- 粘贴并执行：
await axe.run().then(r => console.table(r.violations.map(v => ({ rule: v.id, impact: v.impact, nodes: v.nodes.length })))); - 若报
axe is not defined，先手动注入：const s = document.createElement('script'); s.src = 'https://cdn.jsdelivr.net/npm/axe-core@4.7.0/dist/axe.min.js'; document.head.appendChild(s); - 注意：此方式不适用于 CI 或回归测试，仅作调试用
CI/CD 或本地自动化中必须走测试框架集成
要让 axe-core 真正“自动化”，必须绑定到一个能控制页面生命周期、支持断言、可复现状态的测试环境。主流路径只有三种：
立即学习“前端免费学习笔记（深入）”；
-
Playwright + @axe-core/playwright：适合端到端测试，能自动等待 Turbo/ReactPy 等框架渲染完成，
AxeBuilder封装了重试与 iframe 处理逻辑 -
Vitest/Cypress + axe-testing-library：适合组件级快照测试，
toHaveNoViolations断言直接抛错，配合render()可测 React Suite、Buefy 等库的挂载态 -
Karma + karma-axe-core：适合 iView、老 Vue 项目，需在
karma.conf.js中显式加入'axe-core'到frameworks数组，否则插件不激活
容易被忽略的关键点：规则范围与上下文选择
很多人以为 axe.run() 默认查全部，其实默认只检查可见、可聚焦、非隐藏节点，且不包含 iframe 内容。实际使用必须明确：
- 用
runOnly: { type: 'tag', values: ['wcag2aa'] }限定 WCAG 2.1 AA 级，避免误报低优先级规则（如heading-order在 SSR 场景下易假阳性） - 若页面含
<iframe>，必须传{ included: ['iframe'] }或显式调用axe.run(iframe.contentDocument) - 对 Shadow DOM 组件（如 Theatre 的
<ui-panel>），需启用shadowDom: true配置，否则内部节点全被跳过 - ReactPy/Vue 等框架中，
axe.run()必须在await nextTick()或await page.waitForTimeout(100)后执行，否则拿到的是骨架 DOM
