はじめに

従来のE2E（End-to-End）テスト開発では、複雑なAPIドキュメントの理解、設定ファイルの手動編集、エラーの試行錯誤による解決など、多くの専門知識と時間が必要でした。

本記事では、Playwright MCP（Model Context Protocol）とClaude Sonnet 4を組み合わせ、自然言語での対話のみでWebサイトの包括的なE2Eテスト環境を構築した実践事例を紹介します。

実現できること

  • ✅ 自然言語でのテスト環境構築: コマンドライン操作なしでのPlaywright環境セットアップ
  • ✅ 対話的なエラー解決: AI支援による即座の問題分析と解決策提示
  • ✅ テスト結果分析: スクリーンショット・動画・トレースによる包括的デバッグ
  • ✅ 効率的な開発ワークフロー: 従来の数日の作業を約30分に短縮

開発環境・ツール構成

システム環境

  • OS: macOS
  • 開発エディタ: Visual Studio Code（以降VSCと略）
  • AI支援ツール: GitHub Copilot Agent Mode
  • AI モデル: Claude Sonnet 4
  • テストフレームワーク: Playwright v1.40.0

前提条件

重要: 本記事の内容を実践するためには、Visual Studio Code にPlaywright MCP を事前に組み込んでおく必要があります。もし組み込んでいない場合、VSCのターミナル上で以下のコマンドを実行することで、MCPを組み込むことが可能です。

code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}'

MCP（Model Context Protocol）の設定により、VS Code内でPlaywrightの機能を自然言語で操作できるようになります。

また、今回テスト用に適当な５ページくらいの自治会サイト（以下のイメージ）をバイブコーディングで生成し、それに対して本件の手順を行っています。

この設定により、コマンドライン操作やPlaywright APIの詳細な知識なしに、対話的なテスト開発が可能になります。

自然言語対話によるテスト開発プロセス

1. PlaywrightMCPを利用したサイト調査依頼

まずは、E2Eテストをする前準備ということで、生成AIにテスト対象のサイトを理解してもらいたいと思います。そのため、生成AIに以下のプロンプトでサイト調査をお願いします。

プロンプト: "このサイトのE2Eテストケースをplaywrightで自動テストを行うため、
以下のトップページをplaywright mcpで該当サイトを調査してください。
file:///Users/(user name)/Documents/develop/playwrightmcptest/index.html"

上記後、生成AIはPlaywrightMCP経由でブラウザを起動し、該当サイトのトップページを中心に遷移可能なページすべてを調査します。調査後、分析した結果をコンソール上に出力します。

分析結果:

  • サイト構造の自動解析（6ページ構成）
  • ナビゲーション要素・フォーム・動的コンテンツの特定

サイトの調査はこれで終了です。この調査結果をもって、生成AIはテスト対象のサイト全体を理解できたかと思います。
それと同時に、PlaywrightMCPの利用もここまでです。

2. テストコード生成

生成AIがサイト全体の構造を理解したところで、次はPlaywrightの機能を利用したE2Eテストのテストコードを生成してもらいましょう。今回はサンプルとして自治会のWebサイトのE2Eテストをやってもらいます。

プロンプト: "では、調査結果から、playwrightでテストするためのテストケースを生成してください。"

これにより、AI側で自動的にplaywrightのライブラリや、その他依存ライブラリのインストールが始まり、その後テストコードを生成していきます。

生成完了のメッセージが流れ、生成された内容は以下となります。

自動生成内容:

  • ページナビゲーションテスト
  • インタラクティブ機能テスト
  • コンテンツ表示テスト
  • フォーム機能テスト
  • アクセシビリティテスト
  • レスポンシブデザインテスト
  • パフォーマンステスト
  • README.md

README.mdには、（上記で生成された）プロジェクト構成や、初見者のための環境構築手順、テストを実施するためのテスト実施コマンド一覧などが記載されていました。今回はプロンプトのみで進めていきますが、必要時はREADME見て手動でコマンド実行も可能です。

3. ブラウザ表示テスト実行

それではE2Eテストに進みたいと思います。
以下のプロンプトでテストを実施していきましょう。

プロンプト: "ブラウザ表示付きでテストを開始してください。"

上記のプロンプトで依頼後、自動的にテストがスタートします。
Playwright上で実行しているため、無数のブラウザウィンドウが表示されます。

実行結果:

  • 全テスト294件中大部分のテストが失敗
  • 「strict mode violation」エラーが多発

これだとテストにならないので、テストロジックでのエラーを解決していきます。

4. 対話でエラー解決

チャット上には、以下のように問題点を指摘していたので、それをもとに解決させていきます。

プロンプト: "テストが大量に失敗しています。主な問題点を確認後、テストコードを修正してください。"

上記のプロンプトでAIに命令することで、該当エラーに対する修正をします。

5. 改善後のテスト実施

上記にて修正後、修正箇所の一部のみテストが自動で実施され、解決出来ていることが確認できました。

上記によりいくつかのテストケースのエラーは解消されました。
他にもエラーが出ていたら、都度４．に戻って原因究明、解決をしていきましょう。

テスト実行結果を表示

テストが完了すると、以下の内容のテスト結果をブラウザ上で表示してくれます。

一覧から確認したい結果を押下することで、詳細結果が見れます。
そこには画面のスクリーンショット、該当テスト動画もここで確認可能です。
動画が見れるってことは、そこまでの操作も見れるので、非常に便利ですね。

もしテスト結果にスクリーンショットや動画が無かった場合、以下のプロンプトで設定内容を変更することが可能です。

プロンプト: "テスト結果にスクショと動画を見れるようにしてほしいです。"

これをAIに依頼することで、AI側で以下の設定をしてくれます。

use: {
  screenshot: 'on',        // 全テスト実行時スクリーンショット取得
  video: 'on',            // 包括的動画録画機能
  trace: 'on',            // 詳細トレーシング機能
}

以上、プロンプトだけでE2Eテスト実施までを行ってみました。

課題

ここまでで、従来のやり方だと数日かかりそうなテストが、数分で完了出来てしまいます。
とはいえ、課題点が無いわけではありません。

自動生成されたテストコードも、ロジックエラーで動作しない場合は、手動もしくは生成AIに調査＆修正をすることになります。

また、今回はあらかじめテスト用のサイトが出来ている状態でテストケースを生成していますが、新規開発のときはテスト検討時に必ずしもサイトが完成している可能性は低く、何もコンテンツの無い状態の場合は本手順で示したやり方では出来ないでしょう。

他にも動的サイトだとテストは可能？等の課題点はあるとは思いますが、それでも、このテスト自動化は利用できると思いますので、今後も研究していこうと思っています。

まとめ

いかがだったでしょうか。
PlaywrightMCPとの連携で非常に効率よくテストを進めることができたかと思います。
今後、こういったツールや生成AIを駆使して、いかに効率よく作業するかが、世の中で要求されることになるのかなって思っていますので、各位お互いに研究していければと思っています。

参考リンク



ギャップロを運営しているアップフロンティア株式会社では、一緒に働いてくれる仲間を随時、募集しています。 興味がある！一緒に働いてみたい！という方は下記よりご応募お待ちしております。
採用情報をみる