e2e-flow-verifier

E2E フローベリファイアー

qe-browser フリートスキル（Vibium エンジン）を使ってユーザーフローを実行し、各ステップで状態を検証して、スクリーンショットと DOM スナップショットを ZIP にまとめて証拠として記録する、プロダクト検証スキルです。

有効化

/e2e-flow-verifier [flow-name]

依存関係

このスキルは、すべてのブラウザー自動化に .claude/skills/qe-browser/ を使用します。vibium バイナリは aqe init によって自動的にインストールされます。コマンドの詳細については qe-browser/SKILL.md を参照してください。

フロー検証パターン（qe-browser + バッチ + アサート）

フローを JSON バッチプランとして定義し、qe-browser バッチランナーで実行します。

# flows/{{flow-name}}.json
cat > /tmp/{{flow-name}}.json <<'EOF'
[
  {"action": "go",      "url": "{{base_url}}"},
  {"action": "wait_load"},
  {"action": "fill",    "selector": "[data-testid=email]",    "text": "{{test_user}}"},
  {"action": "fill",    "selector": "[data-testid=password]", "text": "{{test_password}}"},
  {"action": "click",   "selector": "[data-testid=login-btn]"},
  {"action": "wait_url","pattern": "/dashboard"},
  {"action": "assert",  "checks": [
    {"kind": "url_contains",    "text": "/dashboard"},
    {"kind": "selector_visible","selector": "[data-testid=dashboard]"},
    {"kind": "no_console_errors"},
    {"kind": "no_failed_requests"}
  ]},
  {"action": "click",   "selector": "[data-testid={{action_element}}]"},
  {"action": "assert",  "checks": [
    {"kind": "text_visible", "text": "{{expected_text}}"}
  ]}
]
EOF

# Record evidence AND drive the flow
vibium record start --screenshots --snapshots --name "{{flow-name}}"
node .claude/skills/qe-browser/scripts/batch.js --steps "@/tmp/{{flow-name}}.json"
FLOW_EXIT=$?
vibium record stop -o "test-results/{{flow-name}}/evidence.zip"
exit $FLOW_EXIT

いずれかのステップが失敗すると、バッチランナーは 0 以外の終了コードを返すため、CI ゲートでは通常の $? チェックを使用できます。

証拠の収集

フロー検証のたびに、vibium record は以下を含む ZIP を生成します。

1. スクリーンショット — アクションごとに 1 枚と、失敗箇所を注釈したスクリーンショット
2. DOM スナップショット — 各インタラクションの前後
3. タイムライン — URL とタイミングを含む、順序付けられたイベントログ
4. コンソール／ネットワークログ — インラインで取得

必要に応じて、vibium har-export を使って別途 HAR 1.2 ネットワークログを出力します。

UI と並行したバックエンド状態のアサート

qe-browser の assert.js で使えるチェック種別には、ページから行われたバックエンド呼び出しを取得するネットワークアサートが含まれます。

node .claude/skills/qe-browser/scripts/assert.js --checks '[
  {"kind": "response_status", "url": "/api/{{resource}}", "status": 200},
  {"kind": "request_url_seen", "url": "/api/{{resource}}"}
]'

ページから発生しない API 呼び出しについては、別のステップで API チェックを実行します（curl + jq、または専用の API テストスキルを使用）。

検証する一般的なフロー

フロー	ステップ	重要なアサート
サインアップ	登録 → メールを確認 → ログイン	url_contains /dashboard、no_failed_requests
購入	閲覧 → カートに追加 → チェックアウト → 支払い	response_status /api/orders 201、text_visible "Thank you"
プロフィール	ログイン → プロフィールを編集 → 保存	再読み込みしたフォームの value_equals、no_console_errors
検索	クエリを入力 → フィルター → 結果を選択	element_count .result >= 1、text_visible <query>

実行間での認証状態の再利用

# Once: log in and save state
vibium go "{{base_url}}/login"
vibium fill "[data-testid=email]" "$USERNAME"
vibium fill "[data-testid=password]" "$PASSWORD"
vibium click "[data-testid=login-btn]"
vibium wait url "/dashboard"
vibium storage -o test-results/auth/state.json

# Every subsequent run
vibium storage restore test-results/auth/state.json
vibium go "{{base_url}}/dashboard"

注意事項

• DOM の変更後は再マッピングする — Vibium の @e1 参照はページ遷移によって無効になります。vibium diff map で変更点を確認し、必要に応じて再マッピングしてください。
• デプロイ時にセレクターが機能しなくなることがあります — CSS クラスより data-testid を優先してください。
• 認証トークンには有効期限があります — 実行ごとにログインし直すか、storage スナップショットをローテーションしてください。
• 証拠 ZIP は大きくなります — CI では失敗した実行のみを保存し、N 日後に GC してください。
• 生の Playwright は使用しないでください — このスキルは以前、@playwright/test を使用していました。Playwright のネットワークインターセプト（page.route）が必要な場合は、別のスキルで使用し、ステップとして呼び出してください。このスキルに依存関係を再導入しないでください。