はじめに
2024年にMCP(Model Context Protocol)というプロトコルが提唱されました。その後、さまざまなサービスでサポートが進み、ツールとして提供される事例も増えています。その中の1つがPlaywright MCPです。Playwrightは、E2Eテストの自動化を目的としたNode.jsライブラリであり、Chromium、Firefox、WebKitといった主要なブラウザを単一のAPIで制御できる点が大きな特徴です。
Playwright MCPとは？
Model Context Protocol（MCP）のおさらい
MCPは、Anthropicが開発したオープンスタンダードで、AIモデルが外部ツールやサービスと統一されたインターフェースで連携できるようにするプロトコルです。USB-Cポートのように、一度接続設定を行えばさまざまなツールをAIに接続できる「標準化された橋渡し役」として機能します。
引用：https://modelcontextprotocol.io/docs/getting-started/intro
Playwright MCPの仕組み
Playwright MCPは、MicrosoftのPlaywrightフレームワークをMCPサーバーとして公開し、AIがブラウザ自動化機能を利用できるようにする仕組みです。従来のスクリーンショットベースのアプローチとは異なり、アクセシビリティツリーという構造化されたページ表現を使用します。
VS CodeでのPlaywright MCPセットアップ
執筆時の環境
- Visual Studio Code 1.109(公式サイト)
- Node.js 22.21.1(npmまたはnpxが使用可能な環境含む) (公式サイト)
- GitHub Copilot（エージェントモード使用時）(公式サイト)
インストール手順
ステップ1: MCPサーバーをインストール
このセクションでは、VS Code内でPlaywright MCP（Managed Container Playground）サーバーをインストールし、テスト実行のための環境を構築する手順を解説します。
1. 拡張機能ビューへのアクセス
VS Codeのサイドバーにある拡張機能アイコン（通常は四角形のブロックが連なったアイコン）をクリックして、拡張機能ビューを開きます。
2. MCP関連の拡張機能の検索
開いた検索バーに、Playwright MCPサーバーを見つけるためのキーワードとして@mcpと入力します。これは、Microsoft Container Playgroundに関連するすべての拡張機能をフィルタリングするための検索構文です。
3. MCPマーケットプレイスの有効化（初回利用時に表示された人のみ）
MCPを初めて利用する場合、VS Codeの標準マーケットプレイスとは別に、MCP専用のマーケットプレイスを有効にする必要がある場合があります。画面の指示や通知に従って設定を行ってください。この手順が完了しないと、Playwright MCPサーバーが見つからない可能性があります。
4. Playwright MCPサーバーの検索
MCPマーケットプレイスが有効化されたら、検索バーを更新し、@mcpに続けて具体的にインストールしたいサーバー名（この場合はplaywright）を入力します。つまり、検索バーには@mcp playwrightと入力します。これにより、Playwrightのテスト環境があらかじめ設定されたMCPサーバーが表示されます。
5. Playwright MCPサーバーのインストール
検索結果の中から、Microsoftが提供している正式なPlaywrightのMCPサーバーを選択し、「インストール」ボタンをクリックしてVS Codeに導入します。このサーバーには、Playwrightの実行に必要なすべての依存関係やブラウザ環境がコンテナ化されており、ローカル環境を汚染することなくテストを実行できるのが特長です。
6. PCMサーバーの有効性確認
インストールが完了したら、環境が正しくセットアップされ、PCM（Playwright Container Manager）サーバーが起動・有効化されていることを確認します。この確認は、VS Codeのチャットビューを通じて行います。
- チャットビューを開く
- ツール設定画面を開く
- ツール設定画面に先ほどインストールしたPlaywright MCPの項目が追加されていることを確認
これで、Playwrightを使った探索的テストや自動テストを開始するための基盤がVS Code内に整いました。
探索的テストとは
探索的テストとは、テストケースを事前に細かく作り込まず、実際にソフトウェアを操作しながら考え、学び、その場で次のテストを決めていくテスト手法です。「探索的（exploratory）」という言葉のとおり、未知の振る舞いやリスクを探ることに主眼があります。
従来のテストでは、「この入力をすると、この結果になる」という手順をあらかじめ決め、それを正確に実行することが重視されます。一方、探索的テストでは、操作の結果を観察しながら「なぜこうなったのか」「次は何を試すべきか」を即座に判断します。テスト設計・実行・分析が分離されず、同時進行で行われる点が大きな特徴です。
この手法が特に力を発揮するのは、仕様がまだ固まっていない段階や、新機能の初期確認です。仕様書が不完全でも、実際の画面や挙動を通じて理解を深めながらテストを進められるため、「仕様どおりだが使いにくい」「想定外の操作で破綻する」といった問題を早期に発見しやすくなります。また、ユーザーの視点に近い形で操作するため、UI/UX上の違和感にも気づきやすいという利点があります。
一方で、探索的テストはテスターのスキルや経験に大きく依存します。何を疑い、どこを深掘りするかは個人の判断に委ねられるため、経験の浅いテスターでは十分な効果を得られない場合があります。また、テスト手順が固定されていないため、後から同じテストを再現したり、他の人に内容を共有したりするのが難しくなりがちです。そのため、実施中に気づいた点や操作内容を簡潔にでも記録しておくことが重要になります。
実務では、探索的テスト単独で品質を担保するというよりも、テストケースベースのテストや自動テストを補完する役割として使われることが多いです。定型的・回帰的な確認は自動テストに任せ、人の思考力や観察力が必要な部分を探索的テストでカバーする、という使い分けが現実的です。
まとめると、探索的テストは「決められたことを確認するテスト」ではなく、「まだ分かっていない問題を見つけるためのテスト」です。不確実性が高い場面ほど価値が高く、ソフトウェアの成熟度や目的に応じて、他のテスト手法と組み合わせて使うことが重要になります。
Playwright MCPを使って探索的テストをやってみよう
探索的テストは、ChatGPTやGeminiなどのAIを利用したことがある方であれば、比較的容易に始められます。
チャットに実施したいテスト内容を記載するだけです。例えば、弊社のホームページにあるDevOpsに関する問い合わせフォームをテストしてみましょう。
GitHub Copilotに次の命令を書いて実行します。
{弊社の問い合わせフォームURL}にアクセスして、入力フォームをすべて入力するテストを作成して
細かな条件を指定しなくても、URLを解析して入力項目を把握し、それぞれの項目に対応するテストを作成してくれます。
生成されたコードを確認すると、テストとして妥当な構成のコードが作成されていることが分かります。実際に入力される内容もテスト用として適切な名称が設定されており、生成AIの進歩を感じられます。
生成されるコードや内容は使用するAIモデルによって異なりますが、比較的新しいモデルではエラーなく一度で実行できるコードが生成される確率も高くなっています。
まとめ
Playwright MCPと生成AIを組み合わせることで、再現性のあるテストコードを迅速に作成しつつ、人の視点による気づきを得る探索的なアプローチも取り入れることが可能になります。開発途中の段階でも、密度の高い検証を無理なく進められる点は大きなメリットです。
探索的テストは既存の自動テストを置き換えるものではありませんが、不確実性の高いフェーズにおいて「まだ見えていない問題を探す」ための手段として有効です。
Playwright MCPは、そのような試行錯誤を気軽に始められる実践的な選択肢のひとつといえるでしょう。
