Claude CodeでPlaywright MCPサーバーを設定してブラウザ操作できるようにする

概要

このドキュメントでは、Claude CodeにPlaywright MCPサーバーを接続し、自然言語でブラウザ操作を行えるようにするまでの手順を説明します。

前提条件

• WSL Ubuntu（または他のLinux環境）
• Node.jsとnpmがインストール済み
• Claude Codeがインストール済み

重要な前提知識

Claude DesktopとClaude Codeの違い

• Claude Desktop: デスクトップアプリケーション。UIから一部のMCPサーバー（Notion、Figmaなど）に接続可能だが、Playwright MCPは公式サポート外
• Claude Code: コマンドライン版のClaude。より多くのMCPサーバーに対応しており、Playwrightも利用可能

結論: Playwright MCPを使う場合はClaude Codeを使用する必要がある

Playwrightのインストールについて

Playwrightには2つのコンポーネントがあります：

1. Playwrightライブラリ: Node.jsパッケージ本体
2. ブラウザバイナリ: Chromium、Firefox、WebKitの実行ファイル

※ブラウザバイナリ：Webブラウザが動作するための実行可能なプログラムファイル（機械語に変換されたファイル）

# ライブラリのインストール（通常のプロジェクトでは必要）
npm install playwright

# ブラウザバイナリのインストール（必須）
npx playwright install

MCPサーバー経由で使う場合、ライブラリは自動的に処理されますが、ブラウザバイナリは手動でインストールが必要です。上記を実行すると/home/ユーザー名/.cache/ms-playwright/に実行ファイルが保存されるはずです。

セットアップ手順

ステップ1: Playwright MCPサーバーの追加

claude mcp add --scope user --transport stdio playwright -- npx -y @playwright/mcp@latest

オプション説明:

• --scope user: 全プロジェクトで利用可能にする（推奨）
  • 代わりに--scope localを使うと、現在のディレクトリでのみ有効
• --transport stdio: ローカルプロセスとして実行
• --: これ以降がMCPサーバーに渡されるコマンド
• npx -y: パッケージを自動承認で一時実行
• @playwright/mcp@latest: Microsoft公式のPlaywright MCPサーバー

実行結果例:

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

ステップ2: 設定の確認

claude mcp list

期待される出力:

Checking MCP server health...
playwright: npx -y @playwright/mcp@latest - ✓ Connected

もし「No MCP servers configured」と表示される場合は、スコープの問題の可能性があります。詳細はトラブルシューティングを参照してください。

ステップ3: ブラウザバイナリのインストール

初回実行時には、ブラウザバイナリが必要です。

# Chromeブラウザをインストール
npx playwright install chrome

これだけで動作するはずです。もしエラーが出る場合は、システム依存関係のインストールが必要な可能性があります：

# エラーが出た場合のみ実行
npx playwright install-deps

ステップ4: 動作確認

Claude Codeを起動します：

claude

簡単なコマンドを試してみます：

Use playwright to navigate to https://example.com and take a screenshot

または日本語で：

playwrightを使ってhttps://example.comを開いてスクリーンショットを撮ってください

使用例

基本的なブラウザ操作

Webページを開いてスクリーンショット

Use playwright to open https://github.com and take a screenshot

ページの情報を取得

playwrightでhttps://github.com/microsoft/playwrightを開いて、リポジトリの説明を取得してください

フォーム操作

Google検索

playwrightで以下を実行：
1. https://google.comを開く
2. 検索ボックスに「Claude AI」と入力
3. 検索ボタンをクリック
4. 結果ページのスクリーンショットを撮る

複雑な操作

複数ページの情報収集

playwrightを使って以下のタスクを実行：
1. https://news.ycombinator.comを開く
2. トップ5記事のタイトルとURLを取得
3. 結果をマークダウン形式でまとめる

E2Eテストシナリオ

以下のログインテストを実行してください：
1. https://example.com/loginを開く
2. ユーザー名フィールドに「testuser」を入力
3. パスワードフィールドに「testpass」を入力
4. ログインボタンをクリック
5. ログイン後のページのスクリーンショットを撮る
6. 各ステップの成功/失敗を報告

MCPサーバーの管理コマンド

サーバー一覧の確認

claude mcp list

特定のサーバーの詳細確認

claude mcp get playwright

サーバーの削除

claude mcp remove playwright

Claude Code内でのMCP確認

Claude Code起動中に：

/mcp

スコープについての詳細

Claude CodeのMCP設定には3つのスコープがあります：

1. local（旧project）スコープ

• 現在のディレクトリでのみ有効
• ~/.claude.jsonのprojectsキー配下に保存
• デフォルトのスコープ

claude mcp add --scope local --transport stdio playwright -- npx -y @playwright/mcp@latest

2. project スコープ

• .mcp.jsonファイルでチーム共有
• バージョン管理に含めることが可能

claude mcp add --scope project --transport stdio playwright -- npx -y @playwright/mcp@latest

3. user（旧global）スコープ

• 全てのプロジェクトで利用可能
• 個人設定として保存
• Playwrightの場合、これが推奨

claude mcp add --scope user --transport stdio playwright -- npx -y @playwright/mcp@latest

設定ファイルの場所

userスコープの設定

~/.claude.json

localスコープの設定

~/.claude.json (projects キー配下)

projectスコープの設定

<プロジェクトルート>/.mcp.json

トラブルシューティング

問題1: claude mcp listでサーバーが表示されない

原因: localスコープで追加されており、そのディレクトリにいない

解決策:

# userスコープで追加し直す
claude mcp add --scope user --transport stdio playwright -- npx -y @playwright/mcp@latest

問題2: 「ブラウザがインストールされていない」エラー

エラーメッセージ例:

Error: Executable doesn't exist at /home/user/.cache/ms-playwright/chrome-*/chrome-linux/chrome

解決策:

# ブラウザバイナリをインストール
npx playwright install chrome

# 上記でもエラーが出る場合のみ、システム依存関係をインストール
npx playwright install-deps

注意: sudoは不要です。

問題3: WSL環境でブラウザ起動エラー（稀）

原因: 必要なシステムライブラリが不足（通常はinstall chromeで自動的に解決される）

解決策:

# システム依存関係をインストール（エラーが出た場合のみ）
npx playwright install-deps

# または手動でインストール
sudo apt update
sudo apt install -y \
    libnss3 \
    libnspr4 \
    libatk-bridge2.0-0 \
    libdrm2 \
    libxkbcommon0 \
    libgtk-3-0 \
    libatspi2.0-0

注意: 通常はnpx playwright install chromeだけで動作します。このエラーは稀です。

問題4: MCPサーバーの接続エラー

確認事項:

# 設定ファイルの内容を確認
cat ~/.claude.json

# Node.jsとnpmのバージョン確認
node --version
npm --version

解決策:

# サーバーを削除して再追加
claude mcp remove playwright
claude mcp add --scope user --transport stdio playwright -- npx -y @playwright/mcp@latest

問題5: 「Connection closed」エラー（Windows）

原因: Windows（非WSL）ではnpxを直接実行できない

解決策:

# cmd /c ラッパーを使用
claude mcp add --scope user --transport stdio playwright -- cmd /c npx -y @playwright/mcp@latest

よくある質問

Q1: Claude DesktopでPlaywrightは使えないの？

A: 公式にはサポートされていません。Claude DesktopのUIから追加できるMCPサーバーは限定されており、Playwrightは含まれていません。Playwright MCPを使いたい場合はClaude Codeを使用してください。

Q2: ヘッドレスモードとヘッドフルモードの違いは？

A:

• ヘッドレスモード: ブラウザのウィンドウが表示されない（WSL環境では自動的にこちら）
• ヘッドフルモード: ブラウザのウィンドウが表示される（デバッグに便利）

WSL環境では通常ヘッドレスモードで動作します。

Q3: 他のMCPサーバーも追加できる？

A: はい！Claude Codeは多数のMCPサーバーに対応しています。例：

• GitHub: claude mcp add --transport http github https://api.githubcopilot.com/mcp/
• Sentry: claude mcp add --transport http sentry https://mcp.sentry.dev/mcp
• Notion: claude mcp add --transport http notion https://mcp.notion.com/mcp

詳細は公式ドキュメントを参照してください。

Q4: MCPサーバーの実行コストは？

A: ローカルで動作するMCPサーバー（Playwrightなど）は無料です。一部のクラウドベースのサービス（Stripe、PayPalなど）は、そのサービス自体の利用料金が発生する場合があります。

Q5: npmのバージョンを更新するには？

A:

# 最新版に更新
npm install -g npm@latest

# 特定バージョンをインストール
npm install -g npm@10.2.4

# WSLでsudoが必要な場合
sudo npm install -g npm@latest

参考リンク

• Claude Code公式ドキュメント
• Playwright公式サイト
• Microsoft Playwright MCP Server
• Model Context Protocol

まとめ

このガイドに従えば、Claude CodeでPlaywright MCPサーバーを使って、自然言語でブラウザ操作が可能になります。主なポイント：

1. Claude Codeを使用（Claude Desktopではない）
2. --scope userで追加して全プロジェクトで利用可能に
3. ブラウザをインストール（npx playwright install chrome）
4. エラーが出た場合のみnpx playwright install-depsを試す

セットアップは一度だけで、その後は様々なブラウザ自動化タスクを自然言語で実行できます！

---

作成日: 2025年11月20日
対象環境: WSL Ubuntu, Claude Code
Playwright MCPバージョン: @playwright/mcp@latest