Playwright MCP（Model Context Protocol）は、Microsoftが開発した次世代のブラウザ自動化ツールです。アクセシビリティツリーを活用してUI要素を認識・操作することにより、UI変更への高い耐性と安定した要素特定を実現しています。
{
"mcpServers": {
"playwright": {
"command": "npx",
"args": ["@playwright/mcp@latest"]
}
}
}
browser_navigate説明: 指定したURLにブラウザを移動させます。
パラメータ:
url (string): 移動先のURL実装例:
{
"tool_name": "browser_navigate",
"arguments": {
"url": "https://example.com"
}
}
使用場面:
browser_close説明: 現在操作しているブラウザを閉じます。
パラメータ: なし
実装例:
{
"tool_name": "browser_close",
"arguments": {}
}
使用場面:
browser_tabs説明: ブラウザタブの管理を行います。
パラメータ:
action (string): 実行する操作（"list", "new", "close", "select"）index (number, optional): タブのインデックス実装例:
{
"tool_name": "browser_tabs",
"arguments": {
"action": "new"
}
}
使用場面:
browser_click説明: 指定した要素をクリックします。
パラメータ:
element (string): 操作対象の要素の説明ref (string): ページスナップショットから取得した正確な要素参照doubleClick (boolean, optional): ダブルクリックかどうかbutton (string, optional): クリックするボタン（"left", "right", "middle"）実装例:
{
"tool_name": "browser_click",
"arguments": {
"element": "ログインボタン",
"ref": "ref123",
"button": "left"
}
}
使用場面:
browser_type説明: 編集可能な要素にテキストを入力します。
パラメータ:
element (string): 操作対象の要素の説明ref (string): ページスナップショットから取得した正確な要素参照text (string): 入力するテキストsubmit (boolean, optional): 入力後にEnterキーを押すかどうかslowly (boolean, optional): 一文字ずつ入力するかどうか実装例:
{
"tool_name": "browser_type",
"arguments": {
"element": "ユーザー名入力欄",
"ref": "ref456",
"text": "myuser",
"submit": false,
"slowly": false
}
}
使用場面:
browser_fill_form説明: 複数のフォームフィールドを一度に埋めます。
パラメータ:
fields (array): 埋めるフィールドの配列
name (string): フィールド名type (string): フィールドタイプ（"textbox", "checkbox", "radio", "combobox", "slider"）ref (string): 要素参照value (string): 入力値実装例:
{
"tool_name": "browser_fill_form",
"arguments": {
"fields": [
{
"name": "ユーザー名",
"type": "textbox",
"ref": "ref123",
"value": "testuser"
},
{
"name": "パスワード",
"type": "textbox",
"ref": "ref456",
"value": "password123"
}
]
}
}
使用場面:
browser_select_option説明: ドロップダウンからオプションを選択します。
パラメータ:
element (string): 操作対象の要素の説明ref (string): 要素参照values (array): 選択する値の配列実装例:
{
"tool_name": "browser_select_option",
"arguments": {
"element": "国選択ドロップダウン",
"ref": "ref789",
"values": ["Japan"]
}
}
使用場面:
browser_hover説明: 要素の上にマウスをホバーします。
パラメータ:
element (string): 操作対象の要素の説明ref (string): 要素参照実装例:
{
"tool_name": "browser_hover",
"arguments": {
"element": "メニューアイテム",
"ref": "ref123"
}
}
使用場面:
browser_drag説明: ドラッグ&ドロップ操作を実行します。
パラメータ:
startElement (string): ドラッグ開始要素の説明startRef (string): 開始要素の参照endElement (string): ドロップ先要素の説明endRef (string): 終了要素の参照実装例:
{
"tool_name": "browser_drag",
"arguments": {
"startElement": "ドラッグするファイル",
"startRef": "ref123",
"endElement": "アップロードエリア",
"endRef": "ref456"
}
}
使用場面:
browser_press_key説明: キーボードのキーを押します。
パラメータ:
key (string): 押すキーの名前実装例:
{
"tool_name": "browser_press_key",
"arguments": {
"key": "Enter"
}
}
使用場面:
browser_file_upload説明: ファイルをアップロードします。
パラメータ:
paths (array): アップロードするファイルのパスの配列実装例:
{
"tool_name": "browser_file_upload",
"arguments": {
"paths": ["/path/to/file1.jpg", "/path/to/file2.pdf"]
}
}
使用場面:
browser_take_screenshot説明: 現在のページのスクリーンショットを撮影します。
パラメータ:
type (string, optional): 画像形式（"png", "jpeg"）filename (string, optional): 保存するファイル名element (string, optional): 特定要素のスクリーンショットref (string, optional): 要素参照fullPage (boolean, optional): ページ全体を撮影するかどうか実装例:
{
"tool_name": "browser_take_screenshot",
"arguments": {
"type": "png",
"filename": "test_screenshot",
"fullPage": true
}
}
使用場面:
browser_snapshot説明: 現在のページのアクセシビリティスナップショットを取得します。
パラメータ: なし
実装例:
{
"tool_name": "browser_snapshot",
"arguments": {}
}
使用場面:
browser_wait_for説明: 特定の条件を待機します。
パラメータ:
time (number, optional): 待機時間（秒）text (string, optional): 待機するテキストtextGone (string, optional): 消えるのを待つテキスト実装例:
{
"tool_name": "browser_wait_for",
"arguments": {
"text": "ログイン完了",
"time": 10
}
}
使用場面:
browser_handle_dialog説明: ダイアログを処理します。
パラメータ:
accept (boolean): ダイアログを受け入れるかどうかpromptText (string, optional): プロンプトダイアログのテキスト実装例:
{
"tool_name": "browser_handle_dialog",
"arguments": {
"accept": true,
"promptText": "確認メッセージ"
}
}
使用場面:
browser_evaluate説明: ページ上でJavaScriptを実行します。
パラメータ:
function (string): 実行するJavaScript関数element (string, optional): 対象要素の説明ref (string, optional): 要素参照実装例:
{
"tool_name": "browser_evaluate",
"arguments": {
"function": "() => { return document.title; }"
}
}
使用場面:
browser_resize説明: ブラウザウィンドウのサイズを変更します。
パラメータ:
width (number): ウィンドウの幅height (number): ウィンドウの高さ実装例:
{
"tool_name": "browser_resize",
"arguments": {
"width": 1920,
"height": 1080
}
}
使用場面:
browser_install説明: 指定されたブラウザをインストールします。
パラメータ: なし
実装例:
{
"tool_name": "browser_install",
"arguments": {}
}
使用場面:
browser_console_messages説明: コンソールメッセージを取得します。
パラメータ: なし
実装例:
{
"tool_name": "browser_console_messages",
"arguments": {}
}
使用場面:
browser_network_requests説明: ネットワークリクエストを取得します。
パラメータ: なし
実装例:
{
"tool_name": "browser_network_requests",
"arguments": {}
}
使用場面:
[
{
"tool_name": "browser_navigate",
"arguments": {
"url": "https://example.com/login"
}
},
{
"tool_name": "browser_fill_form",
"arguments": {
"fields": [
{
"name": "ユーザー名",
"type": "textbox",
"ref": "ref123",
"value": "testuser"
},
{
"name": "パスワード",
"type": "textbox",
"ref": "ref456",
"value": "password123"
}
]
}
},
{
"tool_name": "browser_click",
"arguments": {
"element": "ログインボタン",
"ref": "ref789"
}
},
{
"tool_name": "browser_wait_for",
"arguments": {
"text": "ログイン完了"
}
}
]
[
{
"tool_name": "browser_navigate",
"arguments": {
"url": "https://example.com/upload"
}
},
{
"tool_name": "browser_file_upload",
"arguments": {
"paths": ["/path/to/file.jpg"]
}
},
{
"tool_name": "browser_click",
"arguments": {
"element": "アップロードボタン",
"ref": "ref123"
}
},
{
"tool_name": "browser_wait_for",
"arguments": {
"text": "アップロード完了"
}
}
]
Playwright MCPは、アクセシビリティツリーを活用した安定したブラウザ自動化を提供します。各関数は特定の用途に特化しており、組み合わせることで複雑なWeb操作を自動化できます。適切な要素特定と待機処理を実装することで、堅牢なテストスクリプトを作成できます。