【2025年版】Claude CodeでPlaywright MCPを設定する完全ガイド｜ブラウザ操作を自然言語で自動化

2025年12月3日2025年12月9日

「ブラウザ操作をAIに任せたい…」
「毎回同じテストを手動で実行するのが面倒…」
「Claude Codeからブラウザを直接操作できたら便利なのに…」

このような悩みを抱えていませんか？

私は40代現役Webエンジニアとして、Claude CodeでPlaywright MCPを設定することで、ブラウザ操作を自然言語で自動化しています。

結論から言うと：

設定は5分で完了
自然言語で指示するだけでブラウザ操作が実行される
データ収集、テスト、定型作業に幅広く活用可能

この記事では、Claude CodeでPlaywright MCPを設定する方法から、実践的な活用例まで徹底解説します。

この記事でわかること

Playwright MCPとは何か
インストールと設定の手順
基本的な使い方
実践的な活用例
トラブルシューティング

Playwright MCPとは？

基本情報

Playwright MCPは、Microsoftが開発した高機能ブラウザ自動化ライブラリ「Playwright」を、Claude Codeから直接利用できるようにするMCPサーバーです。

項目	内容
ベース技術	Playwright（Microsoft製）
対応ブラウザ	Chromium、Firefox、WebKit
操作方法	自然言語で指示
必要環境	Node.js 18以上

Playwright MCPでできること

機能	説明
Webページ操作	クリック、入力、スクロールなど
データ抽出	ページから情報を取得
スクリーンショット	ページの画像を保存
フォーム入力	自動でフォームに入力
E2Eテスト	テストシナリオの自動実行

導入のメリット

1. 自然言語で指示できる

「このページにログインして、最新の記事タイトルを10件取得して」と指示するだけで、Claude CodeがPlaywrightのコードを生成・実行してくれます。

2. コード生成が不要

Playwrightの複雑なAPIを覚える必要はありません。Claude Codeが適切なコードを自動生成します。

3. デバッグが簡単

エラーが発生しても、Claude Codeに「エラーを修正して」と伝えるだけで、自動的に問題を解決してくれます。

インストールと設定

前提条件

項目	要件
Node.js	18以上
Claude Code	インストール済み
npm	使用可能

Step 1：Playwrightブラウザをインストール

npx playwright install

これにより、Chromium、Firefox、WebKitがインストールされます。

Step 2：Claude CodeにMCPサーバーを登録

Claude Codeの設定ファイル ~/.claude/mcp.json に、Playwright MCPサーバーを追加します。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@modelcontextprotocol/server-playwright"]
    }
  }
}

Step 3：Claude Codeを再起動

設定を反映させるため、Claude Codeを再起動します。

Step 4：動作確認

Claude Codeで以下のように指示してテスト：

「https://example.com にアクセスして、ページタイトルを教えて」

正しく設定できていれば、Claude CodeがPlaywrightを使ってWebページにアクセスし、タイトルを返してくれます。

基本的な使い方

1. Webページへのアクセスと操作

「https://www.google.com にアクセスして、検索ボックスに『Claude Code』と入力して検索して」

Claude Codeが以下の操作を自動で実行します：

ブラウザを起動
Googleにアクセス
検索ボックスに入力
検索ボタンをクリック
結果を取得

2. データの抽出

「https://news.ycombinator.com にアクセスして、トップ10の記事タイトルとURLを取得して」

Claude Codeがページを解析し、必要なデータを構造化して返してくれます。

3. フォームの自動入力

「ログインページにアクセスして、ユーザー名とパスワードを入力してログインして」

4. スクリーンショットの取得

「https://example.com のスクリーンショットを撮って」

実践的な活用例

活用例1：ブログ記事一覧の取得

指示例：

「https://tech-creator-hub.hatenablog.com/ にアクセスして、
最新10件の記事のタイトルとURLをMarkdownのリストで出力して」

出力例：

- [Claude CodeでPlaywright MCPを設定する方法](https://tech-creator-hub.com/claude-code-playwright-mcp-guide-2025/)
- [GitHub MCPの設定ガイド](https://tech-creator-hub.com/cursor-mcp-integration-comparison-2025/)
...

活用例2：定期的なデータ収集

指示例：

「競合サイトの新着記事タイトルを取得して、CSVファイルに保存して」

活用例3：E2Eテストの作成

指示例：

「ログインページから管理画面までの操作をテストするコードを生成して」

活用例4：フォームの一括入力

指示例：

「contacts.csvのデータを使って、お問い合わせフォームに順番に入力して送信して」

よくある使い方パターン

パターン1：ページ確認

「このURLのページを開いて、見出しの一覧を取得して」

パターン2：データ収集

「このサイトの商品一覧から、商品名と価格を取得して」

パターン3：動作確認

「ログインフォームが正しく動作するかテストして」

パターン4：スクリーンショット

「このページのフルページスクリーンショットを撮って」

トラブルシューティング

エラー1：Playwrightが見つからない

原因：Playwrightがインストールされていない

解決方法：

npx playwright install

エラー2：ブラウザが起動しない

原因：ヘッドレスモードの設定が必要

解決方法：
Claude Codeに以下のように指示：

「ヘッドレスモードでブラウザを起動して」

エラー3：要素が見つからない

原因：ページの読み込みが完了していない

解決方法：

「ページが完全に読み込まれるまで待ってから、要素を取得して」

エラー4：タイムアウト

原因：ネットワークが遅い、またはサイトの応答が遅い

解決方法：

「タイムアウトを30秒に設定して、ページにアクセスして」

セキュリティの注意点

認証情報の扱い

ログイン情報などの機密データは、直接コードに書かず、環境変数を使用します。

# .envファイルに保存
SITE_USER=your_username
SITE_PASSWORD=your_password

Claude Codeへの指示例：

「環境変数SITE_USERとSITE_PASSWORDを使って、サイトにログインして」

レート制限への配慮

Webサイトへの過度なアクセスは避けましょう。

「10秒ごとに1回のペースで、記事一覧を取得して」

利用規約の確認

自動化を行う前に、対象サイトの利用規約を確認してください。

Playwright MCPで変わる開発効率

Before（導入前）

作業	手順	時間
データ収集	手動でブラウザ操作	30分/回
テスト実行	手動で確認	15分/回
スクリーンショット	手動でキャプチャ	5分/回

After（導入後）

作業	手順	時間
データ収集	自然言語で指示	1分/回
テスト実行	自然言語で指示	2分/回
スクリーンショット	自然言語で指示	30秒/回

効果まとめ：

手作業からの解放
ヒューマンエラーの削減
24時間自動化が可能

まとめ

Playwright MCP設定の流れ

Step	内容
1	Playwrightブラウザをインストール
2	Claude Codeの設定ファイルに登録
3	Claude Codeを再起動
4	動作確認

主な活用シーン

シーン	効果
データ収集	自動でWebから情報を取得
E2Eテスト	テストシナリオの自動実行
定型作業	繰り返し作業の自動化
スクリーンショット	ページの画像を自動取得

次のステップ

Playwright MCPを設定する（5分）
簡単な操作から試す
徐々に複雑な自動化に挑戦

Claude Code + Playwright MCPで、ブラウザ操作を完全自動化しましょう。

体系的に学びたい方へ

この記事を書いた人

dddaddy

【2025年版】Claude CodeでPlaywright MCPを設定する完全ガイド｜ブラウザ操作を自然言語で自動化

この記事でわかること

Playwright MCPとは？

基本情報

Playwright MCPでできること

導入のメリット

インストールと設定

前提条件

Step 1：Playwrightブラウザをインストール

Step 2：Claude CodeにMCPサーバーを登録

Step 3：Claude Codeを再起動

Step 4：動作確認

基本的な使い方

1. Webページへのアクセスと操作

2. データの抽出

3. フォームの自動入力

4. スクリーンショットの取得

実践的な活用例

活用例1：ブログ記事一覧の取得

活用例2：定期的なデータ収集

活用例3：E2Eテストの作成

活用例4：フォームの一括入力

よくある使い方パターン

パターン1：ページ確認

パターン2：データ収集

パターン3：動作確認

パターン4：スクリーンショット

トラブルシューティング

エラー1：Playwrightが見つからない

エラー2：ブラウザが起動しない

エラー3：要素が見つからない

エラー4：タイムアウト

セキュリティの注意点

認証情報の扱い

レート制限への配慮

利用規約の確認

Playwright MCPで変わる開発効率

Before（導入前）

After（導入後）

まとめ

Playwright MCP設定の流れ

主な活用シーン

次のステップ

体系的に学びたい方へ

おすすめ技術書

この記事を書いた人

関連記事