はじめに
劇作家 エムシーピー はMicrosoftによって開発され、GitHubでホストされているオープンソースツールである。Model Context Protocol（MCP）プロトコルを介して、ウェブページを開いたり、要素をクリックしたり、テキストを入力したりすることで、AIモデルがブラウザを直接操作できるようにする。このツールはPlaywrightフレームワークに基づいており、Chromium、Firefox、WebKitなどのブラウザをサポートしている。Playwright MCPは、自動テストやデータ抽出など、ウェブページとのインタラクションを必要とするAIアプリケーションに特に適している。公式ドキュメントは2025年3月まで更新され、プロジェクトは活発で開発者に人気がある。
同名のプロジェクト：MCP Playwright：ブラウザの自動化操作を提供するMCPサービス
機能一覧
- ブラウザコントロールのサポート：ウェブページを開いたり、ページをナビゲートしたり、エレメントをクリックしたりできます。
- 構造化データの生成：アクセシビリティスナップショットによるデータ出力、スクリーンショットは不要。
- デフォルトのスナップショット・モードとビジョン・モードの2つのモードが用意されている。
- スクリーンショットと保存：ページのスクリーンショットを撮ったり、PDFファイルとして保存することができます。
- 入力と操作：入力テキスト、キーストローク、ドラッグアンドドロップと他の機能をサポートしています。
- ヘッドレスモードに対応：インターフェイスを表示することなく、バックグラウンドでブラウザを実行できます。
ヘルプの使用
Playwright MCPはインストールも使い方も簡単です。以下は、このツールのインストールと操作方法について、2つのモードの具体的な機能を含めて詳しく説明します。
設置プロセス
- 環境を整える
まずNode.jsをインストールする（最新のLTSバージョンを推奨、例えばv22）。でバージョンを確認してください：
node -v
お持ちでない場合は、Node.jsの公式ウェブサイトからダウンロードしてインストールしてください。
- Playwright MCPのインストール
ターミナルで以下のコマンドを実行する：
npm install -g @playwright/mcp
あるいは、最新バージョンを使う：
npx @playwright/mcp@latest
- サーバーの起動
開始するコマンドを入力する：
npx @playwright/mcp@latest
デフォルトはヘッダーモード（ブラウザウィンドウを表示）です。ヘッダーレスモードを使いたい場合は、パラメータを追加してください：
npx @playwright/mcp@latest --headless
- AIクライアントの設定
ご使用のAIツールがMCPをサポートしている場合（大型モデルクライアントなど）、設定ファイルを編集する必要があります。例
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest", "--headless"]
}
}
}
保存されると、AIはMCPを通じてブラウザを呼び出せるようになる。
- 非モニター環境の設定
Linuxのモニターレス環境では、クライアント・サーバー・モードを使うことができる。モニター付きのマシンで実行することから始めましょう：
npx playwright run-server
出力には、次のようなWebSocketアドレスが表示されます。 ws://localhost:port/.そしてMCPコンフィギュレーションに追加される：
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"],
"env": {
"PLAYWRIGHT_WS_ENDPOINT": "ws://localhost:port/"
}
}
}
}
主な機能の使い方
Playwright MCPにはスナップショットモードとビジュアルモードの2つのモードがあります。以下、別々に説明します。
スナップショット・モード（デフォルト）
このモードはアクセス可能なスナップショットで動作し、高速で安定している。よく使用されるツールを以下に示す：
- ページを開く
- 指示する：
browser_navigate "https://example.com" - アクション：ブラウザが指定されたURLを開く。
- 出力：ページの読み込み状況を返す。
- 要素のクリック
- 指示する：
browser_click "登录按钮" "ref123" - アクション：以下のマークが付いたスナップショットをクリックします。
ref123要素の説明と引用が必要）。 - 注：参考文献はスナップショットのデータ。
- 入力
- 指示する：
browser_type "用户名输入框" "ref456" "myuser" true - 作戦：「"on's "作戦」。
ref456を入力し、Enter (true(提出を示す）。
- PDFとして保存
- 指示する：
browser_save_as_pdf - アクション：現在のページをPDFファイルとして保存します。
- 待ち時間
- 指示する：
browser_wait 5 - 操作：5秒待つ（最大10秒）。
ビジュアルパターン
プライミング --vision パラメーター
npx @playwright/mcp@latest --vision
このモデルはスクリーンショットと座標で動作し、ビジュアルモデルに適しています。よく使われるツール
- インターセプトのページ
- 指示する：
browser_screenshot - アクション：現在のページのスクリーンショットを作成する。
- 指示する：
- 座標をクリック
- 指示する：
browser_click 100 200 - アクション：座標(100, 200)をクリック。
- 指示する：
- ドラッグ＆ドロップ操作
- 指示する：
browser_drag 50 50 150 150 - アクション：(50, 50)から(150, 150)までドラッグする。
- 指示する：
- 入力
- 指示する：
browser_type "hello" true - アクション："hello "と入力してEnterを押す。
- 指示する：
運用フロー例
ウェブサイトにログインしたいとする：
- サーバーを起動します：
npx @playwright/mcp@latest --headless
- ログインページを開く：
- 指示する：
browser_navigate "https://example.com/login"
- ユーザー名とパスワードを入力する（スナップショット・モード）：
- 指示する：
browser_type "用户名" "ref1" "myuser" false - 指示する：
browser_type "密码" "ref2" "mypassword" true
- ログイン（ビジュアルモード）をクリックします：
- モードの切り替え：サーバーの再起動
--vision - 指示する：
browser_click 300 400
- 検査結果
- 指示する：
browser_snapshot(スナップショットモード）またはbrowser_screenshot(ビジュアルモード）。
ほら
- スナップショット・モードはビジュアル・モードよりも信頼性が高いが、エレメント参照が必要である。
- ビジュアルモデルは、座標を持つAIモデルに適している。
- ヘッダーレス・モードはバッチ・タスクに適しており、ヘッダー・モードはデバッグを容易にする。
アプリケーションシナリオ
- ウェブ・ナビゲーションとフォーム入力
AIが自動的にウェブページを開き、フォームに入力して送信するので、一括登録やログインテストに適しています。 - データ抽出
価格やレビューなど、動的なウェブページから構造化データを取得する。 - 自動テスト
ボタンのクリックやページのジャンプなど、ページが正しく機能するかチェックする。 - インテリジェント・エージェント・インタラクション
AIにブラウザを操作させて、オンラインショッピングなどの複雑なタスクを完了させる。
品質保証
- スナップショット・モードとビジュアル・モードの違いは何ですか？
スナップショット・モードは構造化されたデータで動作し、高速で安定している。ビジュアル・モードはスクリーンショットと座標を使用し、ビジュアルAIに適している。 - 対応ブラウザは？
Chromium、Firefox、WebKitに対応しています。 - コードを書く必要があるか？
必要ない。簡単なコマンドを送るだけで、AIが作動する。
日本語 
简体中文 
English 
Deutsch 
Português do Brasil