Playwright MCPの設定から使い方、E2Eテスト自動化まで解説

Playwright MCPの設定から使い方、E2Eテスト自動化まで解説

ブラウザ操作の自動化に興味はあるものの、「コードを書くのが難しそう」と感じている方は多いのではないでしょうか。Playwright MCPを使えば、「ログインページを開いて、メールアドレスを入力して…」と自然言語で指示するだけで、AIがブラウザを自動操作できます。本記事では、Playwright MCPの基本からテスト自動化の方法まで詳しく解説します。

目次

Playwright MCPとは？

Playwright MCPは、Microsoftが提供するPlaywrightと、Anthropic社が発表した標準プロトコル「MCP」を組み合わせたもので、AI（LLM）が自然言語の指示だけでWebブラウザを操作できるようにする仕組みです。AIと連携することで、従来のコード中心の操作ではなく、自然言語による指示でブラウザ操作やテストを実行できる点が特徴です。 例えば、「example.comを開いて、ログインボタンをクリックしてください」と指示するだけで、AIが実際にブラウザを操作します。E2Eテストの実行や自動化を、より直感的に行えるよう設計されています。

Playwright MCPは2025年3月にリリースされ、GitHub上でオープンソースとして公開されています。現在も開発が進められているため、最新の仕様や対応状況については公式リポジトリを確認すると良いでしょう。

MCPの基本概念

MCP（Model Context Protocol）とは、Anthropicが2024年11月に発表した、AIと外部ツールをつなぐための標準規格です。AIが外部ツールの機能を安全かつ統一的な方法で利用できるようにすることを目的としており、「AIのためのUSB-C」とも例えられています。

MCPを採用することで、特定のAIやツールに依存せず、共通のインターフェースで連携できるようになります。これにより、同じツールを複数のAIクライアントから利用することが可能になります。

MCPの基本概念図

Playwright MCPは、このMCPを採用し、Playwrightというブラウザ自動化ライブラリをAIから操作できるようにしました。MCPを介することで、Claude、GitHub Copilot、CursorなどのAIツールから、統一された方法でPlaywrightの機能を呼び出せます。 つまり、Playwright MCPは「MCPという仕組みを使って、PlaywrightをAI対応させたツール」と考えると理解しやすいでしょう。

Playwright MCPでできること

Playwright MCPを使うことで、AIに自然言語で指示を出しながら、ブラウザ操作やテストの自動化を行えます。ここでは、Playwright MCPでできることを紹介します。

  • ブラウザの自動操作
    ページ遷移、要素のクリック、フォーム入力といった基本操作を、自然言語でAIに指示できます。例えば「example.comを開いて、ログインボタンをクリックしてください」と指示するだけで、AIが実際にブラウザを操作します。
  • テストコードの自動生成
    手動でテストを実行する様子をAIに見せることで、それに基づいてPlaywrightのテストコードを生成できます。生成されたコードはそのまま使えるため、テスト作成の時間を大幅に削減できます。

また、Playwright MCPはアクセシビリティツリーを使用してページを理解します。これにより、スクリーンショットやビジョンモデルを必要とせず、高速かつ軽量に動作します。対応ブラウザはChromium、Firefox、WebKitのため、クロスブラウザテストにも対応しています。 主な活用シーンとしては、手動テストの自動化、リグレッションテストの効率化、探索的テストの支援などが挙げられます。

Playwright MCPの対応環境

Playwright MCPを使用するには、以下の環境が必要です。

  • 必要な実行環境
    Playwright MCPを使用するには、Node.js 18以上が必要です（記事執筆時点）。
    Windows、Mac、Linuxの各OSで動作します。
    ただし、要件は変更される可能性があるため、最新の情報はPlaywright MCP公式リポジトリで確認してください。
  • 対応ブラウザ
    Chromium、Firefox、WebKitの3種類に対応しています。
  • 対応AIツール
    GitHub Copilot（VS Code）、Claude Desktop、Claude Code、Cursor、その他Windsurf、Clineなどに対応しています。
  • 料金について
    Playwright MCP自体は無料のオープンソースツールです。ただし、利用するAIツールによっては料金が発生する場合があります。詳細は各AIツールの公式サイトで最新情報を確認してください。

Playwright MCPのセットアップ手順

ここまでで、Playwright MCPの概要やできることを解説してきました。次に、実際にPlaywright MCPを使い始めるための設定手順を、ツール別に詳しく説明していきます。

どのツールを選ぶ？セットアップ手順の選択ガイド

使用するAIツールによって設定方法が異なります。以下から該当するツールを選び、対応するセクションの手順を実行してください。

【使用するAIツールを選択】
    │
    ├─ GitHub Copilot（VS Code）を使いたい
    │   → 「事前準備」→「GitHub Copilot（VS Code）でのPlaywright MCPの設定方法」へ
    │
    ├─ Cursorを使いたい
    │   → 「事前準備」→「CursorでのPlaywright MCPの設定」へ
    │
    ├─ Claude Code（ターミナル/CLIツール）を使いたい
    │   → 「事前準備」→「Claude CodeでのPlaywright MCPの設定方法」へ
    │
    └─ Claude Desktop（デスクトップアプリ）を使いたい
        → 「事前準備」→「Claude DesktopでのPlaywright MCPの設定方法」へ

事前準備

全ツールで共通して必要な準備として、Node.jsのインストールを行います。

Node.jsのインストールは、公式サイトから、LTS版(Long Term Support版)をダウンロードしてください。インストーラーの指示に従ってインストールを進めます。

記事執筆時点では、Node.js 18以上が必要です。ただし、要件は変更される可能性があるため、最新の情報はPlaywright MCP公式リポジトリで必ず確認してください。

インストールが完了したことの確認方法
ターミナル（WindowsではコマンドプロンプトまたはPowerShell）を開き、以下のコマンドを実行してバージョンが表示されることを確認します。

node --version
npm --version

必要なバージョン以上がインストールされていれば準備完了です。npmとnpxも自動的にインストールされます。npxは、npmパッケージを一時的に実行するためのコマンドで、Playwright MCPの起動に使用します。

GitHub Copilot（VS Code）でのPlaywright MCPの設定方法

VS CodeでGitHub CopilotとPlaywright MCPを組み合わせて使用する方法を解説します。

前提条件
VS Codeがインストールされており、GitHub Copilotのサブスクリプション（有料プランまたは無料プラン）が必要です。また、VS Codeに、GitHub CopilotとGitHub Copilot Chatの拡張機能がインストールされている必要があります。

設定方法
まず、エージェントモードの有効化を行います。VS Codeで、設定（Settings）を開き、「Feature」→「Chat」→「Agent: Enabled」（chat.agent.enabled）にチェックを入れます。この設定項目が表示されない場合は、VS Codeと拡張機能を最新版に更新してください。

Playwright MCPの追加は、ターミナルで以下のコマンドを実行します。

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

その後、VS Codeを再起動すると設定が反映されます。

動作確認
VS CodeでGitHub Copilot Chatを開き、チャット入力欄の右下にあるモデル選択ドロップダウンから「Agent（エージェント）」を選択します。ツールアイコン（「Select Tools」）をクリックすると、「MCP server: playwright」が表示され、browser_click、browser_navigate などのコマンドが確認できれば設定完了です。

CursorでのPlaywright MCPの設定

CursorでのPlaywright MCPの設定を解説します。

設定方法
まずCursorを開き、Cursor Settings→ Tools & MCP → Add Custom MCP を選択し、mcp.json に以下の情報を入力します。

{
  "mcpServers": {
    "playwright-mcp": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

再度Tools & MCPを確認すると、playwright-mcpが追加されています。

動作確認
Cursorのチャットで「playwright mcp」を使用したプロンプトを送信し、ブラウザが起動することを確認します。エージェントモードを使用する場合は、チャット入力欄でエージェントを選択してください。

Claude CodeでのPlaywright MCPの設定方法

Claude Code（コマンドラインツール）での設定方法を解説します。

設定方法
Claude Codeでの設定は、ターミナルで以下のコマンドを実行します。

claude mcp add playwright npx @playwright/mcp@latest

このコマンドにより、~/.claude.jsonにPlaywright MCPが追加されます。グローバル設定として保存されるため、全てのプロジェクトで使用できます。

プロジェクト固有の設定にしたい場合は、-s projectオプションを追加します。

claude mcp add -s project playwright npx @playwright/mcp@latest

　※インストール方法は今後変更される可能性があるため、最新の情報は公式サイトを参照してください。

動作確認
Claude Codeではclaudeコマンドを実行し、/mcpと入力してPlaywrightが表示されることを確認します。

Claude DesktopでのPlaywright MCPの設定方法

Claude Desktop（デスクトップアプリケーション）での設定方法を解説します。

設定方法
設定ファイルの編集を行います。設定ファイルの場所は以下の通りです。

  • Windows: %APPDATA%\Claude\claude_desktop_config.json
  • Mac: ~/Library/Application Support/Claude/claude_desktop_config.json
  • Linux: ~/.config/Claude/claude_desktop_config.json

もしくは、設定＞開発者＞設定を編集　からも設定ファイルの場所を確認できます。

claude_desktop_config.json に以下の内容を追加します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["@playwright/mcp@latest"]
    }
  }
}

その後、Claude Desktopを再起動することで設定が反映されます。

動作確認
Claude Desktopのチャットで「playwright mcp」を使用したプロンプトを送信し、ブラウザが起動することを確認してください。

ブラウザの永続セッション
Playwright MCPはデフォルトで永続セッションを使用します。ログイン情報などが保存されるため、認証が必要なサイトでのテストがスムーズに行えます。セッション情報は以下の場所に保存されます。

  • Windows: %USERPROFILE%\AppData\Local\ms-playwright\mcp-chrome-profile
  • Mac: ~/Library/Caches/ms-playwright/mcp-chrome-profile
  • Linux: ~/.cache/ms-playwright/mcp-chrome-profile

【初級編】Playwright MCPでブラウザ操作を行う

実際にPlaywright MCPを使って、基本的なブラウザ操作を試してみましょう。 今回はVSCode＋GitHub Copilotを例に説明します。他のAIツールでも、同様のプロンプトにて操作が可能です。

まずはWebページを開く操作から始めます。AIツールのチャットで、以下のようなプロンプトを入力します。

playwright mcpで https://magicpod.com を開いてください

初回実行時は、「常に許可する」または「一度だけ許可する」のボタンが表示されます。許可すると、ブラウザが自動的に起動し、指定したURLが開きます。

ページタイトルの確認は、以下のプロンプトで行えます。

ページのタイトルを確認してください

AIがページタイトルを取得して表示します。

スクリーンショットの取得も簡単です。

現在のページのスクリーンショットを撮ってください

スクリーンショットが保存され、ファイルパスが表示されます。

プロンプトの書き方のコツ
最初のプロンプトでは「playwright mcp」を明示的に指定することをおすすめします。AIが他のツール（Bashやcurlなど）を使おうとするのを防げます。ステップバイステップで指示を出すと、より確実に動作します。複雑な操作は一度に指示せず、段階的に進めましょう。

よくあるエラーと対処法
「Browser is already in use」というエラーが出た場合は、既に起動しているブラウザを閉じてから再実行してください。Node.jsのバージョンが古い場合は、必要なバージョンにアップデートしてください。最新の要件は公式リポジトリで確認できます。MCPサーバーが起動しない場合は、設定ファイルの記述を確認し、ターミナルを再起動してみてください。

【実践編】Playwright MCPでE2Eテスト自動化に挑戦

より実践的な例として、E2E（End-to-End）テストを自動化してみましょう。

E2Eテストとは、ユーザーの視点からシステム全体を最初から最後までテストする手法です。例えば、ログインから特定の操作、ログアウトまでの一連の流れを確認します。

テスト対象サイトとして、今回はHOTEL PLANISPHEREを使用します。これはテスト練習用に公開されているサンプルサイトです。

テストシナリオは以下の通りです。

  1. HOTEL PLANISPHEREのトップページにアクセス
  2. ログインページに移動
  3. テストユーザーでログイン（メールアドレス: ichiro@example.com、パスワード: password）
  4. ログイン成功を確認

実際のプロンプト例を順番に見ていきましょう。

まず、サイトへのアクセスをします。

playwright mcpでhttps://hotel.testplanisphere.dev/ja/を開いてください

次に、ログインページへ移動します。

「ログイン」というリンクをクリックしてください

ログインフォームへの入力を行います。

メールアドレスの入力欄にichiro@example.comと入力し、
パスワードの入力欄にpasswordと入力してください

次に、ログインボタンをクリックします。

「ログイン」ボタンをクリックしてください

ログイン成功の確認を行います。

ページに「マイページ」という文字が表示されているか確認してください

AIが生成したコードを確認したい場合、これらの操作を実行した後、AIに以下のように依頼すると、Playwrightのテストコードを生成してもらえます。

今実行した操作をPlaywrightのテストコードとして出力してください

生成されたコードは、そのままプロジェクトに組み込んで使用できます。

つまづきやすいポイント

  • 要素の特定が難しい場合があります。ボタンやリンクのテキストが曖昧な場合、AIが正しく認識できないことがあります。その場合は、より具体的な指示（「画面左上のログインボタン」など）を出してください。
  • ページの読み込みに時間がかかる場合は、要素が表示される前に操作しようとしてエラーになることがあります。「ページが完全に読み込まれるまで待ってください」と明示的に指示すると解決できます。
  • 複雑な操作では、一度にすべてを指示せず、ステップを分けて実行すると成功率が上がります。

まとめ

Playwright MCPは、AIを活用して自然言語でブラウザ操作やテスト自動化を行えます。またGitHub CopilotやClaude、Cursorなど主要なAIツールと連携でき、基本的な操作からE2Eテストまで対応しています。AIツールの無料プランを使えば、コストをかけずに試せる点も魅力です。テスト自動化に初めて取り組む方や、手動テストを効率化したい方にも適しています。比較的新しいツールのため、今後の進化にも注目しつつ、まずは実際に触れてみるとよいでしょう。

誰でもカンタンに使えるテスト自動化ツール MagicPodのご紹介

MagicPodを導入することで得られる効果や、多くの企業に選ばれている理由をわかりやすくまとめました。

ダウンロード 無料
ホワイトペーパー
MagicPod 編集部

MagicPod 編集部

テスト自動化の最新トレンドや品質向上のノウハウなど、現場で役立つ情報をお届けします。

タグ

#Allure #Android #Appium #Bitrisse #chromedriver #CICD #CircleCI #E2Eテスト #FluentLenium #Geb #iOS #Jenkins #MagicPod機能紹介 #MagicPod活用事例 #Magic_Pod #QA #QAエンジニア #reg-cli #Sahagin #Selenium #Selenium_Builder #Selenium_IDE #software_testing #Spock #test_automation #WebDriver #イベントレポート #テスト自動化 #モバイル #基礎知識 #技術解説