qe-visual-accessibility

QE ビジュアルアクセシビリティ

目的

スクリーンショットの比較、レスポンシブデザインの検証、WCAG 2.2 準拠の確認など、v3 のビジュアルテストおよびアクセシビリティテスト機能の使用方法を説明します。

有効化

• ビジュアルの表示をテストするとき
• レスポンシブデザインを検証するとき
• アクセシビリティへの準拠を確認するとき
• ビジュアルのリグレッションを検出するとき
• ブラウザー間のレンダリングをテストするとき

クイックスタート

# Visual regression test
aqe visual test --baseline production --current staging

# Responsive design test
aqe visual responsive --url https://example.com --viewports all

# Accessibility audit
aqe a11y audit --url https://example.com --standard wcag22-aa

# Cross-browser test
aqe visual cross-browser --url https://example.com --browsers chrome,firefox,safari

エージェントのワークフロー

// Visual regression testing
Task("Run visual regression", `
  Compare staging against production:
  - Capture screenshots of key pages
  - Detect pixel differences
  - Flag significant visual changes
  - Generate visual diff report
`, "qe-visual-tester")

// Accessibility audit
Task("Audit accessibility", `
  Run WCAG 2.2 AA compliance audit:
  - Check color contrast ratios
  - Verify keyboard navigation
  - Test screen reader compatibility
  - Validate ARIA labels
  Generate compliance report with fix suggestions.
`, "qe-accessibility-agent")

ブラウザーエンジン

このスキルのすべてのブラウザー自動化では、qe-browser のフリートスキル（Vibium エンジン）を使用します。.claude/skills/qe-browser/SKILL.md を参照してください。vibium バイナリは aqe init によってインストールされます。

ビジュアルテストの操作

1. ビジュアルリグレッション（qe-browser 経由）

# Establish baselines for the pages we care about
for path in / /login /dashboard /settings; do
  slug=$(echo "$path" | tr '/' '_' | sed 's/^_//' || echo root)
  vibium go "https://production.example.com$path" && vibium wait load
  node .claude/skills/qe-browser/scripts/visual-diff.js --name "baseline_${slug:-root}"
done

# Compare staging against those baselines
for path in / /login /dashboard /settings; do
  slug=$(echo "$path" | tr '/' '_' | sed 's/^_//' || echo root)
  vibium go "https://staging.example.com$path" && vibium wait load
  node .claude/skills/qe-browser/scripts/visual-diff.js \
    --name "baseline_${slug:-root}" --threshold 0.001  # 0.1% pixel diff
done

タイムスタンプやリアルタイムの件数などの動的な領域を無視するには、それらを除外するセレクターに差分の範囲を限定します。

node .claude/skills/qe-browser/scripts/visual-diff.js \
  --name hero --selector "main > .content"

従来のプログラムによる TypeScript API（シェルコマンドの実行よりこちらを好むテストで引き続き利用できます）。

await visualTester.compareScreenshots({
  baseline: {
    source: 'production',
    pages: ['/', '/login', '/dashboard', '/settings']
  },
  current: {
    source: 'staging',
    pages: ['/', '/login', '/dashboard', '/settings']
  },
  comparison: {
    threshold: 0.1,  // 0.1% pixel difference
    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