E2e Test | Skills Pool

Contenido de la habilidad

E2E Test（E2E テスト作成）

概要

browser-operator でアプリケーションを実際にブラウザで操作・観察し、その情報をもとに Playwright Test の E2E テストコードを設計・実装する。

入力: テスト対象の URL + 確認したい画面・機能の指示 出力: Playwright Test の E2E テストコード（テスト全 GREEN）

原則: 画面を実際に見てからテストを書く。推測でテストを書かない。

Iron Law

画面を見ずに E2E テストを書くな

「仕様書だけ見てテストを書く」→ 実際の画面と乖離したテストになる
「セレクタを推測する」→ 要素が見つからず壊れるテストになる
「ハッピーパスだけ書く」→ ユーザーが実際に踏むエラーパスが漏れる

いつ使うか

新しい画面・機能の E2E テストを作成するとき
既存機能に 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="修正後"];
}

確認事項	観点
画面構成	どんな要素があるか（フォーム、ボタン、リスト等）
ユーザー操作フロー	どういう順序で操作するか
画面遷移	操作後にどこに遷移するか
エラー表示	不正な操作をしたときに何が表示されるか
ローディング	非同期処理の待ち時間があるか

分類	説明	例
ハッピーパス	正常なユーザー操作フロー	フォーム入力 → 送信 → 成功メッセージ表示
バリデーション	入力バリデーションの検証	必須項目未入力 → エラーメッセージ表示
画面遷移	ページ間の遷移が正しいか	リンク押下 → 正しいページに遷移
状態変化	操作後の UI 状態変化	項目追加 → リストに反映
エッジケース	特殊な操作パターン	連打、戻るボタン、リロード

## E2E テストケース

### ハッピーパス
- E2E-1: [ログインフォームに有効な認証情報を入力して送信すると、ダッシュボードに遷移する]

### バリデーション
- E2E-2: [メールアドレスを空のまま送信すると、エラーメッセージが表示される]

### 画面遷移
- E2E-3: [ナビゲーションの「設定」リンクを押すと、設定ページに遷移する]

E2e Test | Skills Pool