Zenn
🐕

Claude Codeでe2eテストを自動生成した話

に公開
E2E テスト
LLM
Claude Code
tech

e2eテストのない古いWebアプリケーションに対して、Claude Codeを使ったテストの自動生成を試みました。

思った以上にうまく行ったのでその結果と手順を共有します。

対象

  • Webアプリケーション
  • React@17, ReactRouter@5
  • ページ数 7
  • 各ページごとにフォーム、タブなど複数の状態

使用ツール

  • Playwright

所要時間

  • 約12時間

出力されたe2eテスト

  • ページクラス 9個
  • テストスイート 8個
  • テストケース 165個

使ったプロンプト

  1. playwrightを用いたe2eテストを整備したい、深く考えて計画を立ててください
  2. 計画をより細かなタスクに分解してチェックリストを作ってください
  3. この計画を e2e.mdという名前のファイルに書き出してください
  4. では基本的なログインテストを作成してください
  5. e2e.md を読み込んで順次タスクを実行してください。テストを作成する事にテストを実行し、エラーなく完了することを確認してください。エラーとは真っ白なページが表示されることも含みます。
  6. では残りのe2eテストも順次作成してください。エラーが出ないこと、真っ白が画面にならないことの確認を忘れずに。
  7. 〇〇というテストケースが失敗しています、どのように修正するか深く考えて計画を立ててください
  • 1,2,7 は plan mode on で実行
  • playwright test --ui でテストケースを見ながら6と7を繰り返す。

所感

  • 所要時間12時間は試行錯誤を含む本作業の片手間でやってかかった時間、これだけをやればより早くできそう
  • ターミナルベルは友達 https://docs.anthropic.com/ja/docs/claude-code/setup#ターミナルベル通知
  • Maxプラン（200ドル）でもe2eテストを作っているとすぐOpus4の制限に引っかかる、他の作業と並行する場合は注意が必要
  • plan modeで計画を立ててmarkdownに書き出しておくとうまく行かなくなっても /clear したあとファイルを読み込めば計画をたて直さなくてすむ
  • テストケースを勝手にスキップすることがあるので確認が必要
  • 白いページが表示されてもテスト成功にすることがあるので目視確認は必須

やってみた感じ十分使えそうという手応えを得ました。
e2eテストの整備・維持は大変労力のかかる作業なのでLLMを活用して楽をしていきたいです。

Discussion