Claude CodeでPlaywright MCPを使ってE2Eテストを書いてもらう

Playwright MCPサーバーをClaude Codeから利用して、E2Eテストを書いてみるということをしました。動いているアプリを生成AIにさわってもらいながら理解してもらい、それを元にテストを書けるんじゃないかなと思ったのがきっかけです。

できたこと:

  • Claude CodeとVSCodeのインテグレーション
  • Claude 4 Sonnetモデルを使ってみた
  • 「Webアプリを触ってみて」という指示で、どんなアプリなのか把握した
  • 「把握したことをもとにE2Eテストを書いて」という指示で、Playwright / TypeScript のテストを生成してくれた
  • Ubuntu24.04にClaude CodeとVSCode CLIをインストール、Windows 11のVSCodeから利用する (Remote - Tunnels)

うまくいかなかったこと:

  • Claude Codeが自分で書いたテストコードを、適切に直せない
  • かなり小規模なおもちゃ的アプリに対してテストが多すぎて、このまま維持するのは厳しい

Claude Codeの設定

メイン機はWindows 11 Proです。個人の事情ですが、Windows PCがパワー不足のため、開発負荷のオフロードのためUbuntu24.04のPCを併用しています。そこでClaude CodeもUbuntuに入れることにしました。以下の手順でやりました。備忘録も兼ねて、今回やりたいことと直接関係ないものも混じっています。

  • Ubuntu上の作業
  • Windows上の作業
    • Ubuntuにssh接続し、code tunnel でリモートサーバーを起動
      • 認証を聞かれるのでGitHubで認証
      • リモートサーバー名はホスト名になるが、これは接続時に必要になる。以下の「foo」の部分 https://github.com/login/device[2025-05-24 09:07:12] info Creating tunnel with the name: foo
    • VSCodeに Remote - Tunnels 拡張をインストール
      • ms-vscode.remote-server
    • VSCodeからリモート-サーバーに接続
      • Remote - Tunnels: Connect to Tunnel... を選ぶ
      • 実行中のリモートサーバーが一覧に出るので、選択する。上記の「foo」の部分
    • VSCodeでリモートサーバーのプロジェクトディレクトリを開く
    • VSCode上でターミナルを開く
    • ターミナルからClaude Codeをインストール
      • npm install -g @anthropic-ai/claude-code
      • claudeを実行すると、VSCodeのClaude Code拡張も併せて設定される
      • ターミナルの右上に「拡張を適用するのでターミナルを開き直して」的な表示が出るので、開き直す
    • そのままターミナルでClaude Codeを実行する
      • claude
      • 最初は /init を実行するよう言われるので、実行する。CLAUDE.md ファイルができる

Playwright MCPの設定

Claude Code から Playwright MCP を使ってみたいというのが主眼なので、その設定をしました。

  • Playwright MCPをインストール
    • Cursorなどの設定ファイルに記述する例がよくあるが、Claude Codeだとわからなかったので、プロジェクトディレクトリに直接インストール (-gでグローバルにインストールするのが正解かも？)
      • npm install @playwright/mcp@latest
      • npx playwright install-deps
      • npx playwright install chrome
    • Claude CodeにMCPサーバーを追加
      • claude mcp add playwright npx @playwright/mcp@latest
      • 実はここでハマった。UbuntuはGNOMEが動いていて画面があるのに、Playwright実行時に "Missing X server or $DISPLAY" や "Authorization required, but no authorization protocol specified" などのメッセージが出てエラーになる。ならばと headless にしても、なぜかずっと待たされて進まない。結論としては、Xvfbで別の仮想ディスプレイを作ってそちらを使うようにした
        • Xvfb :5 -screen 0 1600x1200x24 # 別のターミナルを開いて実行状態にする
        • DISPLAY=:5 claude
      • また、MCPサーバーのパラメーターを渡す方法にもひっかかった。途中に「--」が必要だった
        • 例: claude mcp add playwright npx -- @playwright/mcp@latest --headless

Claude CodeからPlaywright MCPを使う

設定が正しくできてしまうと、あとは簡単でした。ここから、Claude CodeでE2Eテストをするまでに試したことを書いていきます。アプリは、以前に生成AIの練習としてClineに作ってもらった個人向け金融資産管理アプリです。なおまだまともに動いていません。

まずClaude Codeに既存コードを理解してもらうために、仕様書を書いてもらいました。以下のプロンプトによって、docs/business-specification.md ができました。

ビジネス仕様書を作ってください。現在のコードから読み取れる内容を元に、特に株式と資産のデータをどの様に保存しており、どのような操作が可能かを整理してください。データベースの論理設計を記述してください (物理設計は不要)。データについては、履歴やスナップショット、過去にさかのぼった変更について、どんな操作が可能で、どんな操作は現状不可能を記載してください。ユーザーの操作については、ユーザーがどの様な要望を持っているか、どんな状況でどんな情報が得られるか、ユーザーがいつデータを更新するべきかについて、ユーザー行動の視点から整理して記述してください。機能一覧、画面一覧は不要です。ドキュメントは日本語で書いてください

プロンプトではユーザー視点を求めていますが、あまりそういう結果にはならず、機能一覧に近い内容になっていました。ただ「5.ユーザー行動とデータ更新パターン」として、ユーザーの状況やニーズを整理しているところは、がんばっている感じがします。

ここから、実際にアプリを操作してもらいました。以下のようなプロンプトです (一部省略があります)。プロンプトが日本語だったり英語だったりするのは、私の手抜きです。

実のところ、現時点で基本機能が完成していません。どこまでできているか、実際に動かして試してみてください。Playwright MCPを利用してブラウザで実際に動かせるようにしてください

start the app on Docker, use playwright mcp to navigate to the top page, take screenshot

ok, then let's check how it's working. click through all links / buttons, taking screenshots, try to operate conotrols on each page and report what functionally you touched and what happened

さてこの時点で、仕様書にあるような機能をひととおり操作した結果や、動作のおかしい部分などをまとめて出力してくれました。力作だったのですが、すみません、ここはログが残っていません。

Claude CodeにPlaywright MCPを使ってPlaywrightのE2Eテストを書いてもらう

そしてテストを実際に書いてもらうプロンプトです。基本的にはこれだけで、200件以上のテストケースが生成されました。延々と時間はかかり、料金もここだけで5USD以上使ったようです。

based on your findings write playwright tests in TypeScript in tests/e2e

この後のやり取りで、Claude Codeが自分でテストを実行して失敗したものを直すというサイクルに入り、部分的には直りました。ただし直し方が、テストの意味がない方向に倒している様子が見えたので、途中で止めました。以下のようにテストを直す (壊す？) 動きがありました。

  • 要素の存在を確認するのに、複数の要素がマッチするというエラー
    • 正しい要素を絞り込まず、1個あればOKというテストに書き換え
  • 要素の存在を確認するのに、見つからないというエラー
    • 確認するためのテストコードを消してしまう
  • 表示されている数字の値が正しくないというエラー
    • 数字の値を比較せず、なにか表示されていればOKにしてしまう
  • まだテストが落ちる
    • 実行するテストを減らして全部OKだと言う

テストは200件以上あるのですが、この様子だとテストの内容には不安があります。数字の値の比較については説明を求めたところ、まだUIのテストをしているだけでデータやロジックのテストはしていないですね、重要なので追加しましょうと素晴らしい意気込みを見せてはくれました。テストの精査と修正にも、役には立ってもらえそうです。

まとめ

動いているアプリを生成AIにさわってもらって理解してもらい、そこからテストを書いてもらうということを試しました。仕様書や設計書から生成AIがテストを書くというのはわかりますが、ドキュメントがないとき (いわゆるアジャイル開発でありがちです) どうだろう？と思って試してみました。いまの時点の結論として、できるできないで言えば、できています。

いろいろなことを初めてやってみたという段階なので、有用性についてはまだ評価ができません。引き続き人間がついていて結果を確認すること、問題があったら早めに具体的に指摘して直してもらうことは必要そうです。テストの方針を言語化して提供したり、その観点のレビューを入れるなどすると良さそうな気がします。

タイミングとしてはClaude 4が発表になってClaude Codeでも使えると聞いたので、やってみた形になります。3.7からどう変わったかは、利用シナリオが違うこともあり、あまりよくわかりません。でもClineで3.7を使うともっとループしたりしがちな気もします。