Zenn
🙄

Playwright MCP Extension を利用してみる

に公開
AI
tech

https://primenumber-dev.github.io/ai-native-summer-calendar/

この記事は primeNumber AI-Native Summer Calendar 22 日目の記事です。

概要

Claude Code + Playwright MCP でブラウザを操作していると、しばしば

  • 操作に時間がかかる
  • 操作に失敗する
  • トークン消費量が多い

といった問題に遭遇します。

上記の問題を、最近リリースされた Playwright MCP Extension を利用し、手動の操作を挟むことで緩和できないか試してみます。

手順

1. Google Chrome の起動

Claude Code のセッション開始時に Chrome を起動すると、目的のページまでたどり着くための操作が必要になったりします。

時間がもったいないので、Chrome は事前に起動しておきます。

google-chrome --disable-gpu --no-default-browser-check --no-first-run --user-data-dir=chrome-debug   https://trocco.io

Chrome が起動したら、手動で目的のページを開いたり、必要であればログインしておいたりします。

2. Playwright MCP Extension のダウンロード

さきほど起動した Chrome に Playwright MCP Extension をインストールします。

公式ドキュメント を参考にファイルをダウンロード、解凍し、Chrome から拡張機能をロードします。

curl -L -O https://github.com/microsoft/playwright-mcp/releases/download/v0.0.36/playwright-mcp-extension-v0.0.36.zip

mkdir playwright-mcp-extension
mv playwright-mcp-extension-v0.0.36.zip playwright-mcp-extension
cd playwright-mcp-extension
unzip playwright-mcp-extension-v0.0.36.zip

3. MCP 設定

Playwright MCP の設定を行います。

  • --extension オプションを指定する
  • --user-data-dir オプションに Chrome 起動時に指定したパス（例：/home/ubuntu/chrome-debug）を指定する

必要があります

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--extension",
        "--user-data-dir=/home/ubuntu/chrome-debug"
      ]
    }
  }
}

4. 動作確認

Claude Code のセッション上で リンクをクリックしてください 等の指示を出して、最初に起動した Chrome 上で動作を確認します。

Playwright MCP Extension を利用した感想

  • ✅ ログイン状態や開いているページ等を保持したままにできるので、目的のページにアクセスするまでの操作をスキップできる
  • ✅ Playwright MCP 経由の操作がうまくいかない場合は代わりに人力で操作して、その後から操作を続けられる
  • ☑️ トークン消費量の問題は解決していない

Discussion