Playwright MCP セットアップガイド: バージョン不一致問題の解決法

このガイドでは、Playwright MCPの正しいセットアップ方法と、特にバージョン不一致の問題を解決する方法を説明します。すべての手順は実際に検証済みの方法に基づいています。

MicrosoftのPlaywright MCP使ってみた！！！
キャッチアップとかこれでイケるかも！
セットアップは癖があります！Configは下記です
---
"playwright": {
"command": "node",
"args": [
"C:/Prj/playwright-mcp/cli.js"
],
"env": {
"PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:3181/"
}
} https://t.co/DmxHSzbFg8 pic.twitter.com/ajbxWEO7q4

— Maki@Sunwood AI Labs. (@hAru_mAki_ch) March 24, 2025

問題: バージョン不一致エラー

Playwright MCPを使用する際、サーバーとクライアントのバージョンが一致していない場合、「428 Precondition Required」エラーが発生します。このエラーは以下のようなメッセージを表示します：

Error: browserType.connect: WebSocket error: ws://localhost:xxxxx/ 428 Precondition Required
╔════════════════════════════════════════════════════╗
║ Playwright version mismatch:                       ║
║   - server version: v1.51                          ║
║   - client version: v1.52                          ║
║                                                    ║
║ If you are using VSCode extension, restart VSCode. ║
║                                                    ║
║ If you are connecting to a remote service,         ║
║ keep your local Playwright version in sync         ║
║ with the remote service version.                   ║
║                                                    ║
║ <3 Playwright Team                                 ║
╚════════════════════════════════════════════════════╝

解決策: クライアント・サーバー方式のセットアップ

この問題を解決するための検証済みの方法は以下の通りです：

1. 特定バージョンのPlaywrightサーバーを起動

まず、特定のバージョン（例：1.51）のPlaywrightサーバーを起動します：

npx playwright@latest run-server

この例では以下のような出力が表示されます：

Listening on ws://localhost:3181/

表示されたWebSocketエンドポイントをメモしておきます。

2. MCPクライアント設定を調整

次に、MCPの設定を以下のように変更して、ローカルで実行しているPlaywrightサーバーを使用するよう設定します：

{
  "mcpServers": {
    "playwright": {
      "command": "node",
      "args": [
        "C:/Prj/playwright-mcp/cli.js"
      ],
      "env": {
        "PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:3181/"
      }
    }
  }
}

この設定では以下のポイントが重要です：

• commandをnodeに変更
• argsにローカルのPlaywright MCPのcli.jsへのパスを指定
• envセクションにPLAYWRIGHT_WS_ENDPOINTを追加し、サーバーのWebSocketエンドポイントを指定

package.jsonのバージョン調整

さらに、package.jsonでPlaywrightのバージョンを明示的に設定することで問題を解決できます：

"dependencies": {
  "playwright": "1.51",
  "@playwright/test": "1.51"
}

gitの差分からわかるように、Playwrightのバージョンを1.52.0-alpha-2025-03-21から1.51に変更することで問題が解決しました。

まとめ

Playwright MCPを使用する際にバージョン不一致の問題が発生した場合は、以下の手順で解決できます：

1. 特定バージョンのPlaywrightサーバーを別プロセスで実行
2. MCPクライアント設定をクライアント・サーバー方式に変更
3. 必要に応じてpackage.jsonのバージョンを調整

この方法を使えば、バージョン不一致によるエラーを解消し、Playwright MCPをスムーズに使用できます。