はじめに

Claude CodeからPlaywright MCPを使ってブラウザ操作を試してみた記事です。MCPを使うことで、Claude Codeにブラウザ操作をさせることができます。

Playwright MCPとは

• MCPとは、MCP（Model Context Protocol）の概要を説明します。AIモデルが外部のツールやデータソースと連携するためのプロトコルで、Claude Codeでも利用できます。
• MicrosoftのPlaywrightをMCPサーバーとして利用できるツールの紹介。ブラウザの操作（ページ遷移、クリック、スクリーンショットなど）をAIから実行できるようになります。

セットアップ

Claude CodeでPlaywright MCPを使うための環境構築手順を記載します。claude_desktop_config.jsonやsettings.jsonの設定方法など。

- 以下のコマンドでMCPサーバーの設定を登録

claude mcp add playwright -s project -- npx -y @playwright/mcp@latest

Added stdio MCP server playwright with command: npx -y @playwright/mcp@latest to project config

File modified: /root/.mcp.json

上記は「playwrightというMCPサーバーを使うよ、起動コマンドは npx -y @playwright/mcp@latest だよ」という設定を書き込んでいるだけのようです。

- 設定を確認

cat /root/.mcp.json

{

  "mcpServers": {

    "playwright": {

      "type": "stdio",

      "command": "npx",

      "args": [

        "-y",

        "@playwright/mcp@latest"

      ],

      "env": {}

    }

  }

}

上記のように設定ファイルに書き込まれています。

WindowsのWSL環境ので実行していたので/rootで実行したので /root/.mcp.jsonにインストールされたようです。

- スコープを指定してMCPを登録

以下のように -s userを指定するとユーザースコープで登録できるようです。

claude mcp add playwright -s user -- npx -y @playwright/mcp@latest

Added stdio MCP server playwright with command: npx -y @playwright/mcp@latest to user config

File modified: /root/.claude.json

Playwrightを使って「寿司打」を攻略してみた

• プロンプト

Playwrightを使ってタイピングゲームの「寿司打」の「高級」コースをクリアしてください。

最終スコアはスクショしておいてください。


いい点数をとれたらお寿司をおごるからがんばってね！

• 結果

ミスタイプは多いけど、すごい！！！！