mcpField
P
Playwright MCP Server

Playwright MCP Server

ローカル
github.com/apifyブラウザ自動化457 週間前に更新

Playwright MCP Server について

Playwright MCP Serverは、構造化されたアクセシビリティスナップショットを通じてLLMにPlaywrightのブラウザー自動化機能を提供します。スクリーンショットに頼らない操作やテストに使えます。

主な機能

  1. 01アクセシビリティツリーのページスナップショット
  2. 02ブラウザーの移動と操作
  3. 03フォーム入力とファイルアップロード
  4. 04コンソールとネットワークの確認
  5. 05オプションの座標ベース操作

活用シーン

  1. 01ページ移動とフォーム入力
  2. 02構造化されたページデータの抽出
  3. 03LLMによるブラウザーテスト
  4. 04AIエージェントのブラウザー操作自動化

MCP 対応

MCPクライアントにブラウザー自動化ツールを提供するMCPサーバーです。クライアントはApifyトークンを使い、ホストされたエンドポイントに接続します。

設定

ローカルサーバーの設定はどのクライアントでも共通です。コピーしてクライアントの MCP 設定ファイルに貼り付けてください。

インストール方法は未掲載です

このサーバーのパッケージやリモートエンドポイントはまだ取得できていません。プロジェクトの README の手順に従ってください。

リポジトリ

ツール

ツール一覧はまだ取得されていません

ローカルサーバーのツールはマシン上で起動して初めて取得できます。メンテナーはまだツール一覧を提供していません。

詳細

Playwright MCP サーバー

Actor badge

Playwright を使用したブラウザー自動化機能を提供する Model Context Protocol(MCP)サーバーです。このサーバーを使うと、LLM は構造化されたアクセシビリティスナップショットを通じてウェブページを操作できるため、スクリーンショットや視覚調整されたモデルは不要です。

この MCP サーバーについて: この MCP サーバーへの接続方法と利用方法については、mcp.apify.com にある公式の Model Context Protocol ドキュメントを参照してください。

接続 URL

MCP クライアントは次の URL でこのサーバーに接続できます。

https://jiri-spilka--playwright-mcp-server.apify.actor/mcp

クライアントの設定

この MCP サーバーに接続するには、MCP クライアントで次の設定を使用します。

{
  "mcpServers": {
    "playwright": {
      "url": "https://jiri-spilka--playwright-mcp-server.apify.actor/mcp",
      "headers": {
        "Authorization": "Bearer YOUR_APIFY_TOKEN"
      }
    }
  }
}

注: YOUR_APIFY_TOKEN を実際の Apify API トークンに置き換えてください。トークンは Apify Console で確認できます。

リンク

🚩 この MCP サーバーの権利を申請する

https://github.com/microsoft/playwright-mcp の原作者にすべてのクレジットを帰属します。 このサーバーの権利を申請するには、[email protected] までご連絡ください。

主な機能

  • 🚀 ピクセルベースの入力の代わりに Playwright のアクセシビリティツリーを使用し、高速かつ軽量に動作します
  • 📊 構造化データのみを扱うため、ビジョンモデルは不要です
  • 🎯 ツールを決定論的に適用し、スクリーンショットを使う方法の曖昧さを回避します
  • 🌐 Apify Proxy(データセンター、住宅用、カスタム)やその他の Apify 機能に対応しています

ユースケース

  • 🌐 ウェブのナビゲーションとフォームへの入力
  • 📋 構造化データの抽出
  • 🧪 LLM 主導の自動テスト
  • 🤖 AI エージェント向けのブラウザー自動化

ツール(ソース)

ツール
コア自動化
  • browser_click

    • タイトル:クリック
    • 説明:ウェブページ上でクリックを実行します
    • パラメーター:
      • element(string):要素とのインタラクション許可を得るために使用する、人が理解できる要素の説明
      • ref(string):ページスナップショットにある正確な対象要素の参照
      • doubleClick(boolean, optional):シングルクリックではなくダブルクリックを実行するかどうか
      • button(string, optional):クリックするボタン。デフォルトは左ボタンです
    • 読み取り専用:false
  • browser_close

    • タイトル:ブラウザーを閉じる
    • 説明:ページを閉じます
    • パラメーター:なし
    • 読み取り専用:true
  • browser_console_messages

    • タイトル:コンソールメッセージを取得
    • 説明:すべてのコンソールメッセージを返します
    • パラメーター:なし
    • 読み取り専用:true
  • browser_drag

    • タイトル:マウスをドラッグ
    • 説明:2 つの要素間でドラッグ&ドロップを実行します
    • パラメーター:
      • startElement(string):要素とのインタラクション許可を得るために使用する、人が理解できる始点要素の説明
      • startRef(string):ページスナップショットにある正確な始点要素の参照
      • endElement(string):要素とのインタラクション許可を得るために使用する、人が理解できる終点要素の説明
      • endRef(string):ページスナップショットにある正確な終点要素の参照
    • 読み取り専用:false
- **browser_evaluate** - タイトル:JavaScript を評価 - 説明:ページまたは要素で JavaScript 式を評価します - パラメーター: - `function` (string):() => { /* code */ } または、element が指定されている場合は (element) => { /* code */ } - `element` (string, optional):要素との操作許可を得るために使用する、人が理解しやすい要素の説明 - `ref` (string, optional):ページスナップショットに含まれる、対象要素の正確な参照 - 読み取り専用:**false**
  • browser_file_upload

    • タイトル:ファイルをアップロード
    • 説明:1 つまたは複数のファイルをアップロードします
    • パラメーター:
      • paths (array):アップロードするファイルの絶対パス。単一ファイルまたは複数のファイルを指定できます。
    • 読み取り専用:false
  • browser_fill_form

    • タイトル:フォームに入力
    • 説明:複数のフォームフィールドに入力します
    • パラメーター:
      • fields (array):入力するフィールド
    • 読み取り専用:false
  • browser_handle_dialog

    • タイトル:ダイアログを操作
    • 説明:ダイアログを操作します
    • パラメーター:
      • accept (boolean):ダイアログを受け入れるかどうか。
      • promptText (string, optional):プロンプトダイアログの場合に入力するテキスト。
    • 読み取り専用:false
  • browser_hover

    • タイトル:マウスをホバー
    • 説明:ページ上の要素にマウスカーソルを合わせます
    • パラメーター:
      • element (string):要素との操作許可を得るために使用する、人が理解しやすい要素の説明
      • ref (string):ページスナップショットに含まれる、対象要素の正確な参照
    • 読み取り専用:true
  • browser_navigate

    • タイトル:URL に移動
    • 説明:URL に移動します
    • パラメーター:
      • url (string):移動先の URL
    • 読み取り専用:false
  • browser_navigate_back

    • タイトル:戻る
    • 説明:前のページに戻ります
    • パラメーター:なし
    • 読み取り専用:true
  • browser_network_requests

    • タイトル:ネットワークリクエストを一覧表示
    • 説明:ページの読み込み後に発生したすべてのネットワークリクエストを返します
    • パラメーター:なし
    • 読み取り専用:true
  • browser_press_key

    • タイトル:キーを押す
    • 説明:キーボードのキーを押します
    • パラメーター:
      • key (string):押すキーの名前、または入力する文字(ArrowLeft や a など)
    • 読み取り専用:false
  • browser_resize

    • タイトル:ブラウザーウィンドウのサイズを変更
    • 説明:ブラウザーウィンドウのサイズを変更します
    • パラメーター:
      • width (number):ブラウザーウィンドウの幅
      • height (number):ブラウザーウィンドウの高さ
    • 読み取り専用:true
  • browser_select_option

    • タイトル:オプションを選択
    • 説明:ドロップダウンからオプションを選択します
    • パラメーター:
      • element (string):要素との操作許可を得るために使用する、人が理解しやすい要素の説明
      • ref (string):ページスナップショットに含まれる、対象要素の正確な参照
      • values (array):ドロップダウンで選択する値の配列。単一の値または複数の値を指定できます。
    • 読み取り専用:false
  • browser_snapshot

    • タイトル:ページスナップショット
    • 説明:現在のページのアクセシビリティスナップショットを取得します。スクリーンショットよりも適しています
    • パラメーター:なし
    • 読み取り専用:true
  • browser_take_screenshot

    • タイトル:スクリーンショットを撮影
    • 説明:現在のページのスクリーンショットを撮影します。スクリーンショットを基に操作することはできません。操作には browser_snapshot を使用してください。
    • パラメーター:
      • type (string, optional):スクリーンショットの画像形式です。デフォルトは png です。
      • filename (string, optional):スクリーンショットの保存先ファイル名です。指定しない場合、デフォルトは page-{timestamp}.{png|jpeg} です。
      • element (string, optional):対象の要素をスクリーンショットに撮る許可を得るために使用する、人が読める要素の説明です。指定しない場合、ビューポートのスクリーンショットが撮影されます。element を指定する場合は、ref も指定する必要があります。
      • ref (string, optional):ページスナップショットに含まれる、対象要素の正確な参照です。指定しない場合、ビューポートのスクリーンショットが撮影されます。ref を指定する場合は、element も指定する必要があります。
      • fullPage (boolean, optional):true の場合、現在表示されているビューポートではなく、スクロール可能なページ全体のスクリーンショットを撮影します。要素のスクリーンショットと同時には使用できません。
    • 読み取り専用:true
  • browser_type

    • タイトル:テキストを入力
    • 説明:編集可能な要素にテキストを入力します
    • パラメーター:
      • element (string):要素との対話許可を得るために使用する、人が読める要素の説明です
      • ref (string):ページスナップショットに含まれる、対象要素の正確な参照です
      • text (string):要素に入力するテキストです
      • submit (boolean, optional):入力したテキストを送信するかどうか(送信後に Enter を押します)
      • slowly (boolean, optional):1 文字ずつ入力するかどうかを指定します。ページ内のキー操作ハンドラーをトリガーする場合に便利です。デフォルトでは、テキスト全体を一度に入力します。
    • 読み取り専用:false
  • browser_wait_for

    • タイトル:待機
    • 説明:テキストが表示または非表示になるまで、あるいは指定した時間が経過するまで待機します
    • パラメーター:
      • time (number, optional):待機する時間(秒)です
      • text (string, optional):表示されるまで待機するテキストです
      • textGone (string, optional):非表示になるまで待機するテキストです
    • 読み取り専用:true
タブ管理
  • browser_tabs
    • タイトル:タブを管理
    • 説明:ブラウザータブの一覧表示、作成、閉じる、または選択を行います。
    • パラメーター:
      • action (string):実行する操作です
      • index (number, optional):閉じる/選択するタブのインデックスです。閉じる操作で省略した場合は、現在のタブが閉じられます。
    • 読み取り専用:false
ブラウザーのインストール
  • browser_install
    • タイトル:設定で指定されたブラウザーをインストール
    • 説明:設定で指定されたブラウザーをインストールします。ブラウザーがインストールされていないというエラーが表示された場合に呼び出してください。
    • パラメーター:なし
    • 読み取り専用:false
座標ベース(--caps=vision でオプトイン)
  • browser_mouse_click_xy

    • タイトル:クリック
    • 説明:指定した位置でマウスの左ボタンをクリックします
    • パラメーター:
      • element (string):要素との対話許可を得るために使用する、人が読める要素の説明です
      • x (number):X 座標です
      • y (number):Y 座標です
    • 読み取り専用:false
  • browser_mouse_drag_xy

    • タイトル:マウスをドラッグ
    • 説明:指定した位置までマウスの左ボタンをドラッグします
    • パラメーター:
      • element (string):要素との対話許可を得るために使用する、人が読める要素の説明です
      • startX (number):開始 X 座標です
      • startY (number):開始 Y 座標です
      • endX (number):終了 X 座標です
      • endY (number):終了 Y 座標です
    • 読み取り専用:false
- **browser_mouse_move_xy** - タイトル:マウスを移動 - 説明:指定した位置にマウスを移動します - パラメーター: - `element` (string):要素との対話の許可を得るために使用する、人が読んで理解できる要素の説明 - `x` (number):X 座標 - `y` (number):Y 座標 - 読み取り専用:**true**
PDF 生成(--caps=pdf でオプトイン)
  • browser_pdf_save
    • タイトル:PDF として保存
    • 説明:ページを PDF として保存します
    • パラメーター:
      • filename (string, optional):PDF の保存先ファイル名です。指定しない場合は、デフォルトで page-{timestamp}.pdf になります。
    • 読み取り専用:true
検証(--caps=verify でオプトイン)
  • browser_verify_element_visible

    • タイトル:要素の表示を検証
    • 説明:ページ上に要素が表示されていることを検証します
    • パラメーター:
      • role (string):要素の ROLE です。スナップショットでは次のように確認できます:- {ROLE} "Accessible Name":
      • accessibleName (string):要素の ACCESSIBLE_NAME です。スナップショットでは次のように確認できます:- role "{ACCESSIBLE_NAME}"
    • 読み取り専用:true
  • browser_verify_list_visible

    • タイトル:リストの表示を検証
    • 説明:ページ上にリストが表示されていることを検証します
    • パラメーター:
      • element (string):人が読んで理解できるリストの説明
      • ref (string):リストを指す、対象要素の正確な参照
      • items (array):検証する項目
    • 読み取り専用:true
  • browser_verify_text_visible

    • タイトル:テキストの表示を検証
    • 説明:テキストがページ上に表示されていることを検証します。可能な場合は browser_verify_element_visible を優先してください。
    • パラメーター:
      • text (string):検証する TEXT です。スナップショットでは次のように確認できます:- role "Accessible Name": {TEXT} または - text: {TEXT}
    • 読み取り専用:true
  • browser_verify_value

    • タイトル:値を検証
    • 説明:要素の値を検証します
    • パラメーター:
      • type (string):要素のタイプ
      • element (string):人が読んで理解できる要素の説明
      • ref (string):要素を指す、対象要素の正確な参照
      • value (string):検証する値です。チェックボックスの場合は、"true" または "false" を使用します。
    • 読み取り専用:true

コメント

MCP は初めてですか?

プロトコルの概要から最初のサーバーの導入まで、よくある疑問にまとめて答えます。

AI アプリケーションが外部のツールやデータソースに統一的な方法で接続するためのオープンなプロトコルです。クライアントはモデルとの対話を担い、MCP サーバーはツール・リソース・プロンプトテンプレートを提供します。標準メッセージでやり取りするため、1 つのサーバーを複数のクライアントで再利用できます。