AIとPlaywrightで「壊れない」E2Eテストを爆速で作る新常識

導入

  • E2Eテストは重要だが、書くのが面倒。
  • 「自動生成（codegen）だとコードが汚い」「手書きだと時間がかかる」というジレンマ。
  • 解決策： VS Code + Copilot (MCP) + Playwright の組み合わせで、美味しいとこ取りをする。

ステップ1：codegen で「動く証拠」をクイックに作る

  • 最初から完璧なコードを書こうとしない。
  • npx playwright codegen を起動し、ブラウザをポチポチ操作するだけ。
  • これで「要素の特定（ロケーター）」と「操作手順」のプロトタイプが手に入る。

ステップ2：Copilot (MCP) による「職人級」のリファクタリング

  • 生成された「ベタ書き」のコードをAIに渡す。
  • 指示のコツ： 「Page Object Model (POM) にリファクタリングして」「可読性と保守性を高めて」と伝える。
  • AIがクラス化、メソッド化を行い、一瞬でプロレベルの構成に。

ステップ3：AIエージェントに「パスするまでデバッグ」させる

  • AIに実行権限（MCP/CLI）を与え、テストを実行させる。
  • 落ちたらAIが自分で原因を探り、コードを修正するループを回す。

まとめ

  • 人間は「意図（操作）」を伝え、AIが「構造（コード）」を整える。
  • これからのE2Eテストは「書く」ものではなく「生成して洗練させる」もの。

システム開発, プログラミング入門

Posted by たみぼうず