SuperAPI AI 工具集

playwright-testing

测试与质量

查看项目

更新于 10-15 15:34

技能介绍

用途

Playwright Accessibility Testing 是一个可复用的知识模块,用于在浏览器中执行基于 Playwright 和 @axe-core/playwright 的无障碍测试。它面向需要在真实渲染环境下验证无障碍行为的场景,覆盖键盘操作、动态状态、响应式视口、渲染后对比度以及无障碍树等维度。

主要能力

模块提供 5 个 MCP 工具:

工具 用途 是否依赖 @axe-core/playwright
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 扫描模式:全页扫描(withTags 指定 wcag2a、wcag2aa、wcag21a、wcag21aa、wcag22aa)、限定元素扫描(include 指定选择器)、单规则验证(withRules 指定规则并断言无违规)、交互后扫描(点击后等待内容可见再扫描)。

键盘遍历方面提供记录 Tab 顺序的代码片段,以及在连续 Tab 中同一元素重复获得焦点时判定键盘陷阱的逻辑。焦点管理方面提供弹窗打开后焦点应位于框内、Tab 不应逃逸、Escape 关闭并将焦点返回触发元素的测试模板,以及跳转链接将焦点移至主内容的测试模板。

CI 集成部分提供 GitHub Actions 工作流示例(检出、安装 Node 20、npm ci、安装 chromium、启动开发服务器、等待服务器、运行无障碍测试、失败时上传测试产物)以及 Playwright 配置示例(testDir 指向 tests/a11y、baseURL、仅使用 Chromium、webServer 配置)。

适用场景

适用于需要在真实浏览器中验证键盘可达性、焦点顺序与焦点可见性、键盘陷阱、动态展开内容的无障碍、响应式重排、文本对比度、触控目标尺寸以及名称/角色/值等无障碍属性的开发与测试流程。

限制与降级

模块提供优雅降级机制与能力矩阵:Playwright 与 @axe-core/playwright 均可用时支持全部 5 个工具;仅 Playwright 可用时支持键盘、对比度、无障碍树 3 个工具;Playwright 不可用时全部不可用,回退到代码审查加 axe-core CLI。模块同时给出不可用与部分可用时的用户提示信息,以及对应的安装命令。扫描工具需按环境实际安装依赖,浏览器层面 @axe-core/playwright 以 Chromium 验证为准。

WCAG 覆盖

覆盖的 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 名称、角色、值(无障碍树、状态扫描)。

暂未提供

关于该模块的收费与价格信息、具体支持的浏览器版本范围、执行性能数据等,资料中暂未提供。