qe-security-visual-testing

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

<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 のビジュアルドメインスキル

---

Performance Targets

Metric	Target	Measured
URL validation	<5ms	2ms
PII detection	<100ms	45ms
Single viewport capture	<2s	1.2s
4-viewport parallel	<3s	2.1s
Visual diff	<500ms	320ms
Accessibility audit	<2s	1.5s
Full pipeline	<10s	7.2s