---
name: e2e
description: chrome-devtools-mcp を使用して実装内容を E2E テストする。テスト開始前にユーザーへ必要情報を確認し、ブラウザ操作で検証する。
allowed-tools: Read, Grep, Glob, Shell, mcp__chrome-devtools__*
disable-model-invocation: true
---

## 目的

chrome-devtools-mcp を通じてブラウザを操作し、実装した機能が意図通りに動作することを E2E テストで確認する。
テスト開始前に必要情報をユーザーから収集し、不足している情報はエージェントが自律的に補完してユーザーに確認を取る。

## 実行フロー

### Step 1: スキルを呼び出す

スキルは引数付きで呼び出せる※ただし、引数として渡せるのは のみ:

```
/e2e
/e2e save
/e2e run
```

- **run 引数あり**: 以降のステップをスキップし、@.[agent_name]/e2e/.e2e.md にある計画を実行する
- **save 引数あり**: **Step2** から順に実行した後に、実際にテストは行わず @.[agent_name]/e2e/.e2e.md に計画を記録して終了
- **引数なし**: **Step2** から順に実行

### Step 2: テスト情報の収集

スキルを呼び出したら、まず以下の質問を **順番に** ユーザーへ行う。
複数の質問を一度に投げず、回答を受け取ってから次の質問へ進むこと。

---

#### 質問 1: テスト対象 URL

```
テスト対象を教えてください（複数ある場合はすべて入力してください）。
ログインが必要なページの場合は、ログインページの URL もあわせて教えてください。
```

- テスト対象は下記のいずれかを単一 or 複数指定可能
  1. URL
  2. ページタイトル
  3. コンポーネント名
- テスト対象としてページタイトルやコンポーネント名が指定された場合は、エージェントがヒットする URL を逆引きする
- ログインページ URL が含まれているかどうかを判断する材料にする

---

#### 質問 2: ログイン要否とログイン情報（条件付き）

質問 1 の回答でログインページの URL が含まれている、またはテスト対象ページへの到達にログインが必要と推測される場合のみ実施する。

```
ログインに使用する ID（メールアドレスなど）とパスワードを教えてください。
```

- ログインが不要と判断できる場合はこの質問をスキップする

---

#### 質問 3: テストの前提条件（任意）

```
テストを始める前に満たしておくべき前提条件はありますか？
（例: 特定のデータが登録済みであること、特定の設定が有効になっていること）
不要であれば `不要` と入力してください。
```

- 未入力の場合は Step 2 でエージェントが自律的に前提条件を推測する

---

#### 質問 4: テストの完了条件（任意）

```
どのような状態になればテスト完了とみなしますか？
（例: エラーなく画面遷移が完了すること、特定のメッセージが表示されること）
不要であれば `不要` と入力してください。
```

- 未入力の場合は Step 2 でエージェントが自律的に完了条件を推測する

---

### Step 3: 前提条件・完了条件の確定

#### 前提条件が未入力の場合

テスト対象 URL とページ内容から、必要と思われる前提条件を推測して以下の形式でユーザーに提示する。

```
前提条件を以下のように想定しました。修正が必要な箇所があれば教えてください。

- [推測した前提条件 1]
- [推測した前提条件 2]
...
```

ユーザーが確認・修正したら、その内容を前提条件として確定する。

#### 完了条件が未入力の場合

テスト対象 URL と実装内容から、適切な完了条件を推測して以下の形式でユーザーに提示する。

```
テストの完了条件を以下のように想定しました。修正が必要な箇所があれば教えてください。

- [推測した完了条件 1]
- [推測した完了条件 2]
...
```

ユーザーが確認・修正したら、その内容を完了条件として確定する。

---

### Step 4: テスト計画の提示

収集した情報をもとに、以下の形式でテスト計画をユーザーに提示し、開始の承認を得る。

```
## テスト計画

**対象 URL**
- [URL 一覧]

**ログイン情報**
- ID: [入力された ID、またはなし]
- パスワード: [●●●●●● でマスク表示]

**前提条件**
- [確定した前提条件]

**完了条件**
- [確定した完了条件]

**テストシナリオ（予定）**
1. [シナリオ 1]
2. [シナリオ 2]
...

上記の計画でテストを開始してよいですか？
```

ユーザーが承認したら Step 4 へ進む。修正が必要な場合は計画を更新する。

承認した内容は .[agent_name]/e2e/.e2e.md に書き込む

---

### Step 5: E2E テストの実行

chrome-devtools-mcp を使用して、Step 3 で確定したシナリオを順番に実行する。

#### ログインが必要な場合

1. ログインページへ遷移する
2. ID・パスワードを入力してログインを実行する
3. ログイン成功を確認してからテスト対象ページへ遷移する

#### 各シナリオの実行ルール

- 各操作の後にスクリーンショットを取得し、現在の状態を記録する
- 予期しないエラーや表示崩れが発生した場合はその時点で記録してユーザーに報告する
- 完了条件の達成可否を常に意識しながら操作を進める

---

### Step 6: テスト結果の報告

全シナリオ完了後、以下の形式で結果を報告する。

```
## テスト結果

**結果**: [合格 / 不合格 / 一部不合格]

### シナリオ別結果

| # | シナリオ | 結果 | 備考 |
|---|----------|------|------|
| 1 | [シナリオ名] | ✅ 合格 / ❌ 不合格 | [詳細] |
...

### 発見された問題（不合格がある場合）

- [問題の詳細と再現手順]

### スクリーンショット

[取得したスクリーンショットの参照]
```

## 注意事項

- パスワードはログ・コメント・ファイルに平文で記録しない
- ログイン情報はテストセッション内のみで使用し、完了後に破棄する
- テスト中に破壊的な操作（データ削除など）が必要な場合は、実行前にユーザーへ確認を取る
- 外部サービスや本番データに影響を与える操作を発見した場合は、ユーザーに警告してから続行するかを判断させる
- スクリーンショットを一時保存したディレクトリはテスト完了後に削除する
- テスト終了後にブラウザを閉じる