Claude Code MCP Playwrightを使うと、AIがブラウザを自動操作できるようになります。本記事では、Playwright MCP Serverのインストール方法から実践的な使い方まで詳しく解説します。
Claude Code MCP Playwrightとは
Playwright MCP ServerはMicrosoft公式が提供するModel Context Protocol (MCP)サーバーで、Claude Codeにブラウザオートメーション機能を追加します。
主な機能
- ブラウザの自動操作: Chrome/Firefox/Safariなどの主要ブラウザを制御
- ページナビゲーション: URLを開く、リンクをクリック、フォーム入力などの操作
- スクリーンショット撮影: ページの状態を画像としてキャプチャし、LLMにフィードバック
- JavaScriptの実行: カスタムスクリプトをページ上で実行
- API自動化: ブラウザだけでなくAPIのテストも可能
インストール方法
1. Claude CLIコマンドで追加（推奨）
最も簡単な方法はclaude mcp addコマンドを使用することです。
claude mcp add playwright npx @playwright/mcp@latest
このコマンドを実行すると、以下の処理が自動的に行われます。
- Playwright MCP Serverのインストール
- Claude Codeへの登録
- 設定ファイル（
~/.claude.json）への記録
2. 手動でのインストール
手動で設定する場合は、以下の手順で進めます。
# npmでインストール
npm install -g @playwright/mcp
# または、npxで直接実行
npx @playwright/mcp@latest
その後、Claude Codeの設定ファイルに以下を追加します。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
3. Claude Codeの再起動
設定が完了したら、Claude Codeを再起動してMCPサーバーを有効化します。
# 現在のセッションを終了
exit
# Claude Codeを再起動
claude
基本的な使い方
最初のテスト
インストールが完了したら、以下のプロンプトで動作確認を行います。
Playwright MCPを使って、ブラウザでmcp-hunt.comを開いてください
成功すると、ブラウザウィンドウが開き、指定したURLに自動的にナビゲートします。
重要な注意点
初回使用時は必ず「Playwright MCP」と明示的に指定してください。指定しない場合、Claude CodeはBashコマンドでPlaywrightを実行しようとする可能性があります。
# 良い例
Playwright MCPを使って、Googleで検索してください
# 悪い例（Bashコマンドと混同される可能性）
Playwrightで検索してください
実践的な使用例
Webページのスクレイピング
Playwright MCPを使って、https://example.comにアクセスし、
ページのタイトルと主要な見出しを取得してください
フォームの自動入力とテスト
Playwright MCPを使って、お問い合わせフォームに以下の情報を入力してください：
- 名前: テスト太郎
- メール: test@example.com
- メッセージ: これはテストです
そしてスクリーンショットを撮影してください
JavaScriptの実行
Playwright MCPを使って、ページ内の全てのリンクのURLを
JavaScriptで抽出してください
複数ページの巡回テスト
Playwright MCPを使って、以下のページを順番に開き、
それぞれのページタイトルを確認してください：
1. https://example.com/page1
2. https://example.com/page2
3. https://example.com/page3
トラブルシューティング
接続エラーが発生する場合
Playwright MCPサーバーとの接続に問題がある場合は、以下を確認してください。
- Node.jsのバージョンが最新か（推奨: v18以上）
~/.claude.jsonの設定が正しいか- Claude Codeを再起動したか
- ファイアウォールがnpxの実行をブロックしていないか
ブラウザが起動しない場合
Playwrightが初回実行時にブラウザをダウンロードする必要があります。
# Playwrightブラウザのインストール
npx playwright install
パーミッションエラー
MCPサーバーの実行にパーミッションが必要な場合があります。Claude Codeのプロンプトで許可を求められたら、承認してください。
他のMCPサーバーとの併用
Playwright MCPは他のMCPサーバーと組み合わせて使用できます。
Puppeteer MCPとの違い
- Playwright: Microsoft公式、マルチブラウザ対応、モダンなAPI
- Puppeteer: Google製、主にChrome/Chromium向け
Serena MCPとの組み合わせ
Serena MCPでファイル操作を行い、Playwright MCPでブラウザテストを実行するといった連携が可能です。
Serena MCPでテストデータを読み込み、
Playwright MCPでそのデータを使ってフォーム入力テストを実行してください
プロジェクト単位の設定
claude mcp addコマンドは、実行したディレクトリのプロジェクト設定として保存されます。
グローバルに設定したい場合は、ホームディレクトリの.claude.jsonを直接編集してください。
# プロジェクト固有の設定
cd /path/to/project
claude mcp add playwright npx @playwright/mcp@latest
# グローバル設定
vim ~/.claude.json
まとめ
Claude Code MCP Playwrightを導入すると、以下のようなメリットがあります。
- AIがブラウザを自動操作できる
- Webスクレイピングやテストの自動化が可能
- スクリーンショットでビジュアル確認ができる
- JavaScriptの実行で柔軟な操作が可能
インストールはclaude mcp addコマンド一つで完了し、すぐに使い始められます。ブラウザ操作を伴う開発やテストの効率化に、ぜひ活用してください。