Claude CodeでPlaywright MCPを使用する方法：完全セットアップガイド

Playwright MCPとは？

Playwright MCPサーバーは、Model Context Protocolクライアントにブラウザオートメーション機能を提供します。AIに「ピクセルを見る」よう求める代わりに、サーバーはページの構造化アクセシビリティスナップショットを返し、モデルは参照IDで要素と相互作用します。これにより、ループは高速で確定的で、ビジョンモデルのオーバーヘッドがありません。VS Code、Cursor、Windsurf、Claude Desktop、Claude Code、および他のMCPクライアントで機能します。

特にClaude Codeの場合、これはターミナル内のエージェントがブラウザを開いて、クリックして、フォームを入力して、ネットワークリクエストをモックして、スクリーンショットをキャプチャして、カスタムPlaywrightスクリプトを実行できるようになることを意味します。すべて自然言語プロンプトから駆動されます。

前提条件

始める前に、以下を確認してください：

• Node.js 18以上がインストールされている
• Claude Codeがインストールされてサインインしている（ターミナルでclaudeを実行して確認）
• 快適に作業できるターミナル

それだけです。Playwright MCPは最初の実行時に独自のブラウザバイナリをダウンロードします。

ビジネスを成長させる準備はできましたか？

今日から無料トライアルを開始し、数日で結果を確認しましょう。

デモをリクエスト ログイン

Playwright MCP統合のセットアップ

Playwright MCPをClaude Codeに接続するのは1つのコマンドです。これらの手順に従ってセットアップします：

Playwright MCPサーバーを追加

ターミナルを開いて、次を実行します：

claude mcp add playwright npx @playwright/mcp@latest

これはplaywrightという名前の新しいMCPサーバーを登録し、Claude Codeがブラウザツールが必要なときは常にnpx経由で起動します。最初の呼び出しはパッケージと必要なブラウザバイナリをダウンロードするため、最初は1分待ってください。

接続を確認

新しいClaude Codeセッションを開始して、/mcpコマンドを実行します：

claude

/mcp

playwrightが接続されたサーバーとしてリストされ、公開しているツール（ナビゲーション、クリック、入力、スクリーンショット、ネットワークモック、その他）が表示されます。

オプション：JSONコンフィグを使用する

コンフィグファイルを直接編集する場合は、同じサーバーを~/.claude.json（またはプロジェクトスコープの.mcp.json）に標準的なMCP形式で追加できます：

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

ファイルを編集した後、Claude Codeを再起動するとサーバーが/mcpに表示されます。

Claude Codeでの最初のブラウザオートメーション

サーバーが接続されたら、プロンプトは実際のブラウザを駆動できます。Playwrightドキュメントからの標準的な最初のインタラクションを試してください：

https://demo.playwright.dev/todomvcにナビゲートして、いくつかのTODOアイテムを追加します。

Claude Codeはブラウザを開き、ページのアクセシビリティスナップショットをリクエストし、要素参照で入力を見つけ、各TODOを入力し、ターミナルで結果を確認します。

**どのブラウザが開くかについての注意：**デフォルトではChromiumをヘッドモードで起動します。これを変更するには、MCPコンフィグのargsにフラグを追加してClaude Codeを再起動します：ウィンドウを非表示にするには--headless、エンジンを切り替えるには--browser=firefox|webkit|msedge。

アクセシビリティスナップショットの仕組み

Playwright MCPツールが実行されると、ピクセルの代わりにページの構造化スナップショット（要素ロール、テキストコンテンツ、参照ID）が返されます。Claudeはスナップショットを読み、ref=e5などの参照を使用してテキストボックスに入力したり、ref=e10でチェックボックスを切り替えたりします。ピクセルプッシング、脆弱なCSSセレクターなし。モデルが推論できる構造化ページ状態だけです。

ニュースレターに登録

最新のヒント、トレンド、お得な情報を無料で入手。

メールアドレス

登録する

Claude Codeから使用できるコア機能

Playwright MCPが接続されたら、チームメイトに与えるのと同じプロンプトがClaude Codeで機能します：

• ナビゲーション： 「example.comに移動」、「戻る」、「ページをリロード」。
• クリックと入力： 「送信ボタンをクリック」、「メールフィールドにtest@example.comを入力」。
• スクリーンショット： 「価格セクションのスクリーンショットを撮る」。
• **キーボードとマウス：**キーを押す、ホバー、ドラッグアンドドロップ。
• **タブとダイアログ：**新しいタブを開く、タブ間で切り替え、ポップアップを受け入れるか却下。
• ネットワーク監視： 「ページロード以降に行われたリクエストをリスト」。
• APIモック： 「/api/usersエンドポイントを空の配列を返すようにモック」。
• **ストレージ状態：**認証されたセッションをファイルに保存して、後で再度読み込む。

複数のツール呼び出しが必要なワークフローでは、Claude Codeにbrowser_run_codeを呼び出してPlaywrightスクリプトをインラインで実行するよう指示できます。これはアサーション、データ抽出、または数行の命令型コードから利益を得られるものに役立ちます。

便利な設定オプション

Playwright MCPには知っておく価値のあるいくつかのフラグがあります。コンフィグのargs配列に追加するか（またはclaude mcp addコマンドの後ろの--に追加）。

ヘッドレスモード

ブラウザはデフォルトでヘッドモードで実行されるため、何が起こっているかを見ることができます。ヘッドレスで実行するには（CIまたはリモートシェルに便利）、--headlessを渡します：

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

ブラウザを選択

--browserフラグでエンジンを切り替えます。サポートされている値はchrome、firefox、webkit、msedgeです：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "@playwright/mcp@latest",
        "--browser=firefox"
      ]
    }
  }
}

プロファイルモード

Playwright MCPは3つのプロファイルモードをサポートしています：

• **永続（デフォルト）：**ログイン状態とクッキーはセッション間で保持されます。
• 分離： --isolatedを渡して各セッションを新規開始し、オプションで--storage-stateでシード。
• ブラウザ拡張機能： --extensionを渡してPlaywright MCP Bridge拡張機能経由で既存のブラウザタブに接続。

スタンドアロンHTTPサーバー

ディスプレイが接続されていない場所（またはIDEワーカーから）でヘッドモードブラウザを実行する必要がある場合は、サーバーを別途起動してHTTP経由で接続します。

2番目のターミナルを開く。セッション全体の間実行したままにして、そこでサーバーを起動します：

npx @playwright/mcp@latest --port 8931

そのターミナルを開いたままにします。これはブラウザをlocalhost:8931で公開するため、独自のブラウザでセッションを表示でき、Claude Codeが接続できるものがあります。ターミナルを閉じるとサーバーが停止します。

次に、Claude Codeを実行するターミナルで、コンフィグを更新してエンドポイントを指定します：

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

借りる価値のある実用的なワークフロー

Playwright MCPが接続されたら、Claude Codeはエンドツーエンドテストスキャフォルディング、バグ再現、APIモックチェック、ページ監査、リリーススモークテストを処理できます。ブラウザを駆動して報告するものなら何でも。

これらのプロンプトが実際に機能するようにする2つのこと。まず、プロジェクトルートのCLAUDE.mdで、ステージングURL、デモ認証情報、エージェントが従うべき規約を記述します。なければ「デモユーザーとしてサインイン」には何もアンカーがありません。次に、Claude Codeに問題またはチケットからコンテキストをプルさせたい場合は、2番目のMCPサーバーを接続します。GitHub MCPサーバー が一般的な選択肢です。両方をスキップすると、Claude Code（合理的に）問題#482が何かを尋ねます。

なぜClaude CodeとPlaywright MCPをペアにするのか？

この組み合わせが素晴らしい理由のいくつか：

• **ターミナルネイティブ：**すべてが既に作業する場所で発生します。別のテストランナーへのコンテキストスイッチなし。
• **アクセシビリティファースト：**スナップショットはスクリーンショットより速度と信頼性が優れており、ビジョンモデルなしで機能します。
• **本当のPlaywrightの下：**Playwrightでコードで実行できることなら何でも、ここで実行できます。マルチブラウザ、ネットワークモック、ストレージ状態、その他。
• 他のMCPサーバーと合成可能： Playwrightを並べてGitHub、データベース、または監視MCPサーバーにスタックし、Claude Codeはすべてのエンドツーエンドで作業を移動できます。
• オープン標準： MCPはポータブルです。同じPlaywrightサーバーはクライアントを切り替えた場合、Cursor、VS Code、Windsurf、Claude Desktopで機能します。

サーバーを追加し、/mcpを実行して確認し、次の「ログインページをテストしてください」プロンプトは実際のブラウザセッション（Claude Codeで駆動、ヘッドモードで監視（または監視しない）、アクセシビリティスナップショットで検証可能）になります。