SuperAPI AI 工具集

kb-playwright-testing

测试与质量

查看项目

更新于 10-15 20:14

技能介绍

用途:这是一个可复用的知识模块,用于基于浏览器的无障碍测试,依赖 Playwright 与 @axe-core/playwright。它本身是参考数据,不是审查器。

主要能力:提供五个 MCP 工具。run_playwright_keyboard_scan 做 Tab 顺序遍历与键盘陷阱检测;run_playwright_state_scan 点击触发后用 axe-core 扫描展开内容;run_playwright_viewport_scan 做多视口 axe-core 扫描与触摸目标测量;run_playwright_contrast_scan 在 CSS 层叠后计算对比度;run_playwright_a11y_tree 获取浏览器无障碍树快照。后两者及键盘扫描不依赖 @axe-core/playwright。

使用方式:用 AxeBuilder 做整页、限定元素或单规则扫描,例如 new AxeBuilder({ page }).withTags(['wcag2a','wcag2aa','wcag21a','wcag21aa','wcag22aa']).analyze()。可 include 指定选择器、withRules 指定规则。交互后扫描需先点击并等待可见。键盘遍历通过循环 page.keyboard.press('Tab') 记录焦点元素;连续三次同一元素聚焦视为键盘陷阱。焦点管理测试覆盖模态框焦点陷阱、Escape 关闭并返回触发元素、跳转链接移动焦点。CI 可用 GitHub Actions 配合 npx playwright install --with-deps chromium 与 npx playwright test tests/a11y/。

适用场景:WCAG 覆盖包括 1.3.1、1.4.3、1.4.6、1.4.10、2.1.1、2.1.2、2.4.3、2.4.7、2.5.5、2.5.8、4.1.2。

限制:@axe-core/playwright 仅在 Chromium 验证,配置建议 browserName: 'chromium'。未安装 Playwright 时全部行为测试不可用,需回退到代码审查与 axe-core CLI;仅缺 @axe-core/playwright 时状态与视口扫描不可用。安装命令:npm install -D playwright @axe-core/playwright && npx playwright install chromium。