Playwright MCP

Docker上でPlaywright MCPを動作させる方法 Playwright MCP用Dockerfileの構成例 Playwright MCPサーバーはNode.js上で動作するため、DockerイメージにはNodeおよびブラウザ（Chromiumなど）の依存関係が必要です。MicrosoftはPlaywright付属の公式Dockerベースイメージ（Ubuntuベースでブラウザ類を含む）を提供しており、これを利用すると環境依存の問題を避けられます 。例えば、Dockerfileは以下のように構成できます（公式イメージを使用する例）: # Playwright公式イメージを使用（Node 18 + ブラウザ依存関係込み） FROM mcr.microsoft.com/playwright:v1.50.1-jammy # 作業ディレクトリ設定 WORKDIR /app # Playwright MCPサーバーをインストール RUN npm install -g @playwright/mcp@latest # ポート設定（SSE用既定ポートを開放） EXPOSE 8931 # コンテナ起動時にMCPサーバーをヘッドレスモードで起動 CMD ["npx", "@playwright/mcp", "--headless", "--port=8931", "--host=0.0.0.0"] 上記では、Microsoft提供のPlaywright公式イメージ（mcr.microsoft.com/playwright:...）をベースに使用しています。このイメージにはブラウザ実行に必要なライブラリが全て含まれているため、追加の依存インストールが不要です 。Dockerfile内で@playwright/mcpパッケージをグローバルインストールし、コンテナ起動時にnpx @playwright/mcpコマンドでサーバーを起動する構成になっています。公式のPlaywright MCP Dockerイメージも公開されており、VS Code等から直接以下のコマンドでコンテナを起動することもできます : "mcpServers": { "playwright": { "command": "docker", "args": [ "run", "-i", "--rm", "--init", "--pull=always", "mcr.microsoft.com/playwright/mcp" ] } } 補足: 上記はMCPクライアント設定の例で、docker runにより公式イメージmcr.microsoft.com/playwright/mcpを起動する方法を示しています 。自前でDockerfileを用意する場合でも、公式イメージをベースにdocker buildでイメージを構築できます（公式リポジトリにはDockerfileが含まれており、docker build -t mcr.microsoft.com/playwright/mcp .でビルド可能と記載されています ）。 ノンビジュアル（ヘッドレス）モードでの起動設定 Dockerコンテナ内ではディスプレイ表示がないため、ブラウザはヘッドレス（headless）モードで実行する必要があります。Playwright MCPサーバーはデフォルトではヘッドフル（UI表示）で起動しようとしますが、Docker環境では--headlessオプションを指定して非表示起動することが推奨されています 。上記DockerfileのCMDでは--headlessフラグを付与しているため、Chromiumを含む各ブラウザがGUIなしで起動します。 また、Chromiumの場合は最新のヘッドレスモードを利用するために--headless=newフラグを指定することが可能です。このオプションはChrome 112以降で導入された新しいヘッドレスモードを有効にし、従来に比べて本番ブラウザと近い動作をします。Playwright経由でChromiumを起動する際にlaunchOptionsでargs: ['--headless=new']を渡すか、環境変数で指定することで、より安定したヘッドレス動作となります（Chrome 112+では将来的にデフォルトになる機能です ）。ただし基本的にはheadless: trueを指定するだけで充分です。MCPサーバーをDocker上で起動する際は必ずヘッドレスモードになるよう設定しましょう 。 ヘッドレス設定の具体例: • コマンドラインの場合: npx @playwright/mcp --headless ... • Nodeコードで起動する場合: createConnection({ browser: { launchOptions: { headless: true } } }) のように設定 。 MCPサーバーの起動コマンドとAPIエンドポイント公開 Dockerコンテナ内でMCPサーバーを起動するためのコマンドは、上記DockerfileのCMDに示したように npx @playwright/mcp を用います。起動時に以下の主なオプションを指定します: • --port <ポート番号> – サーバーが待ち受けるポート番号を指定します。MCPサーバーはServer-Sent Events (SSE) による通信を行うため、このポートでクライアントからのSSE接続を待ち受けます 。デフォルトではポート8931が使われることが多く、公式ドキュメントの例でも8931が指定されています 。 • --host <ホスト> – バインドするホストアドレスです。デフォルトはlocalhostのみバインドする設定ですが、Dockerコンテナ外部からアクセスさせるには--host=0.0.0.0を指定して全てのインターフェースで待ち受ける必要があります 。これによりホストマシンや他コンテナからの接続が可能になります。 • --headless – 前述の通り、ブラウザをヘッドレスモードで起動するためのオプションです。 起動コマンド例: コンテナ内で自動実行する場合はDockerfileのCMDにて npx @playwright/mcp --headless --port=8931 --host=0.0.0.0 のように指定します。手動でコンテナ内から起動する場合も同様です。 コンテナを起動したら、ホスト側にポートを公開する必要があります。Docker Composeを使う場合、例えばdocker-compose.ymlで ports: - "8931:8931" のようにポートマッピングし、.envでMCP_HOST_PORT=8931を指定します  。Docker単体で起動する場合は docker run -d -p 8931:8931 <自作MCPイメージ> のように-pオプションでポート8931を公開してください。 外部ツールからアクセス可能なAPIエンドポイント Playwright MCPサーバーはSSEエンドポイントを介してLLMエージェントやツールから操作を受け付けます。起動後、デフォルトではhttp://<ホスト>:8931/sseというURLが公開され、ここにクライアント（AIエージェント等）が接続します 。外部の自動化ツール（例: n8n）は、このエンドポイントにアクセスしてMCPサーバーとやり取りできます。例えばMCPクライアント設定では次のようにSSEのURLを指定します : { "mcpServers": { "playwright_sse": { "url": "http://<サーバーIP>:8931/sse" } } } 上記のように設定することで、n8nや他のMCP対応クライアント（VS CodeのCopilot、Cursorなど）がPlaywright MCPサーバーに接続し、ブラウザ操作のコマンドを送信できます。MCPサーバーはSSEストリームを通じて結果をリアルタイムにクライアントへプッシュします（MCPは一方向通信のSSEで結果送信、クライアントからのコマンド送信は内部でHTTPリクエストなどにより非同期に行われます  ）。n8nの場合、コミュニティ製のMCPノード（n8n-nodes-mcp）を利用すると、**「ツール一覧の取得」「ツール実行」**などのアクションでMCPサーバーにコマンドを送れます。例えば「Playwright MCP」ツールを選択し、操作（navigateやclick等）とパラメータを指定すると、n8nが裏側でMCPサーバーに必要な命令を送り、その結果を受け取ることができます。 メモ: SSEエンドポイントにクライアントから接続するときは、MCPサーバー起動ログに接続情報が出力されます。接続URLやセッション情報がログに表示されるので、まずサーバー起動後にdocker logs等でログを確認し、正常に起動しているか確認してください 。ログにエラーが無いこと、そしてSSE server listening on port 8931のようなメッセージ（起動時に出力）が出ていることを確認します。 実行結果のログや出力の扱い Playwright MCPサーバーが実行する一連のブラウザ操作のログや結果出力を管理する方法について説明します。 • コンテナログの確認: MCPサーバー自体の標準出力ログには、サーバー起動メッセージやエラー、そしてクライアントからのコマンド実行状況などが出力されます。Docker環境ではdocker logs <コンテナ名>でリアルタイムにログを確認可能です。特に接続時やエラー時の情報が含まれるため、トラブルシューティング時にはこのログを参照します 。Playwright自体のデバッグログを詳細に見たい場合、環境変数DEBUG=pw:apiを設定してコンテナを起動すると、PlaywrightのAPI呼び出し内容が詳細に出力されます  。 • 出力ファイルの保存: MCPサーバーには--output-dirオプションがあり、スクリーンショットやPDF等の生成ファイルを保存するディレクトリを指定できます 。例えば、--output-dir=/app/outputと起動時に指定し、そのパスをDockerボリュームとしてホストにマウントしておけば（docker-compose.ymlでvolumes設定）、ブラウザ操作で生成されたファイルをホスト側で確認できます。既定ではアクセシビリティツリーに基づくスナップショットやテキスト抽出が主であり画像は送信されませんが、Visionモード（--visionオプション）を有効にするとスクリーンショットベースの操作となり、画像も生成されます  。その際に画像データを直接SSE送信する代わりに、--image-responses設定でクライアントへの画像送信を制御したり（例えばomit設定で送らずにサーバー側に保存 ）、outputDirに保存する運用も可能です。 • 実行結果の取得: MCP経由で行われた操作の結果（例えばbrowser_snapshotで得たページ内容や、browser_titleで取得したタイトルなど）は、SSEストリーム経由でクライアント（n8n等）に送られます。n8nのMCPノードを使用する場合、「Execute Tool」（ツール実行）ノードの出力としてそれら結果データをフロー内で扱うことができます。例えば、ページから抽出したテキストは次のノードに渡したり、スクリーンショットをbase64で受け取って後続処理する、といったワークフローが可能です。ログレベルな情報（デバッグ用途の出力）以外のメイン結果は基本的にこのプロトコル通信で取得する設計になっています。 • Playwright Traceの活用: Playwrightには実行内容を時系列で記録するTrace機能があり、MCPサーバーでも--save-traceフラグを付けて起動すると各セッションのTraceを保存できます 。保存先は上記outputDirに指定されたディレクトリです。Traceファイルを取得しておけば、PlaywrightのTrace Viewerでブラウザ操作の詳細なステップを後から可視化・分析できます。自動実行の不具合調査などに役立つでしょう。 類似事例・参考情報 Docker上でPlaywright MCPサーバーを運用するケースは増えており、コミュニティによる事例も公開されています。 • GitHub実例（Docker環境構築）: 例えば iuill/playwright-mcp-docker というリポジトリでは、Docker Composeを用いてPlaywright MCPサーバーをセットアップするテンプレートが公開されています。この構成では.envファイルでポートやヘッドレスモードを設定し、entrypointスクリプトで環境変数に応じて--headlessや--portオプションを自動付与してnpx @playwright/mcpを実行するようになっています 。日本語READMEも用意されており、Docker上でのMCP運用方法を詳細に解説しています。 • Qiita記事の紹介: Qiita上でもMCPに関する知見が共有されています。例えば、Next.js＋Mastra環境でPlaywright MCPを利用した事例では、MCPクライアント(@mastra/mcp)の設定でDocker経由のサーバー起動を指定し、mcr.microsoft.com/playwright/mcpイメージを用いている様子が紹介されています 。このようにコード上からDockerコンテナを呼び出す形でPlaywright MCPを利用するアプローチも取られています。また、「Docker MCP Toolkit」を使ってVSCode上から様々なMCPサーバー（Playwright含む）をワンクリックで動かす方法も紹介されています 。Docker Desktopの拡張機能であるMCP ToolkitにはPlaywright MCPがプリセットされており、mcp/playwrightイメージを用いて手軽にコンテナを起動できます 。 • Mediumやブログ: Playwright MCPの登場（2025年3月）以降、多くのブログでも設定方法や活用例が取り上げられています。QA TouchブログではMCPサーバーの基本的なセットアップ手順と並行実行のメリットが説明されており、特にnpx playwright launch --serverコマンドでのサーバー起動とconnectOverCDPによる接続方法が紹介されています  。ただし、これは旧来のCDP接続例で、現在の公式MCPではSSE接続が主流です。その他、MicrosoftのPlaywright公式リポジトリREADME やModel Context Protocol解説記事 も参照すると、MCPサーバーの機能（スナップショット取得、クリック、入力などのコマンド一覧）や通信方式の詳細が理解できるでしょう。 以上の情報を踏まえれば、Docker上でPlaywright MCPサーバーを構築し、ヘッドレスブラウザを外部から操作するためのポイントは以下の通りです: • 公式イメージや実績あるDockerfile構成を利用して環境依存問題を回避する 。 • ヘッドレスモード（--headless、必要に応じて--headless=new）でブラウザを起動する 。 • 適切なホスト・ポート設定（--host=0.0.0.0とポート公開）によって外部ツールから接続可能にする  。 • SSEエンドポイント(/sse)を介したクライアント連携を行い、n8n等のワークフローからHTTPリクエストや専用ノードでMCPコマンドを呼び出す。 • ログと出力を管理しやすいようにdocker logsや--output-dir、Trace機能を活用する 。 • 公開事例やツール（Docker MCP Toolkit等 ）も参考にしつつ、自身の用途に合った構成を整える。 これらを実践すれば、Dockerコンテナ上で稼働するPlaywright MCPサーバーをAIエージェント（n8n等）から自在に制御し、自動ブラウザ操作を安定して行えるでしょう。各種設定の詳細や最新情報は公式リポジトリのREADMEやコミュニティの情報源も合わせて参照してください  。 参考資料: • Microsoft Playwright MCP公式README   • Docker Compose環境例 (iuill/playwright-mcp-docker)   • Qiita記事（MCP利用例）   • QA Touchブログ (MCPサーバー概要)