はじめに
Claude DesktopにPlaywright MCPサーバーを統合することで、AIとの対話からブラウザ操作を直接実行できるようになります。本記事では、Windows環境でのセットアップから実際にGoogleのスクリーンショットを撮影するまでの手順を解説します。
前提条件
- Windows 10/11
- Node.js v18以降がインストール済み
- Claude Desktopがインストール済み
手順1: 利用可能なPlaywright MCPサーバーの確認
まず、どのようなPlaywright MCPサーバーが利用可能か確認します。
npm search playwright mcp
複数の選択肢がありますが、今回は公式の@playwright/mcpを使用します。
手順2: Playwright MCPサーバーのインストール
PowerShellを管理者権限で実行し、以下のコマンドでグローバルインストールします。
npm install -g @playwright/mcp
成功すると以下のような出力が表示されます：
added 4 packages in 3s
手順3: Playwrightブラウザのインストール
Playwrightが使用する専用ブラウザをインストールします。
npx playwright install
このコマンドでChromium、Firefox、WebKitがダウンロードされます（合計約420MB）。
手順4: インストールの確認
正常にインストールされたか確認します。
npm list -g @playwright/mcp
以下のような出力が表示されれば成功です：
C:\Users\[ユーザー名]\scoop\persist\nodejs\bin
`-- @playwright/mcp@0.0.39
手順5: Claude Desktop設定ファイルの作成
Claude Desktopの設定ファイルを作成します。ファイルの場所は以下の通りです：
%APPDATA%\Claude\claude_desktop_config.json
設定ファイルの作成方法
PowerShellで以下のコマンドを実行してファイルを作成します：
$configContent = @'
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp"],
"env": {
"PLAYWRIGHT_HEADLESS": "true"
}
}
}
}
'@
$configContent | Out-File -FilePath "$env:APPDATA\Claude\claude_desktop_config.json" -Encoding utf8
設定ファイルの確認
作成されたファイルの内容を確認します：
Get-Content "$env:APPDATA\Claude\claude_desktop_config.json"
手順6: Claude Desktopの再起動
設定を反映させるため、Claude Desktopを完全に再起動します。
- Claude Desktopを終了
- タスクマネージャーでClaude関連プロセスが完全に終了していることを確認
- Claude Desktopを再起動
手順7: 動作確認
Claude Desktopで以下のメッセージを送信してテストします：
Googleのスクリーンショットを撮ってください
実行結果
正常に設定されている場合、以下の処理が実行されます：
- Playwrightが自動でブラウザを起動
- Google.comにアクセス
- フルページスクリーンショットを撮影
- 画像ファイルが一時フォルダに保存
スクリーンショットは以下のような場所に保存されます：
C:\Users\[ユーザー名]\AppData\Local\Temp\playwright-mcp-output\[タイムスタンプ]\google-homepage.png
設定内容の説明
設定ファイルの各項目
-
mcpServers: MCPサーバーの設定セクション -
"playwright": このサーバーの識別名（任意） -
"command": "npx": 実行するコマンド -
"args": ["@playwright/mcp"]: コマンドの引数 -
"PLAYWRIGHT_HEADLESS": "true": ブラウザを非表示モードで実行
利用可能な機能
Playwright MCPサーバーが正常に動作すると、以下のような機能が利用できます：
- ウェブページのスクリーンショット撮影
- ページ要素のクリック操作
- フォームへの入力
- テキストの取得
- ページ間の移動
- 複数ページの自動操作
トラブルシューティング
MCPサーバーが認識されない場合
-
設定ファイルのJSON形式を確認
- 括弧やカンマが正しいか確認
- 文字エンコードがUTF-8になっているか確認
-
Claude Desktopの完全再起動
- タスクマネージャーでプロセスが完全に終了していることを確認
-
代替設定の試行
- フルパス指定での設定を試す
- 別のPlaywright MCPサーバー（better-playwright-mcpなど）を試す
パッケージが見つからない場合
正しいパッケージ名を確認：
npm search playwright mcp
ブラウザが起動しない場合
Playwrightブラウザの再インストール：
npx playwright install --force
まとめ
この手順により、Claude DesktopでPlaywrightを使用したWebブラウザ操作が可能になります。AIとの自然な対話を通じて複雑なWeb操作を自動化できるため、テストの自動化やデータ収集などの用途で活用できます。
参考情報
注意事項
- スクレイピングを行う際は、対象サイトのrobot.txtやサービス利用規約を確認してください
- 大量のリクエストを送信する場合は適切な間隔を設けてください
- 個人情報を含むサイトでの使用は十分注意してください