security-visual-testing

セキュリティビジュアルテスト

ブラウザーエンジン

すべてのブラウザー自動化に、qe-browser フリートスキル（.claude/skills/qe-browser/）を使用します。Vibium エンジン（10MB の Go バイナリ、WebDriver BiDi）は aqe init によって自動的にインストールされます。セキュリティビジュアルワークフローでは、qe-browser は標準のビジュアルテストに 2 つの機能を追加します。スクリーンショットを保存する前にページコンテンツからプロンプトインジェクションパターンをスキャンする check-injection.js と、データ漏えいリクエストを検出する no_failed_requests を含む 16 種類の型付きチェックを備えた assert.js です。

# Before storing any screenshot, scan the page
vibium go "$TARGET_URL"
vibium wait load
node .claude/skills/qe-browser/scripts/check-injection.js --include-hidden
INJ=$?
if [ $INJ -ne 0 ]; then
  echo "Prompt-injection findings — do NOT store screenshot"
  exit $INJ
fi
# Safe to proceed with visual-diff
node .claude/skills/qe-browser/scripts/visual-diff.js --name "${PAGE_NAME}"

<default_to_action> セキュリティを考慮したビジュアルテストを実施する場合：

1. 遷移前に URL を検証します（悪意のあるパターンを確認します）
2. スクリーンショットを保存する前に PII をスキャンします（機密データをマスクします）
3. ビューポートを並列でキャプチャします（モバイル、タブレット、デスクトップ）
4. ベースラインと比較します（ビジュアルのリグレッションを検出します）
5. アクセシビリティを監査します（WCAG 2.1 AA 準拠）

セキュリティビジュアルテストのクイックチェックリスト：

• URL 検証（javascript:、data:、file: スキームがないこと）
• PII 検出（メールアドレス、電話番号、SSN、クレジットカード、API キー）
• ビジュアルリグレッション（差分のしきい値 < 0.1%）
• ビューポートのカバレッジ（320px、768px、1024px、1440px）
• アクセシビリティスコア（axe-core の合格率 > 90%）

重要な成功要因：

• スクリーンショットを保存する前に、必ず PII をマスクします
• 対象となるすべてのビューポートを並列でテストします
• ベースラインをバージョン管理に保存します
• ビジュアルに変更を加えるたびに、アクセシビリティ監査を実行します </default_to_action>

クイックリファレンスカード

使用する場面

シナリオ	このスキルを使用しますか？	理由
ログインページのテスト	はい	PII（パスワード、メールアドレス）が含まれます
ビジュアルリグレッションスイート	はい	ビューポートの並列テストとベースラインの比較が可能です
決済フォーム	はい	クレジットカードデータをマスクする必要があります
公開されているマーケティングページ	場合によります	機密データが含まれる可能性がある場合のみ使用します
API のみのテスト	いいえ	代わりに security-testing スキルを使用します

主な機能

機能	説明	パフォーマンス
URL 検証	遷移前に悪意のある URL をブロックします	<5ms
PII 検出	6 種類以上の機密データを検出します	<100ms
ビューポートの並列テスト	4 つのビューポートを同時にテストします	4 倍高速
ビジュアルリグレッション	しきい値を設定できるピクセル差分	<500ms
アクセシビリティ監査	WCAG 2.1 A/AA/AAA 準拠	<2s

---

ワークフロー

1. セキュリティビジュアル監査（フルパイプライン）

# Run complete security + visual audit
aqe test visual-audit --url https://example.com --security --accessibility

手順：

1. URL の安全性を検証します（悪意のあるスキームをブロックします）
2. ページをスキャンしてセキュリティ上の問題（XSS、インジェクションパターン）を検出します
3. 4 つのビューポートでスクリーンショットを並列にキャプチャします
4. 保存済みのベースラインと比較します
5. アクセシビリティ監査（axe-core）を実行します
6. 統合レポートを生成します

2. PII を含まないスクリーンショット

# Capture screenshot with automatic PII masking
aqe screenshot --url https://example.com/profile --pii-safe

PII 検出パターン：

• メールアドレス：[email protected]
• 電話番号：+1-555-123-4567
• クレジットカード：4111-1111-1111-1111
• SSN：123-45-6789
• API キー：sk_live_...、AKIA...
• パスワード：type="password" のフォームフィールド

マスキング方法：

• デフォルト：高強度でぼかします
• オプション：redact（黒いボックス）、pixelate（モザイク）、blur（ぼかし）

3. レスポンシブビジュアル監査

# Test visual consistency across viewports
aqe test responsive --url https://example.com --viewports mobile,tablet,desktop

デフォルトのビューポート：

名前	幅	高さ	デバイス
mobile	320px	568px	iPhone SE
tablet	768px	1024px	iPad
desktop	1440px	900px	MacBook
wide	1920px	1080px	Full HD

---

AQE v3 との統合

BrowserSecurityScanner と併用する

import { BrowserSecurityScanner } from '@agentic-qe/v3';

const scanner = new BrowserSecurityScanner(memory, {
  urlValidation: { enabled: true },
  piiDetection: { enabled: true, maskBeforeSave: true },
  parallelViewports: { maxConcurrent: 4 }
});

const result = await scanner.scanUrl('https://example.com', {
  viewports: ['mobile', 'tablet', 'desktop'],
  accessibility: true
});

TrajectoryAdapter と併用する

import { TrajectoryAdapter } from '@agentic-qe/v3';

const adapter = new TrajectoryAdapter(memory);

// Record testing trajectory for learning
await adapter.startTrajectory('security-visual-test', {
  url: 'https://example.com',
  testType: 'security-visual'
});

// ... perform tests ...

await adapter.endTrajectory(trajectoryId, {
  success: true,
  piiFound: 3,
  visualRegressions: 0,
  accessibilityScore: 95
});

---

エージェントの連携

メモリの名前空間

aqe/security-visual/
├── baselines/*          - Visual regression baselines
├── screenshots/*        - Captured screenshots (PII masked)
├── reports/*            - Audit reports
└── trajectories/*       - Learning trajectories

フリートの連携

const fleet = await FleetManager.coordinate({
  strategy: 'security-visual-audit',
  agents: [
    'qe-visual-tester',      // Visual regression
    'qe-security-scanner',   // URL/PII scanning
    'qe-accessibility-auditor' // WCAG compliance
  ],
  topology: 'parallel',
  maxConcurrent: 4
});

---

エラー処理

エラー	原因	解決方法
URL_BLOCKED	悪意のある URL パターンが検出されました	URL を確認し、javascript:/data: を削除してください
PII_DETECTED	スクリーンショットから機密データが検出されました	マスキングを有効にするか、手動で墨消ししてください
BASELINE_MISSING	比較用のベースラインがありません	まず --update-baseline を指定して実行してください
VIEWPORT_TIMEOUT	ブラウザーが応答しませんでした	タイムアウトを延長するか、並列数を減らしてください
ACCESSIBILITY_FAILED	WCAG 違反が見つかりました	違反を確認し、問題を修正してください

---

関連スキル

• visual-testing-advanced - セキュリティ機能を含まない純粋なビジュアルテスト
• security-testing - ビジュアルコンポーネントを含まないセキュリティテスト
• accessibility-testing - アクセシビリティのみのテスト
• qe-visual-accessibility - AQE v3 のビジュアルドメインスキル

---

パフォーマンス目標

指標	目標	実測値
URL 検証	<5ms	2ms
PII 検出	<100ms	45ms
単一ビューポートのキャプチャ	<2s	1.2s
4 ビューポートの並列処理	<3s	2.1s
ビジュアル差分	<500ms	320ms
アクセシビリティ監査	<2s	1.5s
パイプライン全体	<10s	7.2s