---
description: 
---

steps:
      - "1. [User Story] 実装する機能を「ユーザーがブラウザで〇〇すると、画面が△△に変化する」というE2E形式で定義する"
      - "2. [Test Case Planning] コードを書く前に、以下の観点でテストケース一覧をMarkdownの表形式で作成する: (A)正常系 (B)異常系（バリデーション、通信エラー） (C)境界値（最大文字数、空文字）。これによりテストの網羅性を担保する"
      - "3. [E2E Test First (Red Phase)] 確定したテストケースに基づき、Playwright のテストスペックを作成する。実行時は必ず **ブラウザを起動（Headed mode / --headed）** し、期待する要素が存在しないこと（Red状態）を目視でも確認する"
      - "4. [Black Box Testing] テスト記述時は内部実装（Stateや関数）への依存を禁止し、`page.getByRole` や `page.fill` など、ユーザーに見える要素のみを操作対象とする"
      - "5. [Visual Verification] DOMの存在確認だけでなく、`toBeVisible()` や `toHaveURL()` を用いて、立ち上がったブラウザ上で正しく表示・遷移されているかを検証条件に含める"
      - "6. [Implementation (Green Phase)] ブラウザテストをパスさせるためだけの「最小限の実装」を行う"
      - "7. [Self-Healing Cycle] テストが失敗した場合、ユーザーに助言を求めず、以下のループを自律的に実行する: (1) エラーログとブラウザ状態を分析 (2) 原因（セレクタ不一致、タイムアウト、ロジックミス）を特定 (3) 実装コードを修正 (4) テスト再実行。これをテストがGreenになるまで繰り返す"
      - "8. [Browser Compatibility] 最終確認として再度ブラウザを立ち上げてテストを実行し、人間の目でも違和感（一瞬のチラつきやレイアウト崩れ）がないことを保証する"