Playwright MCPとは何か？3分で理解する

テスト自動化

Playwright MCPは、一言で言えば**「AI（主にClaudeなどのLLM）があなたの代わりにブラウザを操作し、Webサイトの閲覧やテスト、自動化を行えるようにする仕組み」**のことです。

仕組みを理解するために、構成要素を分解して解説します。

1. そもそもMCPとは？

MCP (Model Context Protocol) は、Anthropic社が提唱したオープンな規格です。AIモデルが外部ツールやデータを操作するためのプロトコルです。

通常、AIは外部のデータやローカルファイル、特定のツールに直接アクセスできません。MCPは、AIと外部ツール（データベース、Google Drive、ブラウザなど）をつなぐ「共通の接続端子」のような役割を果たします。

2. Playwright MCPができること

Playwrightは、Webブラウザ（Chrome, Firefox, Safari）をプログラムで操作するための強力な自動化ライブラリです。これをMCP経由でAIに接続することで、AIは以下のような指示を実行できるようになります。

  • 「〇〇というサイトにアクセスして、最新のニュースを3件要約して」
  • 「ECサイトで商品を検索し、価格を比較して表にして」
  • 「ログインが必要な管理画面に行って、特定のボタンをクリックしてスクリーンショットを撮って」
  • 「作成したWebサイトが正しく動くか、ブラウザテストを実行して」

3. なぜこれが画期的なのか？

これまでのAI（ChatGPTやClaudeの標準機能）との違いは以下の通りです。

機能従来のAI（ブラウジング機能）Playwright MCP
操作範囲公開されている情報の読み取りがメインクリック、入力、スクロール、ログイン等が可能
柔軟性AIが裏側で勝手に動く（ブラックボックス）ユーザーのローカル環境や特定のブラウザ設定で動かせる
用途情報検索業務自動化、動的なサイトのデータ収集、UIテスト

どうやって使うの？

すごくざっくりClaude Desktop で使用する場合で説明すると

  • Node.js をインストールしているPCで、Claude Desctopの設定画面で、Playwright公式が提供している @playwright/mcp というパッケージを使用するように設定します。これにより、ClaudeなどのAIからブラウザを直接操作できるようになります。
{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  },
  "preferences": {
    "coworkScheduledTasksEnabled": false,
    "ccdScheduledTasksEnabled": false,
    "sidebarMode": "chat",
    "coworkWebSearchEnabled": true
  }
}
  • 設定が終わった後、Claudeのチャット欄で「ブラウザを開いて〜」と指示を出します。
  • AIが内部的にPlaywrightを呼び出し、ブラウザが立ち上がって指示通りに動く様子（あるいはその結果）を確認できます。

[!IMPORTANT]

自分のPC上でブラウザが動くため、AIが「あなたの手」となって作業をしてくれる感覚に近いです。ただし、不用意に個人情報を入力させないよう、実行時の権限管理には注意が必要です。

以上、「Playwright MCPとは何か？3分で理解する」でした。