SuperAPI AI 工具集

qe-visual-accessibility

测试与质量

查看项目

更新于 10-16 03:48

技能介绍

用途:用于 v3 的视觉与无障碍测试,覆盖截图对比、响应式设计验证与 WCAG 2.2 合规检查。适用于测试视觉外观、验证响应式设计、检查无障碍合规、检测视觉回归及跨浏览器渲染。

主要能力:视觉回归(截图基线对比、像素差异检测、忽略动态区域、可指定选择器范围);响应式测试(多视口布局偏移、内容溢出、触控目标、字体缩放检查);无障碍审计(按 WCAG 2.2 AA 检查色彩对比、键盘可访问性、屏幕阅读器兼容与 ARIA 标签);跨浏览器测试(chrome、firefox、safari、edge 之间与版本间对比及基线对比)。浏览器自动化统一使用 qe-browser 技能(Vibium 引擎),vibium 二进制由 aqe init 安装。

使用方式:命令行可用 aqe visual test --baseline production --current staging、aqe visual responsive --url https://example.com --viewports all、aqe a11y audit --url https://example.com --standard wcag22-aa、aqe visual cross-browser --url https://example.com --browsers chrome,firefox,safari。也可通过 Task 分派 qe-visual-tester、qe-accessibility-agent 等智能体执行;并提供 TypeScript API(compareScreenshots、responsiveTester.test、accessibilityAgent.audit、crossBrowser)。基线对比示例:vibium go 目标 URL 后运行 node .claude/skills/qe-browser/scripts/visual-diff.js --name 名称,可加 --threshold 0.001 或 --selector 限定区域。

输出与集成:生成视觉报告(页面数、差异数、通过率、逐页差异百分比与状态)和无障碍报告(评分、违规项及影响等级、WCAG 条目、涉及元素与修复建议)。可在 CI/CD 中于 PR 阶段截图、对比基线、运行 a11y 审计,并设置阈值(如 visual_diff 0.1、a11y_violations 0)与产物 screenshots/、diffs/、a11y-report.html。

限制:部分 WCAG 条目(如信息与关系)仅能部分自动测试;具体定价、许可、平台支持范围与依赖细节资料暂未提供。