Claude Codeとplaywright mcpを連携させると開発体験が向上するのでみんなやろう

どうもこんにちは、Claude Codeで遊び始めて2週間くらいが立ちましたがまだまだ模索中です

最近覚えた新しいテクニックが playwright-mcp(https://github.com/microsoft/playwright-mcp) を使ってブラウザ操作を全てclaude code経由でやるというものです

playwrightはpuppeteerと同じく、chromeなどのブラウザをjsで操作するやつなのですが、puppeteerよりも使い勝手が良い&更新が超高頻度なのでよく使っています

※ただし、mcpサーバーのplaywrightは本家と比べると機能がイマイチなのでそこは発展を待ちましょう

さて、mcpサーバーをclaudeに追加する設定ですが、claude自身に質問すると大嘘をつくので（ここらへんしんどさ感じますよね）原典を当たる必要があります

https://docs.anthropic.com/en/docs/claude-code/mcp

mcpの追加

具体的には以下のコマンドでmcpをclaude codeに追加できます

claude mcp add playwright npx @playwright/mcp@latest → ~/.claude.jsonに追加される = 共有には向かない

claude mcp add -s project playwright npx @playwright/mcp@latest → .mcp.jsonに追加される = gitなどでの共有向け

...の、はずなのですが後者の.mcp.jsonは色々問題がある？（自分の環境だけかも）ようで基本的に利用できません。動いてるような動いてないようなでめちゃくちゃ混乱すると思うので注意してください

現時点では、上のグローバルインストールコマンドを使って~/.claude.jsonにインストールして、該当箇所が以下のようになっている事を確認して--configとそのpathを追加して自分なりの設定を適用する手順が多分1番良いです

~/.claude.json

{
   ...略
      "mcpServers": {
        "playwright": {
          "type": "stdio",
          "command": "npx",
          "args": [
            "@playwright/mcp@latest",
            "--config", // **追加する**
            "./playwright-config.json" // **追加する**
          ],
          "env": {}
        }
      },
   ...略
}

設定ファイルはその人の環境に応じてですが、Docker内rootユーザーなどだと以下で良いと思います

./playwright-config.json

{
  "browser": {
    "browserName": "chromium",
    "isolated": true,
    "userDataDir": "./tmp/playwright/profile",
    "launchOptions": {
      "channel": "chromium",
      "headless": true,
      "args": ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"]
    },
    "contextOptions": {
      "viewport": {
        "width": 1920,
        "height": 1080
      },
      "locale": "ja-JP",
      "timezoneId": "Asia/Tokyo"
    }
  },
  "outputDir": "./tmp/playwright"
}

次にclaude mcp listと実行して以下のように表示されればmcpが通ってます

$ claude mcp list
playwright: npx @playwright/mcp@latest --config ./playwright-config.json

混乱ポイント: mcp get playwrightを行うと.mcp.jsonからも読み込むが、実際のclaude codeでは利用されないという罠があります（1時間ハマった）

検証する元気がないので原因究明したい人は探してみてください

mcpが動いているか試す

次にclaude codeを立ち上げて/mcpと入力してみてください
表示されたらとりあえずクリアです

あとは

GoogleのHOMEをスクショして

とか頼んで実際にスクショしてくれたら全てOKです

※初回は多分npx playright install chromiumが走ります

番外編: 文字化けした場合

fontを入れてないと日本語が豆腐になります

Dockerfileにこのあたりを追加してRebuildすれば大丈夫だと思います

# 日本語フォントと必要な依存関係をインストール
RUN apt-get install -y \
    fonts-liberation \
    fonts-noto-cjk \
    fonts-ipafont-gothic \
    fonts-ipafont-mincho \
    locales \
    && locale-gen ja_JP.UTF-8 \
    && rm -rf /var/lib/apt/lists/*

ENV LANG=ja_JP.UTF-8
ENV LANGUAGE=ja_JP:ja

使い勝手を良くするために

ここからはCLAUDE.mdの話です

Claudeはブラウザ操作に失敗した場合に勝手にpuppeteerを入れてみたり、curlで試したり別アプローチを試行します

今回に限っては失敗した場合は素直に失敗してほしいので以下のような文言を追加しておくと良いでしょう

CLAUDE.md

## Playwright MCP使用ルール

### 絶対的な禁止事項

1. **いかなる形式のコード実行も禁止**

   - Python、JavaScript、Bash等でのブラウザ操作
   - MCPツールを調査するためのコード実行
   - subprocessやコマンド実行によるアプローチ

2. **利用可能なのはMCPツールの直接呼び出しのみ**

   - playwright:browser_navigate
   - playwright:browser_screenshot
   - 他のPlaywright MCPツール

3. **エラー時は即座に報告**
   - 回避策を探さない
   - 代替手段を実行しない
   - エラーメッセージをそのまま伝える

で、何が嬉しいの？

開発を行っていると誰もが経験したことがあるだろうこの現象

Claude Code「出来ました！」

自分「どれどれ、、、エラーだらけで全然出来とらんやんけ！！！」

.

.

これが無くなります！

実際の例

例えば上のように口頭で指示を出すだけで今までの以下のループ

1. 想像だけでコードを書く
2. 提出
3. 動いてないやんけ！！！

を脱却して

1. 想像だけでコードを書く
2. ブラウザで実際に試す
3. 書き直して完動したら提出
4. 動いてる！！！

となります

「実装が終わった後はplaywright mcpを使って実際にアクセスして実装した機能を一通り試してエラーがないか確認する」

これをルールとするだけで勝手にブラウザを開いて勝手にデバッグしてくれるようになります

Railsならrequest specなんかでテストしやすいですが、Claude Codeが弱いUI系のタスク（確認ダイアログを表示して～など）のjs系の動きもこれでバッチリです

使い道は沢山あると思うので良い使い道が思い浮かんだらぜひ教えて下さい