视觉回归与无障碍测试技能Skill "QEVisualAccessibility"

---

name: “QE视觉无障碍” description: “视觉回归测试、响应式设计验证和WCAG无障碍合规测试。” trust_tier: 3 validation: schema_path: schemas/output.json validator_path: scripts/validate-config.json eval_path: evals/qe-visual-accessibility.yaml

---

QE视觉无障碍

目的

指导使用v3的视觉和无障碍测试能力，包括截图比较、响应式设计验证和WCAG 2.2合规验证。

激活

• 当测试视觉外观时
• 当验证响应式设计时
• 当检查无障碍合规时
• 当检测视觉回归时
• 当测试跨浏览器渲染时

快速开始

# 视觉回归测试
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")

// 无障碍审计
Task("审计无障碍", `
  运行WCAG 2.2 AA合规审计：
  - 检查颜色对比度比率
  - 验证键盘导航
  - 测试屏幕阅读器兼容性
  - 验证ARIA标签
  生成带修复建议的合规报告。
`, "qe-accessibility-agent")

视觉测试操作

1. 视觉回归

await visualTester.compareScreenshots({
  baseline: {
    source: 'production',
    pages: ['/', '/login', '/dashboard', '/settings']
  },
  current: {
    source: 'staging',
    pages: ['/', '/login', '/dashboard', '/settings']
  },
  comparison: {
    threshold: 0.1,  // 0.1% 像素差异
    antialiasing: true,
    ignoreRegions: ['#dynamic-content', '.timestamp']
  }
});

2. 响应式测试

await responsiveTester.test({
  url: 'https://example.com',
  viewports: [
    { name: 'mobile', width: 375, height: 667 },
    { name: 'tablet', width: 768, height: 1024 },
    { name: 'desktop', width: 1920, height: 1080 }
  ],
  checks: {
    layoutShift: true,
    contentOverflow: true,
    touchTargets: true,
    fontScaling: true
  }
});

3. 无障碍审计

await accessibilityAgent.audit({
  url: 'https://example.com',
  standard: 'WCAG22-AA',
  checks: {
    perceivable: {
      colorContrast: true,
      textAlternatives: true,
      captions: true
    },
    operable: {
      keyboardAccessible: true,
      noTimingIssues: true,
      navigable: true
    },
    understandable: {
      readable: true,
      predictable: true,
      inputAssistance: true
    },
    robust: {
      compatible: true,
      parseErrors: true
    }
  }
});

4. 跨浏览器测试

await visualTester.crossBrowser({
  url: 'https://example.com',
  browsers: ['chrome', 'firefox', 'safari', 'edge'],
  versions: 'latest-2',
  comparisons: {
    betweenBrowsers: true,
    betweenVersions: true,
    againstBaseline: true
  }
});

WCAG 2.2 检查清单

级别	标准	可自动测试
A	非文本内容	✅
A	信息和关系	部分
A	颜色对比度 (4.5:1)	✅
A	键盘可访问	✅
A	焦点可见	✅
AA	回流	✅
AA	文本间距	✅
AAA	增强对比度 (7:1)	✅

视觉测试报告

interface VisualReport {
  summary: {
    pagesCompared: number;
    differencesFound: number;
    passRate: number;
  };
  comparisons: {
    page: string;
    viewport: string;
    baseline: string;
    current: string;
    diff: string;
    diffPercentage: number;
    status: 'pass' | 'fail' | 'review';
  }[];
  accessibility: {
    violations: A11yViolation[];
    passes: number;
    incomplete: number;
    score: number;
  };
  responsive: {
    viewport: string;
    issues: ResponsiveIssue[];
  }[];
}

无障碍报告

interface AccessibilityReport {
  summary: {
    score: number;
    violations: number;
    warnings: number;
    passes: number;
  };
  violations: {
    id: string;
    impact: 'critical' | 'serious' | 'moderate' | 'minor';
    description: string;
    wcag: string[];
    elements: {
      selector: string;
      html: string;
      issue: string;
      fix: string;
    }[];
  }[];
  compliance: {
    wcagLevel: 'A' | 'AA' | 'AAA';
    criteriasMet: number;
    criteriasTotal: number;
  };
}

CI/CD 集成

visual_testing:
  on_pr:
    - capture_screenshots
    - compare_to_baseline
    - run_a11y_audit

  thresholds:
    visual_diff: 0.1
    a11y_violations: 0

  artifacts:
    - screenshots/
    - diffs/
    - a11y-report.html

协调

主要代理: qe-visual-tester, qe-accessibility-agent, qe-responsive-tester 协调器: qe-visual-coordinator 相关技能: qe-test-execution, qe-quality-assessment