このガイドでは、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を使用する際にバージョン不一致の問題が発生した場合は、以下の手順で解決できます：
- 特定バージョンのPlaywrightサーバーを別プロセスで実行
- MCPクライアント設定をクライアント・サーバー方式に変更
- 必要に応じてpackage.jsonのバージョンを調整
この方法を使えば、バージョン不一致によるエラーを解消し、Playwright MCPをスムーズに使用できます。
コメント