ClaudeでplaywriteMCP設定

Cursorでは難なくplaywriteのmcpが設定できたのだが、Claude Desktopではエラーが出ていたので対処してみた。

公式の手順通りに下記の記述をclaude_desktop_config.jsonに記述すれば良いだけのはず。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest"
      ]
    }
  }
}

ちなみに、claude_desktop_config.json は、ClaudeのSettings…からDeveloperを選び、Edit Config で編集します。

そして、再起動すれば、利用できるはずなのですが、下記のエラーで利用できず。

エラーを見ると、Server disconnected でサーバーへ接続出来ていないようです。

この解決をClaudeに回答してもらいました。

Claude 解決案

これらのエラーメッセージから、Playwright MCPサーバーへの接続に問題があるようですね。エラーに「spawn npx ENOENT」というメッセージがあることから、システムがnpxコマンドを見つけられていない可能性があります。

以下の対処法を試してみてください：

Node.js/npmが正しくインストールされているか確認する
- ターミナルでnode -vとnpm -vを実行して、インストールされていることを確認
- インストールされていない場合は、Node.js公式サイトからダウンロードしてインストール

npxのパスを確認する

完全なパスを指定してみる：

{
"mcpServers": {
  "playwright": {
    "command": "/usr/local/bin/npx", // Macの場合の一般的なパス
    "args": ["-y", "@executeautomation/playwright-mcp-server"]
  }
}
}

Windowsの場合は適切なパスに変更してください

パッケージをインストールしてから実行する
- まず、ターミナルでnpm install -g @executeautomation/playwright-mcp-serverを実行
- その後、設定ファイルを変更：
```
{
"mcpServers": {
  "playwright": {
    "command": "playwright-mcp-server",
    "args": []
  }
}
}
```
MCP設定の場所が正しいか確認する
- Claudeの設定ファイルが正しい場所に保存されているか確認してください