【ツール】Playwright MCPインストール方法｜導入

Playwright MCPのインストール方法について説明します。

Playwright MCPとは

Playwright MCPは、Microsoft Playwright（ブラウザ自動化ツール）をModel Context Protocol（MCP）サーバーとして提供するツールです。これにより、AIアシスタントがWebページの操作や情報取得を行えるようになります。

導入手順

1. 前提条件の確認

• Node.js（バージョン18以上推奨）
• npm
• Claude Desktop アプリケーション

2. Playwright MCPサーバーのインストール

bash

//プロジェクトローカルにインストール
npm install -g @playwright/mcp

3. Playwrightブラウザのインストール

bash

npx playwright install

このコマンドを実行して、必要なブラウザ（Chromium、Firefox、WebKit）をインストールしてください。※上記コマンドでは、すべてのブラウザがインストールされます。

4. Claude Desktop設定ファイルの編集

Windowsの設定ファイルの場所:

以下の画像のようにClaudeのフォルダがない場合は、
Claude Desktopをインストールする必要があります。

Claude Desktopのダウンロードへ遷移し、
「3. インストール後の確認」まで終わらせます。
次へ進んでください。

C:\Users\User\AppData\Roaming\Claude\claude_desktop_config.json

claude_desktop_config.jsonを新規作成して、以下の内容を追加してください：

1. エクスプローラーで C:\Users\User\AppData\Roaming\Claude\ フォルダを開く
2. claude_desktop_config.json という名前の新しいファイルを作成
3. 上記のJSON内容を貼り付けて保存

json

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

5. Claude Desktopの再起動

設定ファイルを保存した後、Claude Desktopアプリケーションを完全に終了してから再起動してください。

6. 動作確認

再起動後、Claude Desktopで以下のような機能が使用可能になります：

• Webページのスクリーンショット取得
• ページ内容の読み取り
• 要素のクリックやフォーム入力
  など…。

ページ内容の読み取り

試しに、Claude Desktopを開いて
｢https://example.com にアクセスして、ページのタイトルを教えてください。｣
と入力してみます。

以下のような、画面が出ればPlay Wright MCPが正常に稼働しています。

上記を実施し、正常に稼働しない場合は以下を試してください。