Menu
browser-operator でアプリの画面・遷移を実際に確認し、その情報をもとに Playwright Test の E2E テストコードを設計・実装する。
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
実装完了後のコードレビューに使用。仕様準拠・コード品質・セキュリティの3観点を並列レビューし、指摘を依存解決して修正する。
セッション完了後の振り返りに使用。ワークフロー遵守の検証、ユーザ指摘の収集と自己改善提案、改善後のリグレッション確認を行う。
ワークフローを開始する。ユースケースを選択し、適切なステップを順に実行する
設計確定後、実装前に使用。設計をタスクに分解し、実装順序と依存関係を明確にする。
大規模プロジェクト（複数機能・フェーズ分割が必要）で使用。全体をフェーズに分割し、マイルストーンとリスクを定義する。各フェーズは planning スキルに渡す。
機能開発・バグ修正の着手前に使用。メインセッションで人間パートナーと対話し、要件を構造化する。コード調査は Explore エージェントに委譲。
| name | e2e-test |
| description | browser-operator でアプリの画面・遷移を実際に確認し、その情報をもとに Playwright Test の E2E テストコードを設計・実装する。 |
browser-operator でアプリケーションを実際にブラウザで操作・観察し、その情報をもとに Playwright Test の E2E テストコードを設計・実装する。
入力: テスト対象の URL + 確認したい画面・機能の指示 出力: Playwright Test の E2E テストコード（テスト全 GREEN）
原則: 画面を実際に見てからテストを書く。推測でテストを書かない。
画面を見ずに E2E テストを書くな
digraph e2e_test {
rankdir=TB;
input [label="テスト対象の\nURL・機能", shape=ellipse];
observe [label="browser-operator で\n画面を観察", shape=box, style=filled, fillcolor="#cce5ff"];
design [label="テストケース設計\nユーザー操作フローの整理", shape=box, style=filled, fillcolor="#ccccff"];
review_design [label="人間パートナーに\nテスト計画を提示", shape=box, style=filled, fillcolor="#ffffcc"];
implement [label="テストコード実装\n1つずつ追加→実行", shape=box, style=filled, fillcolor="#ccffcc"];
check [label="全テスト\nGREEN?", shape=diamond];
fix [label="テストを修正\nor バグ発見→報告", shape=box, style=filled, fillcolor="#ffcccc"];
done [label="E2E テスト完了", shape=ellipse];
input -> observe;
observe -> design;
design -> review_design;
review_design -> implement;
implement -> check;
check -> done [label="はい"];
check -> fix [label="いいえ"];
fix -> check [label="修正後"];
}
browser-operator に対象 URL を渡して、画面の状態を把握する。
| 確認事項 | 観点 |
|---|---|
| 画面構成 | どんな要素があるか（フォーム、ボタン、リスト等） |
| ユーザー操作フロー | どういう順序で操作するか |
| 画面遷移 | 操作後にどこに遷移するか |
| エラー表示 | 不正な操作をしたときに何が表示されるか |
| ローディング | 非同期処理の待ち時間があるか |
観察結果に基づき、E2E テストケースを設計する。
| 分類 | 説明 | 例 |
|---|---|---|
| ハッピーパス | 正常なユーザー操作フロー | フォーム入力 → 送信 → 成功メッセージ表示 |
| バリデーション | 入力バリデーションの検証 | 必須項目未入力 → エラーメッセージ表示 |
| 画面遷移 | ページ間の遷移が正しいか | リンク押下 → 正しいページに遷移 |
| 状態変化 | 操作後の UI 状態変化 | 項目追加 → リストに反映 |
| エッジケース | 特殊な操作パターン | 連打、戻るボタン、リロード |
## E2E テストケース
### ハッピーパス
- E2E-1: [ログインフォームに有効な認証情報を入力して送信すると、ダッシュボードに遷移する]
### バリデーション
- E2E-2: [メールアドレスを空のまま送信すると、エラーメッセージが表示される]
### 画面遷移
- E2E-3: [ナビゲーションの「設定」リンクを押すと、設定ページに遷移する]
設計したテストケース一覧を人間パートナーに提示し、承認を得る。
承認されたテストケースを Playwright Test のコードとして実装する。
getByRole, getByText, getByLabel, getByTestIdwaitForSelector や expect(...).toBeVisible() を適切に使う。固定の sleep は使わない以下のどれかに当てはまったら、やり方を見直せ。
sleep で待機しているあなたはこのスキルのプロセスを自分で実行しない。以下のエージェントにディスパッチする。
browser-operator エージェントをディスパッチして画面を観察
テストケースを設計し、人間パートナーに提示
implementer エージェントをディスパッチしてテストコードを実装
test-runner エージェントをディスパッチして最終確認
あなたが結果を判断する
前提スキル:
必須ルール:
前提モジュール:
このスキルを使うスキル: