将 axe-core 接入 Playwright 测试
出现无障碍回归问题时让构建失败。
将 axe-core 接入 Playwright 测试 是 CoddyKit 上的免费 Web Accessibility Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Web Accessibility Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Web Accessibility Academy 课程共包含 4 节课。
从手动扫描到自动化测试
点击浏览器扩展适合检查单个页面。要在每次提交时保护每个页面，您需要将 axe-core 接入自动化测试套件。
为什么选择 Playwright
Playwright 通过代码驱动真实浏览器，因此 axe 会针对用户实际看到的页面运行，包括 JavaScript 渲染的内容。
桥接软件包
axe-core/playwright 软件包负责连接两者。请将它与 Playwright 一起安装，这样您的测试就能注入并运行 axe 引擎。
npm install --save-dev @axe-core/playwright导入构建器
在测试文件中导入 AxeBuilder。它是一个辅助工具，可以将 axe-core 注入当前页面，并为您收集 results。
import AxeBuilder from '@axe-core/playwright';先导航，再 analyze
首先让 Playwright 加载页面，然后在一个全新的 AxeBuilder 上调用 analyze，扫描浏览器中当前渲染的内容。
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();断言零项违规
结果中包含一个 violations 数组。通过测试的页面应有一个空数组，因此请断言其长度为零，以便任何问题都使测试失败。
expect(results.violations).toEqual([]);完整测试用例
将这些步骤组合起来，您就拥有了一个真正的无障碍测试，它与其他 Playwright 规范一样在 CI 中运行。
test('home page has no a11y violations', async ({ page }) => {
await page.goto('/');
const results = await new AxeBuilder({ page }).analyze();
expect(results.violations).toEqual([]);
});交互后进行测试
真正强大之处在于扫描动态状态。请先打开模态框或展开菜单，再进行 analyze，这样 axe 检查的就是用户实际触发的界面。
await page.getByRole('button', { name: 'Open menu' }).click();
const results = await new AxeBuilder({ page }).analyze();缩小范围
您可以使用 include 将扫描集中到某个区域，这在测试单个组件、避免页面其他部分造成干扰时非常方便。
new AxeBuilder({ page }).include('#signup-form').analyze();选择规则集
使用 withTags 仅运行与某项标准相关的规则，例如 WCAG 2.1 AA 标准，这样测试就能符合您的一致性目标。
new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa']).analyze();记住自动化的上限
通过的 Playwright 测试仍然只能覆盖问题中可自动化检查的部分。它们可以补充手动屏幕阅读器检查，但绝不能取代后者。
快速检查
请回忆如何让测试因无障碍问题而失败。
回顾：流水线中的无障碍
AxeBuilder 将 axe-core 注入真实浏览器，您分析每个状态，并断言零项违规。现在，无障碍回归问题会自动阻止构建。✅
用 AI 导师学习 HTML — 免费
在浏览器中编写并运行真实代码，获得全天候 AI 导师的即时帮助，并在网页或应用中继续学习。
- 课程
- 30
- 课程
- 120
常见问题解答
「将 axe-core 接入 Playwright 测试」课时是免费的吗？
是的 — 「将 axe-core 接入 Playwright 测试」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Web Accessibility Academy 课程的其余内容，请升级到 CoddyKit PRO。 Web Accessibility Academy 课程共包含 4 节课。
「将 axe-core 接入 Playwright 测试」这节课中我会学到什么？
出现无障碍回归问题时让构建失败。 你通过在浏览器中直接运行的动手代码来练习 Web Accessibility Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Web Accessibility Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Web Accessibility Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「将 axe-core 接入 Playwright 测试」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Web Accessibility Academy 课中编写并运行代码吗？
能。每节 Web Accessibility Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。
此课程中的所有课时
- 自动化能捕获什么，不能捕获什么
- 使用 axe DevTools 和 Lighthouse 扫描
- 将 axe-core 接入 Playwright 测试
- 无障碍检查与 CI 门禁