テスト時の必須行動

フロントエンドコードをテストする際のAIエージェントの必須行動。

5つのルール

フロントエンドコードに取り組むすべてのAIエージェントは、テスト時にこの5つのルールに従う必要があります：

ルール1: 最初にテスト計画を宣言する

テストを書いたり検証を実行したりする前に、以下を明示します：

何をテストするか
どのレベルを使用するか
なぜそのレベルが適切か

Test plan:
- Testing: notification banner visibility after CSS fix
- Level: 5 (verify-ui + screenshot)
- Reason: This is a visual bug — the element exists in DOM but
  user reports it's not visible. Need to check computed styles.

📝 Note

テスト計画を宣言することで、習慣的にレベル1をデフォルトにしてしまうよくある間違いを防げます。意識的なレベル選択を強制します。

ルール2: テストレベルを目標に合わせる

テストレベルは実際に検証しているものと一致しなければなりません：

検証している内容	最低限使用すべきレベル
関数が正しい値を返す	レベル1
コンポーネントが正しい要素をレンダリングする	レベル2
ビルド出力に期待されるコンテンツが含まれる	レベル3
ユーザーフローがブラウザで動作する	レベル4
何かが視覚的に正しい	レベル5

レベル5の問題にレベル1を使用しないでください。テストはパスしますが、バグは残ります。

ルール3: 下位レベルがパスしても問題が解消しない場合はエスカレーションする

テストがパスしたにもかかわらず、ユーザーが問題が修正されていないと言う場合：

同じテストを再実行しない
ユーザーにキャッシュのクリアを提案しない
次のテストレベルにエスカレーションする
すでにレベル4の場合、レベル5にエスカレーションする
レベル5の場合、より深く調査する（祖先要素、スタッキングコンテキストなどをチェック）

⚠️ Warning

「ブラウザキャッシュをクリアしてください」や「ハードリフレッシュしてください」を解決策として提案しないでください。 ユーザーがまだ壊れていると言う場合、コードがまだ壊れています。キャッシュのせいにするのではなく、実際の原因を調査してください。

ルール4: UI/CSSはデフォルトでレベル5

以下に関わるタスク：

CSSの変更
レイアウトの変更
表示の問題
視覚的な外観
レスポンシブデザイン
間隔、色、フォント

はレベル5の検証をデフォルトにすべきです。下位レベルはCSSの正しさを検証する構造的能力がありません。

ルール5: テストしなかったものを報告する

テスト後、ブラインドスポットを明示的に述べます：

Verification complete:
- Tested: computed styles confirm banner has display:block,
  opacity:1, and parent has overflow:visible
- Screenshot: banner is visible at top of page
- NOT tested: responsive behavior at mobile breakpoints
- NOT tested: animation transition timing

この透明性により、追加のテストが必要かどうかをユーザーが判断できます。

サマリーチェックリスト

修正完了を宣言する前に：

テスト前にテスト計画を宣言した
テストレベルが変更の性質と一致している
テストがパスしたがユーザーが失敗を報告した場合、次のレベルにエスカレーションした
CSS/ビジュアルの変更にはレベル5を使用した
テストしたものとしなかったものを報告した