/moai e2e

ブラウザ自動化ツールを使用して E2E (エンドツーエンド) テスト を作成・実行するコマンドです。

概要

E2E テストは、実際のユーザーの視点からアプリケーションが正しく動作するかを検証します。/moai e2e は3つのブラウザ自動化ツールをサポートし、プロジェクト環境に適したツールを自動選択します。

ユーザージャーニーを自動的に発見し、テストスクリプトを生成し、実行結果をレポートします。GIF 録画機能で視覚的な検証も可能です。

使用法

# 自動ツール選択で E2E テスト実行
> /moai e2e
 
# Playwright を指定
> /moai e2e --tool playwright
 
# GIF 録画を含む
> /moai e2e --record
 
# 特定 URL を対象
> /moai e2e --url http://localhost:3000
 
# 特定のユーザージャーニーのみ実行
> /moai e2e --journey login
 
# ヘッドレスモードを無効化 (デバッグ用)
> /moai e2e --headless false

サポートされるフラグ

ブラウザ自動化ツール

ツール比較

自動選択ロジック

--tool フラグを指定しない場合、タスク特性に応じて最適なツールを自動選択します:

実行プロセス

/moai e2e は5段階 (+インストール段階) で実行されます。

Phase 0: ツール選択・インストール

3つのツールのインストール状態を並列で確認します:

# 自動検出コマンド (並列実行)
npx agent-browser --version     # Agent Browser
npx playwright --version         # Playwright
# Chrome MCP ツールの可用性確認    # Claude in Chrome

インストールが必要な場合:

Phase 1: ジャーニーマッピング

--journey フラグがない場合、アプリケーションを分析して主要なユーザージャーニーを自動発見します:

• プロジェクトドキュメント (.moai/project/product.md) の分析
• ルート定義の分析 (routes.ts, urls.py, router.go)
• フォーム要素、認証フロー、CRUD 操作の特定
• クリティカルなユーザーパスのマッピング (ログイン、主要機能、エラー処理)

Phase 2: テストスクリプト生成

選択されたツールに合わせたテストファイルを生成します:

Playwright テストに含まれるもの:

• Page Object Model パターン
• ステップごとのアサーション
• スクリーンショットキャプチャ
• ネットワークレスポンス検証
• アクセシビリティチェック (@axe-core/playwright)

Phase 3: テスト実行

Phase 4: 録画 (オプション)

--record フラグ使用時:

Phase 5: レポート

## E2E テストレポート

### 使用ツール: Playwright CLI

### 結果サマリー
| ジャーニー | ステータス | 所要時間 | スクリーンショット |
|-----------|-----------|---------|-------------------|
| ログイン | PASS | 2.3秒 | 3枚 |
| 決済 | FAIL | 5.1秒 | 4枚 |

### 失敗詳細
- 決済 (ステップ4): /confirmation へのリダイレクト期待、/error に遷移
  - スクリーンショット: e2e/screenshots/checkout-step4.png
  - エラー: TimeoutError: 30000ms タイムアウト超過

### 録画 (--record 使用時)
- e2e/recordings/login_flow.gif
- e2e/recordings/checkout_process.gif

### カバレッジ
- テスト済みユーザージャーニー: 5/7
- カバー済みクリティカルパス: 3/3
- テスト済みエラーシナリオ: 2/4

エージェント委任チェーン

エージェントの役割:

よくある質問

Q: どのツールを選ぶべきですか?

ほとんどの場合、Playwright CLI が最良の選択です。CI/CD サポート、クロスブラウザテスト、低トークンコストを提供します。AI ベースの探索には Agent Browser、視覚的デバッグには Claude in Chrome を使用してください。

Q: CI/CD パイプラインで使用できますか?

Playwright CLI と Agent Browser は CI/CD をサポートします。Claude in Chrome は実際の Chrome ブラウザが必要なため、CI/CD では使用できません。

Q: GIF 録画のトークンコストは?

Playwright/Agent Browser は CLI trace を使用するため、追加トークンコストはありません。Claude in Chrome の GIF 録画は MCP ラウンドトリップにより、トークンコストが高くなります。

Q: 既存の E2E テストがある場合は?

既存のテストを検出し、既存パターンに合わせて新しいテストを追加します。既存テストは上書きされません。

関連ドキュメント

• /moai coverage - カバレッジ分析
• /moai review - コードレビュー
• /moai fix - ワンショット自動修正