Playwright MCPは無料ですか？

無料です。Microsoftがオープンソースで公開しているMCPサーバー（npmパッケージ名 @playwright/mcp）で、Node.js 18以上があれば使えます。ただし、操作を指示するAIツール（Claude CodeやGitHub Copilotなど）の利用料は別途かかります。

Claude CodeにPlaywright MCPを追加するコマンドは？

「claude mcp add playwright -- npx @playwright/mcp@latest」です。--headless や --browser firefox などのオプションは、-- の後ろに続けて書きます。追加後は claude mcp list や /mcp で接続を確認できます。

Playwright MCPをブラウザ画面なしで動かせますか？

起動オプションに --headless を付けると、ブラウザの画面を表示せずに動かせます。デフォルトは画面を表示するheadedモードなので、CIやサーバー上で動かす場合は --headless を指定してください。

PlaywrightとPlaywright MCPの違いは？

Playwrightは、人がコードを書いてブラウザを自動操作するためのライブラリです。Playwright MCPは、そのPlaywrightをAIから使えるようにするMCPサーバーで、AIが自然言語の指示を受けて画面を読み取り、操作します。決まった手順を繰り返すならPlaywrightのスクリプト、手順を探りながら作業するならPlaywright MCPが向いています。

ログインが必要なサイトでも使えますか？

使えます。デフォルトの永続プロファイルではログイン状態が次回も保持されます。毎回同じ状態から始めたい場合は --isolated と --storage-state を組み合わせて、保存したログイン状態を読み込む方法が使えます。業務利用ではテスト用アカウントを使うのが安全です。

Playwright MCPの使い方【2026年】設定とできること

Playwright MCPとは

Playwright MCPは、AIにブラウザを操作させるためのMCPサーバーです。Microsoftが開発しているブラウザ自動化ツール「Playwright」をベースにしていて、npmパッケージ名は @playwright/mcp、ソースコードはGitHubの microsoft/playwright-mcp で公開されています。オープンソースで、利用料はかかりません。

Claude Code、VS Code（GitHub Copilot）、Cursor、Claude DesktopなどのMCPクライアントに追加すると、「このページを開いて」「フォームに入力して送信して」「スマホ幅で表示を確認して」といった指示で、AIが実際にブラウザを動かせるようになります。

MCP（Model Context Protocol）自体の説明はMCPの用語解説、ほかのMCPサーバーとの比較は「MCPサーバーとは？仕組み・おすすめ・作り方」をご覧ください。

スクリーンショットではなく「アクセシビリティツリー」で画面を読む

Playwright MCPの特徴は、画面を画像として見るのではなく、アクセシビリティツリー（ボタン、リンク、入力欄などの要素を構造化したデータ）として読み取る点です。

AIはページの「スナップショット」を受け取り、その中の要素に付いた参照IDを指定してクリックや入力をします。画像から座標を推測する方式と比べて、次のような利点があります。

画像認識ができるモデルでなくても使える

「どのボタンを押したか」があいまいにならず、操作が安定する

画像よりデータが軽い

公式READMEでも、この3点（速くて軽い、LLMに扱いやすい、操作が確定的）が主な特徴として挙げられています。

---

インストールと設定方法

動作環境

公式READMEに記載されている要件は次のとおりです（2026年11月時点、執筆時の最新版は0.0.85）。

| 項目 | 要件 | |---|---| | Node.js | 18以上 | | クライアント | VS Code、Cursor、Windsurf、Claude Desktop、Claude Code、Goose など MCP対応ツール | | ブラウザ | Chrome、Firefox、WebKit、Microsoft Edge から選択 |

どのクライアントでも、基本の設定は次のJSONです。npx で最新版を取得して起動する形なので、事前に npm install しておく必要はありません。

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

Claude Codeで使う

ターミナルで次のコマンドを実行します。

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

-- より後ろが、そのままサーバーの起動コマンドとして渡されます。オプションを付けたいときも -- の後ろに続けて書きます。

# ヘッドレスで、Firefoxを使う例
claude mcp add playwright -- npx @playwright/mcp@latest --headless --browser firefox

追加したら claude mcp list で登録を確認し、Claude Codeの中で /mcp を開くと接続状態が見られます。チームで共有したいときは --scope project を付けて .mcp.json に保存するのが便利です。スコープの使い分けやほかのMCPサーバーの追加方法は「Claude Code×MCPサーバー活用ガイド」で詳しく解説しています。

VS Code（GitHub Copilot）で使う

VS CodeのCLIから1行で追加できます。

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

公式READMEの「Install in VS Code」ボタンから追加することもできます。追加後は、CopilotのチャットをAgentモードにするとPlaywrightのツールが使えます。

Cursorで使う

「Cursor Settings」→「MCP」→「Add new MCP Server」を開き、名前を付けて、種類を command にし、コマンドに npx @playwright/mcp@latest を入力します。オプションを追加したい場合は「Edit」から引数を編集できます。

---

Playwright MCPでできること・活用例

1. 開発中の画面の表示確認

いちばん出番が多いのがこれです。「localhost:3000 を開いて、トップページのヒーロー部分が崩れていないか見て」「iPhone 15の幅で、メニューが開くか確認して」と頼むと、AIがブラウザを開いて確認し、問題があればそのままコードを直します。

Web制作の現場では、Claude Codeにデザイン修正をさせたあと、Playwright MCPで表示確認までさせる使い方をよくしています。Figmaのデザインと見比べる場合は「Figma MCPの使い方」もあわせてどうぞ。

2. E2Eテストの作成

Playwright MCPでブラウザを操作すると、実行した操作に対応するPlaywrightのコードが結果と一緒に返ってきます（--codegen オプションでTypeScript・Python・Java・C#を選べます。デフォルトはTypeScript）。

「ログインして、商品をカートに入れて、購入確認画面まで進むテストを書いて」と頼むと、AIが実際の画面を操作して要素を確認しながら、テストコードを組み立ててくれます。実在しないセレクタをでっち上げる、という失敗が起きにくいのが利点です。

なお、Playwright本体（Playwright Test）にも、テスト計画の作成（Planner）、テストコードの生成（Generator）、失敗したテストの修復（Healer）を行う「Test Agents」が用意されています。npx playwright init-agents --loop=claude のように、Claude Code・VS Code・Codex・OpenCode向けの定義ファイルを生成できます。テストを本格的に整備するなら、こちらも検討の価値があります。

3. フォーム入力・定型のWeb作業

管理画面へのデータ入力や、毎週同じ手順で行う確認作業もAIに任せられます。複数の入力欄を一度に埋める browser_fill_form、ファイルのアップロード、ダイアログへの応答など、一般的な操作はひととおり揃っています。

ただし、毎回同じ手順を繰り返すだけの作業なら、AIに毎回操作させるよりも、一度Playwrightのスクリプトにして定期実行するほうが速く、費用もかかりません。AIは「手順を探りながらスクリプトを作る」部分で使うのがおすすめです。

4. Webページからの情報収集（スクレイピング）

ページを開いて必要な情報を読み取り、表やCSVにまとめる、といった使い方もできます。JavaScriptで描画されるページでも、実際のブラウザで表示した内容を読めるのが強みです。

スクレイピングをするときは、対象サイトの利用規約やrobots.txtを守り、アクセス頻度にも配慮してください。ログインが必要な会員サイトの情報を収集する場合は、とくに規約の確認が必要です。

5. 見た目のチェック（ビジュアル確認）

browser_take_screenshot でスクリーンショットを撮り、画像を読めるモデルに見た目を確認させることもできます。--device "iPhone 15" や --viewport-size 1280x720 で表示サイズを固定しておけば、レスポンシブ表示の確認がしやすくなります。

主なツール一覧

| ツール名 | できること | |---|---| | browser_navigate | 指定したURLを開く | | browser_snapshot | ページのアクセシビリティスナップショットを取得 | | browser_click / browser_type | クリック、文字入力 | | browser_fill_form | 複数の入力欄をまとめて入力 | | browser_select_option | セレクトボックスの選択 | | browser_file_upload | ファイルのアップロード | | browser_take_screenshot | スクリーンショットの撮影 | | browser_console_messages | コンソールのログ・エラーを取得 | | browser_network_requests | ページが送ったリクエストの一覧を取得 | | browser_tabs | タブの一覧・作成・切り替え | | browser_wait_for | 文字の表示や時間経過を待つ |

コンソールのエラーやネットワークのリクエストまで取れるので、「フォーム送信で500エラーが出ている原因を調べて」といったデバッグにも使えます。

---

主なオプション

オプションは起動コマンドの引数として渡します（同名の環境変数や設定ファイルでも指定できます）。よく使うものをまとめました。

| オプション | 内容 | |---|---| | --headless | ブラウザ画面を表示せずに動かす（デフォルトは画面を表示する） | | --browser | 使うブラウザ。chrome、firefox、webkit、msedge から選択 | | --device | 端末をエミュレート（例："iPhone 15"） | | --viewport-size | 画面サイズを指定（例：1280x720） | | --caps | 追加機能を有効化（vision、pdf、devtools など） | | --isolated | ブラウザのプロファイルをディスクに保存せず、メモリ上だけで使う | | --user-data-dir | ブラウザのプロファイルを保存する場所を指定 | | --storage-state | ログイン状態（Cookie・ローカルストレージ）をファイルから読み込む | | --allowed-origins / --blocked-origins | アクセスを許可・禁止するオリジンを指定 | | --output-dir | スクリーンショットなどの保存先 | | --extension | 普段使っているChrome・Edgeにつなぐ（専用の拡張機能が必要） | | --config | 設定をJSONファイルにまとめて読み込む |

headless と headed の使い分け

デフォルトはブラウザの画面が表示される「headed」モードです。AIが何をしているか目で追えるので、最初はこのまま使うのがおすすめです。CI環境やサーバー上で動かす場合、作業中に画面が開くのが邪魔な場合は --headless を付けます。

スナップショットモードとビジョンモード

通常はアクセシビリティスナップショットで要素を特定して操作します。ただ、canvasで描画されたグラフや一部の独自UIのように、アクセシビリティツリーに要素が出てこない部分は操作できません。

そういうときは --caps=vision を付けると、スクリーンショット上の座標を使ってクリックなどをするツールが追加されます。画像を読めるモデルが必要で、トークンの消費も増えるので、必要な場面に限って使うのがいいと思います。

ログイン状態の扱い

デフォルトでは「永続プロファイル」が使われ、ログイン情報はプロジェクトごとのプロファイルに保存されて次回も引き継がれます。テストのたびにまっさらな状態から始めたい場合は --isolated、決まったテスト用アカウントでログインした状態から始めたい場合は --isolated と --storage-state を組み合わせます。

公式READMEによると、永続プロファイルは同時に1つのブラウザでしか使えません。複数のエージェントを並行で動かすときは、それぞれに --isolated を付けるか、別の --user-data-dir を指定してください。

---

MCPとPlaywright CLIの使い分け

Playwright公式は、Claude Codeのようなコーディングエージェントで使う場合、MCPではなく「Playwright CLI＋スキル」のほうが向いていることがある、とREADMEで案内しています。MCPはツールの定義やアクセシビリティツリーをそのままAIのコンテキストに読み込むため、トークンを多く消費するからです。

一方で、ブラウザの状態を保ったまま試行錯誤を続ける探索的な作業や、長時間動く自律的なワークフローではMCPが向いている、とも書かれています。

| 使い方 | 向いているもの | |---|---| | ときどき画面を確認する、手順を探りながら操作する | Playwright MCP | | 大きなコードベースで、テストやブラウザ操作を大量に回す | Playwright CLI＋スキル | | 決まった手順を毎日実行する | Playwrightのスクリプトを書いて定期実行 |

---

セキュリティの注意点

Playwright MCPは、AIに「ブラウザを自由に操作できる権限」を渡すツールです。公式READMEにも「Playwright MCPはセキュリティ境界ではない」と明記されています。次の点は押さえておいてください。

普段使いのブラウザやアカウントとは分ける

--extension で普段のChromeにつなぐと、ログイン済みのサービスすべてにAIが触れられる状態になります。業務で使うなら、テスト用のアカウントと --isolated を基本にするのが安全です。

Webページからの「指示」に注意する

AIが読み込んだWebページの中に、AIへの指示に見せかけた文章が仕込まれている可能性があります（プロンプトインジェクション）。信頼できないサイトを巡回させるときは、決済やメール送信、データ削除のような取り返しのつかない操作をさせない、各操作をClaude Code側の承認制のままにしておく、といった対策が必要です。

アクセス制限は「便利機能」と考える

--allowed-origins や --blocked-origins でアクセス先を絞れますが、READMEではこれもセキュリティ境界ではない（リダイレクトには効かない）と書かれています。同様に、--secrets で指定した秘密情報をAIへの応答から伏せる機能も「便利機能であってセキュリティ機能ではない」とされています。本当に守るべきものは、OSやネットワーク、クライアント側の権限設定で守る前提で考えてください。

任意コード実行のツールに注意する

browser_run_code_unsafe は、Playwrightのコードをサーバーのプロセス内でそのまま実行するツールで、公式にも「任意コード実行と同等」と書かれています。AIがこのツールを使おうとしたら、内容を確認してから許可するようにしてください。

なお、ファイルへのアクセスはデフォルトでワークスペースのフォルダ内に制限されています。--allow-unrestricted-file-access は、必要がない限り付けないでください。

---

まとめ

Playwright MCPは、Microsoftが公開しているブラウザ操作用のMCPサーバー（@playwright/mcp）。無料で使える

Claude Codeは claude mcp add playwright -- npx @playwright/mcp@latest、VS Codeは code --add-mcp、Cursorは設定画面から追加

表示確認、E2Eテスト作成、フォーム入力、情報収集などに使える

画面はアクセシビリティツリーで読む。読めない部分は --caps=vision で座標操作を追加

公式に「セキュリティ境界ではない」とされているので、テスト用アカウントと --isolated を基本に

---

ブラウザ操作を含む業務の自動化をご検討の方へ

Swaaabでは、Playwright MCPやClaude Codeを組み合わせて、Webシステムの操作やデータ入力、確認作業を自動化するAIエージェントを開発しています。「この作業はAIに任せられるのか、スクリプトで十分なのか」の切り分けからご相談いただけます。

詳しくはAIエージェント開発のサービスページをご覧ください。具体的なご相談はお問い合わせからどうぞ。