[Claude Code] MCPのPlaywright追加

Claude Codeにmcpのplaywrightを追加します。

bash

claude mcp add playwright npx @playwright/mcp@latest

claude code起動

bash

claude

/mcpで接続状況を確認します。

claude code

/mcp

以下のように「connected」となっていればOKです。

Playwrightが操作するChromeをインストールします。

bash

npx playwright install chrome

動作確認としてclaudeに以下のように指示します。

claude code

playwrightでgoogleのページを表示してください。

これでGoogleがブラウザで表示されればOKです。

補足
MCPサーバーの実行環境に日本語フォントが入っていないと日本語が正しく表示されないことがあります。
私の場合、devcontainerでUbuntuを使用してClaude Codeを使っていましたが、コンテナに日本語フォントを入れていなかったので日本語が文字化け（豆腐）になっていました。
以下のように.devcontainer.jsonに日本語ロケール設定と日本語フォントの導入処理を追加することで、日本語が正常に表示されるようになりました。

.devcontainer/devcontainer.json

{
    "image": "mcr.microsoft.com/devcontainers/base:ubuntu24.04",
    ：
    // Playwright/MCP を含むプロセスへ日本向けのロケール/タイムゾーンを配布
    "containerEnv": {
        "LANG": "ja_JP.UTF-8",
        "LC_ALL": "ja_JP.UTF-8",
        "TZ": "Asia/Tokyo"
    },
    // 初回作成後に日本語フォントとロケールを導入
    "postCreateCommand": "sudo apt-get update && sudo apt-get install -y locales fontconfig fonts-noto-cjk fonts-noto-cjk-extra fonts-ipaexfont-gothic fonts-ipaexfont-mincho fonts-noto-color-emoji && sudo locale-gen ja_JP.UTF-8 && sudo update-locale LANG=ja_JP.UTF-8 LC_ALL=ja_JP.UTF-8 && sudo fc-cache -f -v",
    ：
}