Playwright MCP 入門：設定、操作、結果の確認

Playwright MCP は対応エージェントクライアントにブラウザツールを提供します。クライアントがツールを見つけ、サーバーが目的のブラウザを開き、操作後に期待したページ状態を返すことを順に確認します。本番データの前にローカルデモを使います。

エージェントからページまでの経路

エージェントは MCP クライアントにツール呼び出しを依頼します。stdio ではクライアントが Playwright MCP に JSON-RPC を送ります。Playwright は設定したブラウザを操作し、URL、アクセシビリティスナップショット、操作情報などを返します。ツール一覧は通信を確認する段階で、ブラウザは別に検証します。

Microsoft · Playwright MCP

バージョンを固定してサーバーを登録する

クライアントの MCP 設定でローカル stdio サーバーを追加します。例は @playwright/mcp 0.0.84 を固定し、macOS の Tabbit Browser Dev を指定します。実行可能なパスに置き換えてください。指定を省くと設定済みの既定ブラウザを使います。テストは Node.js 22.23.1 で、サーバーは Playwright 1.65.0-alpha-2026-10-30 と応答しました。必要なら設定後に再読み込みします。

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": [
        "-y",
        "@playwright/mcp@0.0.84",
        "--executable-path",
        "/Applications/Tabbit Browser Dev.app/Contents/MacOS/Tabbit Browser Dev",
        "--isolated",
        "--headless",
        "--viewport-size",
        "1000x565"
      ]
    }
  }
}

Playwright MCP · Configuration

練習ページを開いて初期状態を読む

練習 HTML を空のフォルダーへダウンロードし、ローカルで配信します。正確な URL を開いてスナップショットを確認します。F01-FIXTURE と State: OFF を探し、Enable demo ボタンの現在の参照を取得します。今回の e5 は例です。自分のスナップショットの値を使います。

練習 HTML をダウンロード

python3 -m http.server 8765 --bind 127.0.0.1

http://127.0.0.1:8765/fixture.html

一回操作して新しい状態を確認する

参照をクリックして新しいスナップショットを読みます。今回の結果は State: ON、同じ目印、無効になった Demo enabled ボタンでした。クリックが実行されたと表示されても、期待した状態を確認します。参照が古ければページを再確認してから対象を選びます。

Playwright MCP · Snapshots

実際の作業前にモードを選ぶ

分離モードは既存のログインを使わずに始まります。画面ありは確認しやすく、ヘッドレスは無人テストに使えます。許可されたログインを維持するには専用の永続プロファイルを使えます。公式拡張機能は対応済みの既存ブラウザに、CDP は許可済みの接続先に使えます。範囲と終了条件を確認します。

Playwright MCP · Extension

テストと利用者の報告

実際の stdio クライアントが初期化、ツール一覧、遷移、スナップショット、e5 クリック、再取得、画像保存、分離 Tabbit の終了を行いました。アカウント、本物のフォーム、モデルは使っていません。r/Playwright では位置指定で同名ボタンを選ぶ問題、r/mcp ではツール作者が大きなスナップショットを報告しました。範囲を絞り結果を確認する理由になりますが、ツールの順位ではありません。

r/Playwright r/mcp

ツールが表示されればブラウザは使えますか？

登録は確認できます。目的のページと目印を開き、操作の結果も確認してください。

• Playwright browser automation

• ブラウザエージェントの設定を確認する方法

• 開いているブラウザーにAIエージェントを接続する方法

• agent-browser CLI 入門：スナップショット、ref、セッション

• Codexはログイン済みの管理画面を読める？

• OpenClawのブラウザー設定とプロファイルの選び方

• CodexのブラウザーとTabbit CLIの選び方

Secholar.L

Tabbit グロース&コンテンツ担当

Secholar.L は AI ブラウザとエージェントワークフローについて、実際の調査と検証可能な一次情報に基づく実践的なガイドを執筆しています。