このガイドでは、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をスムーズに使用できます。
コメント