E2Eテストテンプレート

概要

dev-workflow の /issue-test で使用するE2Eテストのテンプレート3種。 Playwright の3方式（CLI / Script / MCP）に対応する agent-browser 版。

テンプレート一覧

テンプレート	用途	対応するPlaywright方式
e2e-basic.sh	静的ページのキャプチャ	Method 1: Playwright CLI
e2e-interactive.sh	対話操作のキャプチャ	Method 2: Playwright Script
e2e-auth.sh	認証付きページのキャプチャ	Method 3: Playwright MCP

判断フロー

テスト対象の分析
    │
    ├── 単純なURLキャプチャ → e2e-basic.sh
    │   (静的ページ、SPAの初期表示)
    │
    ├── UI操作が必要 → e2e-interactive.sh
    │   (フォーム入力、ボタン操作、モーダル)
    │
    └── 認証が必要 → e2e-auth.sh
        (ログイン後の画面、セッション依存)

e2e-basic.sh

静的ページのスクリーンショット取得。dev-workflowの Method 1（Playwright CLI）の代替。

使い方

./templates/e2e-basic.sh <URL> [OUTPUT_DIR]

テンプレート内容

#!/bin/bash
set -euo pipefail

URL="${1:?Usage: $0 <URL> [OUTPUT_DIR]}"
OUTPUT_DIR="${2:-/tmp/test-captures}"
mkdir -p "$OUTPUT_DIR"

echo "[agent-browser] Basic E2E capture: $URL"

# ブラウザ起動・ページ表示
agent-browser open "$URL" --viewport 1400x900

# 初期表示キャプチャ
agent-browser screenshot "$OUTPUT_DIR/01_initial.png"
echo "  captured: 01_initial.png"

# フルページキャプチャ
agent-browser screenshot --full-page "$OUTPUT_DIR/99_fullpage.png"
echo "  captured: 99_fullpage.png"

# ダークモードキャプチャ（オプショナル）
agent-browser set media "dark"
agent-browser screenshot "$OUTPUT_DIR/01_initial_dark.png"
echo "  captured: 01_initial_dark.png"

# ブラウザ終了
agent-browser close

echo "[agent-browser] Basic E2E complete: $OUTPUT_DIR"
ls -la "$OUTPUT_DIR"

e2e-interactive.sh

対話操作を含むE2Eテスト。snapshot→参照ID取得→操作→キャプチャの流れ。

使い方

./templates/e2e-interactive.sh <URL> <SCENARIO_JSON> [OUTPUT_DIR]

シナリオJSON形式

{
  "steps": [
    { "action": "screenshot", "name": "01_initial" },
    { "action": "click", "target": "追加", "description": "追加ボタンクリック" },
    { "action": "screenshot", "name": "02_modal" },
    { "action": "fill", "target": "メールアドレス", "value": "test@example.com" },
    { "action": "screenshot", "name": "03_form_filled" },
    { "action": "select", "target": "ステータス", "value": "active" },
    { "action": "screenshot", "name": "04_selected" }
  ]
}

テンプレート内容

#!/bin/bash
set -euo pipefail

URL="${1:?Usage: $0 <URL> <SCENARIO_JSON> [OUTPUT_DIR]}"
SCENARIO="${2:?Scenario JSON file required}"
OUTPUT_DIR="${3:-/tmp/test-captures}"
mkdir -p "$OUTPUT_DIR"

echo "[agent-browser] Interactive E2E capture: $URL"

# ブラウザ起動
agent-browser open "$URL" --viewport 1400x900

# シナリオ実行
# Claude Code がシナリオJSONを解析して agent-browser コマンドを生成・実行
# 以下はテンプレートロジック

# 1. 初期スナップショット取得
SNAPSHOT=$(agent-browser snapshot -i --json)
echo "$SNAPSHOT" > "$OUTPUT_DIR/snapshot_initial.json"

# 2. 各ステップを実行
# (実際の実行はClaude Codeが動的にコマンド生成)

agent-browser close
echo "[agent-browser] Interactive E2E complete: $OUTPUT_DIR"

Claude Code による動的実行

e2e-interactive.sh は骨格テンプレートであり、実際のステップ実行は Claude Code が PR の変更内容を分析して動的にコマンドを生成する。シナリオ JSON はテスト計画のガイドとして使用する。

e2e-auth.sh

認証が必要なページのE2Eテスト。

使い方

./templates/e2e-auth.sh <URL> <CREDENTIAL_PROFILE> [OUTPUT_DIR]

テンプレート内容

#!/bin/bash
set -euo pipefail

URL="${1:?Usage: $0 <URL> <CREDENTIAL_PROFILE> [OUTPUT_DIR]}"
PROFILE="${2:?Credential profile name required}"
OUTPUT_DIR="${3:-/tmp/test-captures}"
mkdir -p "$OUTPUT_DIR"

echo "[agent-browser] Auth E2E capture: $URL (profile: $PROFILE)"

# 認証情報を適用
agent-browser set credentials "$PROFILE"

# ブラウザ起動・ログインページ表示
agent-browser open "$URL" --viewport 1400x900

# ログインフォーム操作
agent-browser snapshot -i
echo "  snapshot taken, identify login form elements..."

# Claude Code が snapshot 出力から要素を特定して操作
# 例:
# agent-browser fill @e1 "$USERNAME"
# agent-browser fill @e2 "$PASSWORD"
# agent-browser click @e3

# ログイン後のページキャプチャ
agent-browser screenshot "$OUTPUT_DIR/01_after_login.png"
echo "  captured: 01_after_login.png"

# 必要な操作・キャプチャを実行
# ...

agent-browser close
echo "[agent-browser] Auth E2E complete: $OUTPUT_DIR"

キャプチャ命名規則

dev-workflow の既存規則に準拠:

範囲	用途
01-09	初期表示・概要
10-49	機能別キャプチャ
50-89	条件分岐（ON/OFF状態等）
90-99	フルページスクリーンショット