--- title: "Playwright MCPとは？設定・使い方からDify連携まで実務ガイド【2026年版】" url: "https://www.issoh.co.jp/tech/details/6172/" published: 2025-04-07 updated: 2026-09-27 categories: ["AIエージェント・MCP"] publisher: "株式会社一創" --- # Playwright MCPとは？設定・使い方からDify連携まで実務ガイド【2026年版】 Playwright MCPは、Microsoftが公開する公式MCPサーバ`@playwright/mcp`で、Claude・Cursor・VS CodeなどのAIクライアントからブラウザ操作を実行させるための橋渡し役です。従来のPlaywright（E2Eテスト用ライブラリ）と混同されやすいですが、両者は別物です。最大の特徴は、スクリーンショットではなくページのアクセシビリティツリー（構造化スナップショット）を使う点で、画像認識モデルなしに要素を正確に指定できます。この記事では、正しい定義・各クライアントの設定・できること・ログイン認証の保持・RPAとの違い、そして主力クエリであるDifyからの利用までを、2026年7月時点の仕様に沿って整理します。 ## まとめ：Playwright MCPの要点 - Playwright MCPは公式MCPサーバ`@playwright/mcp`。E2Eテスト用のPlaywrightライブラリとは別物で、AIにブラウザ操作をさせるための部品。 - 操作はアクセシビリティツリーのスナップショット方式。スクリーンショット不要でテキストから要素を決定的に指定する。座標クリックが要る場面だけ`--caps=vision`で切り替える。 - 設定はどのクライアントも同じで、`npx @playwright/mcp@latest`を設定JSONに登録するだけ。バージョンは0.0.x系（2026年7月時点で0.0.78）と流動的なため`@latest`指定が無難。 - ログイン状態は`--storage-state`と`browser_storage_state`ツールで保持できる。認証が要る自動化はここが要。 - DifyからはPlaywright MCPを`--port`付きで常駐サーバとして起動し、DifyのMCPプラグインにエンドポイントを登録する。 ## Playwright MCPとは何か（正しい定義） Playwright MCPは、Model Context Protocol（MCP）に対応したブラウザ操作サーバです。MCPはAIクライアントと外部ツールをつなぐ共通規格で、Playwright MCPはその「ツール側」として`browser_navigate`や`browser_click`といったブラウザ操作をAIに公開します。よくある誤解は「Playwright本体にプロトコル層を足した拡張版」という説明ですが、これは正確ではありません。実体はMicrosoftが`microsoft/playwright-mcp`で開発する独立したMCPサーバで、内部でPlaywrightを動かしてブラウザを制御します。 ### アクセシビリティツリー方式（スクリーンショット不要） Playwright MCPが返すのは画像ではなく、ページの役割・名前・テキストを構造化したアクセシビリティスナップショットです。各要素には一意の参照（ref）が振られ、AIはその参照を指定して決定的に操作します。テキストベースのため画像認識モデルは不要です。ただしアクセシビリティツリーはページによっては長くなり、モデルのコンテキストを消費します。この冗長さが、後述するCLIとの使い分けの理由になります。要素がテキストで表現できない特殊UIや、ピクセル座標での操作が避けられない場面では`--caps=vision`を有効化すると`browser_mouse_click_xy`など座標系ツールが使えます。既定では使わない、が判断の基準です。 ### 従来のPlaywright（テストコード）との違い 従来のPlaywrightは、開発者が`chromium.launch()`のようなコードを書いてE2Eテストを組む「ライブラリ」です。対してPlaywright MCPは、AIが自然言語の指示から自律的にツールを呼び出す「サーバ」で、人がテストコードを書きません。旧来のサンプルコードにあった`const browser = await chromium.launch()`のような記述はPlaywrightライブラリの使い方であって、Playwright MCPの設定・利用とは無関係です。MCP側で書くのは、次章の設定JSONだけです。 ## Playwright MCPの設定方法（VS Code / Cursor / Claude Desktop） 設定はクライアントを問わずほぼ共通で、MCPサーバ定義に`npx @playwright/mcp@latest`を登録します。Node.jsが入っていれば、ブラウザ本体は初回起動時に自動でダウンロードされます。 ``` { "mcpServers": { "playwright": { "command": "npx", "args": ["@playwright/mcp@latest"] } } } ``` ### 各クライアントの登録手順 VS Codeはコマンド一発で追加できます。 ``` code --add-mcp '{"name":"playwright","command":"npx","args":["@playwright/mcp@latest"]}' ``` Cursorは「Settings → MCP → Add new MCP Server」で同じ`command`と`args`を入力します。Claude Desktopは`claude_desktop_config.json`の`mcpServers`に上記JSONを貼り付けて再起動すれば認識されます。GeminiのCLIやCline、Windsurfなど他のMCPクライアントでも、登録するのは同じ`npx @playwright/mcp@latest`です。クライアントごとに設定ファイルの場所が違うだけで、指定内容は変わりません。 ### 主なオプション（起動時フラグ） 挙動は起動フラグで調整します。実務で使う頻度が高いものを絞ると次の通りです。 | フラグ | 役割 | | -------------- | ---------------------------------------------------- | | –headless | 画面表示なしで実行（既定はヘッド有り） | | –browser | chrome / firefox / webkit / msedge を選択 | | –isolated | プロファイルをメモリ上のみに保持（毎回まっさら） | | –storage-state | 保存済みのCookie・localStorageを読み込む（認証保持） | | –caps | vision / pdf / devtools / storage / network などを追加有効化 | | –port | HTTPサーバとして常駐（Dify等の外部連携で使用） | | –device | “iPhone 15″などデバイスエミュレーション | ## Playwright MCPでできること 公開されるツールは、ページ遷移`browser_navigate`、クリック`browser_click`、入力`browser_type`、フォーム一括入力`browser_fill_form`、スナップショット取得`browser_snapshot`、スクリーンショット`browser_take_screenshot`、JavaScript実行`browser_evaluate`、タブ操作`browser_tabs`、ファイルアップロード`browser_file_upload`などです。`--caps`を付けるとPDF保存やネットワークモック、Cookie操作といった機能も足せます。AIはこれらを組み合わせ、「サイトを開いてログインし、一覧を取得する」といった複数手順を自分で分解して実行します。 ### スクレイピングでの使い方 スクレイピングでは、`browser_navigate`で対象ページを開き、`browser_snapshot`で構造化テキストを取得してAIに必要項目を抜き出させる流れが基本です。スナップショットは要素の役割とテキストを含むため、DOM全体を渡すより抽出精度が安定します。ページネーションや無限スクロールがある場合は`browser_wait_for`で読み込みを待ってからスナップショットを取り直します。大量ページを高速で回す用途より、構造が変わりやすいサイトをAIに判断させながら取る用途に適します。定型・大量処理なら通常のPlaywrightスクリプトの方が速く安定します。 ### ログイン認証の保持 認証が必要なサイトを扱うときは、ログイン後の状態を保存して使い回します。既定では`--user-data-dir`の永続プロファイルにセッションが残りますが、明示的に固定したい場合は`browser_storage_state`ツールでCookieとlocalStorageをJSONに書き出し、次回以降は`--storage-state`で読み込ませます。 ``` npx @playwright/mcp@latest --isolated --storage-state=./auth.json ``` CI環境や共有マシンでは`--isolated`と組み合わせ、保存したstateファイルだけを持ち込むと、余計なセッションを残さずに認証を再現できます。 ## Playwright MCPでE2Eテストを自動化する 検索上位の多くがE2Eテスト自動化を主題にしている通り、Playwright MCPの中心的な使い道はテスト作成の効率化です。AIにアプリを実際に触らせ、スナップショットで画面構造を把握させながら、テスト手順を固めていきます。テストランナー自体を置き換えるものではなく、「壊れにくいテストをAIに書かせる・直させる」ための補助と捉えると役割がはっきりします。 ### アサーションとロケータ生成（–caps=testing） `--caps=testing`を付けると、検証用のツール群が有効になります。テキスト表示の確認`browser_verify_text_visible`、要素の可視確認`browser_verify_element_visible`、入力値の確認`browser_verify_value`に加え、`browser_generate_locator`で壊れにくいロケータを生成できます。ロケータの基準属性は`--test-id-attribute`で指定でき、既定は`data-testid`です。実務では、AIに一連の操作を探索させて手順を固め、生成したロケータと検証を通常のPlaywrightテストコードへ落とし込む、という流れが安定します。画面変更でテストが壊れたときも、AIにスナップショットを取り直させて修正案を出させる自己修復的な使い方が得意です。 ## RPAツール・従来の自動化との違い 「rpa playwright」「mcp ブラウザ操作」で調べる人が知りたいのは、既存のRPAと何が違うかです。従来型RPAは画面上の座標や録画した操作を再生する方式で、レイアウト変更に弱く、GUI前提で非エンジニア向けに作られています。Playwright MCPはDOMとアクセシビリティツリーを見て操作するため、多少のレイアウト変更に強く、AIが手順を組み立てる分だけ非定型の判断に対応できます。一方で、デスクトップアプリや基幹システムの画面操作は守備範囲外で、そこはRPAの領域です。 | 観点 | 従来型RPA | Playwright MCP | | --------- | -------------- | ---------------- | | 操作対象 | 画面全般（デスクトップ含む） | Webブラウザ中心 | | 要素の指定 | 座標・画像マッチ | アクセシビリティツリー（ref） | | レイアウト変更耐性 | 低い | 比較的高い | | 手順の作り方 | 録画・GUI設定 | AIが自然言語から自動生成 | | 費用 | ライセンス制が多い | OSSで基本無料 | デスクトップ業務まで含めて自動化したい場合は、無料のオープンソースRPAという選択肢もあります。用途の切り分けは[OpenRPAとは？無料オープンソースRPAの使い方・インストール・対応OS](https://www.issoh.co.jp/tech/details/9050/)と読み比べると判断しやすくなります。 ## DifyからPlaywright MCPを使う手順 「dify playwright mcp」で調べる人は、DifyのエージェントにWeb操作をさせたい層です。DifyはローカルのMCPサーバをツールとして呼び出せるため、Playwright MCPを常駐サーバとして起動してエンドポイントを登録します。まずポートを指定して起動します。 ``` npx @playwright/mcp@latest --port 8931 --host 0.0.0.0 ``` 次にDifyのMCPプラグイン（SSE / Streamable HTTP）に、起動したサーバのエンドポイント（例: `http://:8931/mcp`、SSEトランスポート時は末尾を`/sse`）を登録します。セルフホスト版DifyをDockerで動かしている場合は、Difyコンテナから見たホスト名（`host.docker.internal`など）とネットワーク到達性に注意が必要です。登録後は、Difyのエージェント戦略から「このサイトを開いて操作して」と指示すると、AIがPlaywright MCPのツールを選んで実行します。Dify側でプラグイン導入自体につまずく場合は[Difyにプラグインをインストールするための手順と注意点](https://www.issoh.co.jp/tech/details/7098/)を先に確認してください。 ## MCPサーバとCLIの使い分け 2026年に入り、Microsoftは`@playwright/mcp`とは別に`@playwright/cli`というコーディングエージェント向けの選択肢を用意しました。両者は目的が違うため、使い分けの基準を押さえておくと迷いません。 MCPサーバは、状態を保持しながら試行錯誤する探索的な自動化や、長時間動く自律ワークフローで力を発揮します。反面、ツール定義と冗長なアクセシビリティツリーがモデルのコンテキストを圧迫します。CLIは、コマンドを直接叩く分トークン効率が良く、巨大なコードベースと並行してブラウザ操作を回す高スループットな用途に向きます。判断としては、AIに手探りで操作させたいならMCP、Claude CodeやCursorのエージェントに定型的なブラウザ操作を組み込むならCLIが軸、という切り分けが実務的です。両方入れて用途で呼び分けても構いません。CursorのAIにブラウザ操作を任せる具体的なやり方は[Cursorの「Connect to Browser」とは？AIがブラウザを操作する仕組み・設定・使い方【Cursor 2.0以降】](https://www.issoh.co.jp/tech/details/10297/)で補完できます。 ## よくある質問 ### Playwright MCPとは何ですか？ Microsoft公式のMCPサーバ`@playwright/mcp`で、AIクライアントにブラウザ操作ツールを提供する部品です。E2Eテスト用のPlaywrightライブラリとは役割が異なります。 ### Playwright MCPは無料で使えますか？ オープンソースで、サーバ自体の利用料はかかりません。費用が発生するのは、接続先のAI（ClaudeやGeminiなど）のAPI・利用料側です。 ### スクリーンショットなしで操作できるのはなぜですか？ アクセシビリティツリーのスナップショットで要素を構造的に把握するためです。画像認識モデルが不要で軽量です。座標クリックが必要なときだけ`--caps=vision`を使います。 ### ログイン状態を維持したまま自動化できますか？ できます。`browser_storage_state`で認証状態をJSONに保存し、次回以降`--storage-state`で読み込ませます。 ### Electronアプリなどブラウザ以外も操作できますか？ Playwright MCPはWebブラウザ操作が対象です。Electronのように内部がChromiumのアプリはCDP接続で扱える場合がありますが、デスクトップアプリ全般の自動化はRPAの領域です。 ## 関連記事 - [Serena MCPとは？仕組み・導入手順・Claude Code連携を実務目線で解説](https://www.issoh.co.jp/tech/details/8197/) - [FastMCPとは｜PythonでMCPサーバーを最速構築するフレームワークの使い方【2026年版】](https://www.issoh.co.jp/tech/details/6507/) - [Cursorの「Connect to Browser」とは？AIがブラウザを操作する仕組み・設定・使い方【Cursor 2.0以降】](https://www.issoh.co.jp/tech/details/10297/) - [OpenRPAとは？無料オープンソースRPAの使い方・インストール・対応OS](https://www.issoh.co.jp/tech/details/9050/) - [Difyにプラグインをインストールするための手順と注意点](https://www.issoh.co.jp/tech/details/7098/) --- 出典: [Playwright MCPとは？設定・使い方からDify連携まで実務ガイド【2026年版】]()（株式会社一創）