見出し画像

【Browser Useの代わり？】Playwright MCP とはなにかを解説します

まさお@未経験からプロまでAI活用

Playwright MCPは、Microsoft Playwrightの技術を活用し、ウェブブラウザの自動化を行うためのサーバーです。従来のスクリーンショットベースのアプローチとは異なり、アクセシビリティツリー（Accessibility Snapshot） を用いることで、ウェブページを構造的かつ決定論的に操作できる点が大きな特徴です。

とくに、大規模言語モデル（LLM）との連携を想定しており、LLMが視覚情報（スクリーンショット）に依存せずにウェブページを理解し、操作できるようなツールセットやインターフェースを提供しています。

YouTube動画でも丁寧めに解説したのでよろしければどうぞ。

主な特徴

  1. 高速かつ軽量
    従来のスクリーンショットベースの操作は、画像解析や座標指定が必要になるため遅く、処理が重くなりがちでした。
    しかし、Playwright MCPでは、ピクセル情報ではなくアクセシビリティツリーを利用することで、ページ構造をテキストベースで取得し、高速かつ軽量な動作を実現します。

  2. LLM フレンドリー
    スクリーンショットを解析するための視覚モデルや画像認識技術が不要で、構造化データ（アクセシビリティツリー） から直接ページの要素を把握できます。
    そのため、文章を扱うモデル（LLM）がそのままテキスト情報を処理し、要素を指定・操作できるという利点があります。

  3. 決定論的なツール適用
    スクリーンショットをもとに座標をクリックする場合、ページのレイアウト変更や視覚的に似た要素の存在によって、誤った要素をクリックしてしまうリスクがあります。
    一方、Playwright MCPのアクセシビリティスナップショットを用いたアプローチでは、要素をref （要素参照）によって特定するため、曖昧さが大幅に減少し、安定した操作が可能です。

  4. 幅広いユースケース

    • ウェブナビゲーションやフォーム入力

    • 構造化されたコンテンツのデータ抽出

    • LLM駆動の自動テスト

    • エージェントによる汎用的なブラウザ操作
      など、ブラウザ操作が必要となる多様なシーンで利用できます。

Snapshot Mode と Vision Mode

Playwright MCP には大きく分けて2種類のモードがあります。

Snapshot Mode（デフォルト）

  • 特徴

    • アクセシビリティツリー（accessibility snapshot） を用いてページ構造を把握します。

    • 要素の操作は座標ではなく、要素参照 (ref) を使って行います。

    • 一般的に高速かつ信頼性が高く、レイアウトの変更にも比較的強いです。

    • スクリーンショット不要で、LLMがページ構造を意味的に理解しやすい。

  • 利用可能な代表的ツール

    • browser_snapshot: 現在のページのアクセシビリティツリー（スナップショット）を取得

    • browser_click: 要素参照に基づいたクリック操作

    • browser_hover: 要素に対するホバー操作

    • browser_type: 入力フィールドなどに文字を入力

    • browser_navigate: URL へのナビゲーション

    • browser_go_back / browser_go_forward: ブラウザの戻る・進む

    • など

Vision Mode（--vision オプション）

  • 特徴

    • **スクリーンショット（画像）**に基づいて、ページを座標指定で操作します。

    • 視覚的な情報を扱える場合に便利で、X-Y座標空間でのドラッグ＆ドロップやクリックが可能です。

    • スクリーンショット上の要素の位置関係を利用するため、レイアウトに大きく依存する場合があります。

  • 利用可能な代表的ツール

    • browser_screenshot: ページ全体のスクリーンショットを撮影

    • browser_move_mouse: マウスを指定座標に移動

    • browser_click: 座標を指定してクリック

    • browser_drag: 座標を指定してドラッグ＆ドロップ

    • browser_type: 指定座標上で文字入力

    • browser_navigate, browser_go_back, browser_go_forward など

    • これらはすべて座標指定にもとづく操作となります。

使い方の概要

1. インストールと起動

Playwright MCP は npm からインストール・実行できます。
通常は以下のような設定を config.json 等に追記して使用します（例）:

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

起動コマンド例:

npx @playwright/mcp@latest

2. モード切り替え

  • デフォルト（Snapshot Mode）
    そのまま起動するとアクセシビリティツリーを用いたモードで動作します。

  • Vision Mode
    オプション --vision を付与すると、スクリーンショットを用いた操作に切り替わります。

3. ツール呼び出しの流れ

  1. まずページにナビゲートし（browser_navigate など）、ページ上の情報を取得する（例: browser_snapshot）。

  2. 操作対象の要素を特定する。Snapshot Modeならスナップショットに含まれる要素参照（ref）を取得し、Vision Modeならスクリーンショットから該当要素のX-Y座標を計算する。

  3. browser_click, browser_type などのツールに必要パラメータを渡して実行。

4. サーバー・クライアント方式

  • Playwright MCP は、ブラウザを内部で立ち上げ、外部からのコマンドに応じて操作を行うサーバーとして動作します。

  • LLM やその他のアプリケーションはクライアントとしてサーバーにリクエストを送り、ツールを呼び出すことでページ操作を実行します。

5. Headless / Headed ブラウザ

  • Headless（GUI 非表示）
    バックグラウンドやCI環境など、表示不要の状況で使うことが多いモードです。

  • Headed（GUI 表示）
    通常のブラウザを起動して、画面表示を確認したい場合に使います。
    ただし、Linuxサーバーなどで表示環境（DISPLAY）がない場合は、Playwright を別プロセスで起動してWebSocket Endpointを経由する方法も用意されています。

まとめ

Playwright MCPは、構造化されたアクセシビリティスナップショットを活用し、スクリーンショットベースのアプローチに比べて高速・軽量・曖昧さの少ないブラウザ自動化を実現するソフトウェアです。LLMとの連携に特化して設計されており、従来の視覚モデルを必要とする方法よりも効率的かつ確実に要素を操作できるようになります。

  • スナップショットモード（デフォルト）での操作は、ページの構造的な情報を直接利用できるため、LLMやテキストベースの推論との相性が非常に良いです。

  • ビジョンモードは、座標を使ったドラッグ＆ドロップやクリックなど、視覚的な操作が必要な場合に有効です。

ブラウザ上で行いたいこと（フォーム入力、リンクのクリック、スクレイピングやテストなど）を、LLMの自然言語処理と合わせて制御したいケースにおいて、Playwright MCPは一つの有力な選択肢となるでしょう。ぜひ活用してみてください。

いいなと思ったら応援しよう！