playwright-browser

Name: playwright-browser
Author: 91fapiao-cn

github.com/91fapiao-cnエージェントワークフロー70134 回インストール34 週間前に更新

リポジトリ

playwright-browser について

playwright-browserは、MCPツールでブラウザーを操作する自動化向けエージェントスキルです。ページ移動や要素操作、情報抽出に加え、スクリーンショットやテストにも対応します。

主な機能

01ブラウザー起動とページ管理
02ページ移動と要素操作
03テキスト・リンク・属性の抽出
04ページと要素のスクリーンショット
05Cookie・ネットワーク・ストレージ制御
06デバイスエミュレーションと性能指標

活用シーン

01Webページにアクセスしてタイトルを取得
02検索フォームに入力して結果を取得
03ニュース見出しやページ内リンクを抽出
04ユーザー操作を模擬してサイトをテスト

MCP 対応

MCPツールを通じてブラウザーを操作します。ページ移動や操作、情報抽出の前にブラウザーを起動し、作業後に終了します。

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/91fapiao-cn/playwright-browser-skill --skill playwright-browser

インストール後、Claude Code で/playwright-browserを入力して読み込まれたか確認します。

詳細

Playwright Browser Skill - ブラウザー自動化スキル

⚡ AI 呼び出しガイド（OpenClaw 必読）

MCP ツールの呼び出し方法

ユーザーからブラウザー操作を依頼された場合は、MCP プロトコルを使って該当するツールを呼び出します。呼び出し方法は以下のとおりです。

基本的な呼び出し手順

ブラウザーを起動 → browser_launch を呼び出します
Web ページにアクセス → browser_goto を呼び出します
操作を実行 → 該当するツール（クリック、入力、抽出など）を呼び出します
ブラウザーを閉じる → browser_close を呼び出します

よく使うツールのクイックリファレンス

ユーザーの要望	呼び出すツール	パラメーターの例
「Web サイトにアクセス」	`browser_goto`	`{ "url": "https://example.com" }`
「ボタンをクリック」	`browser_click`	`{ "selector": "button.submit" }`
「フォームに入力」	`browser_fill`	`{ "selector": "#username", "value": "admin" }`
「タイトルを取得」	`browser_get_title`	`{}`
「スクリーンショットを撮る」	`browser_screenshot`	`{ "path": "screenshot.png", "fullPage": true }`
「テキストを取得」	`browser_get_text`	`{ "selector": "h1" }`
「要素を待機」	`browser_wait_for_selector`	`{ "selector": ".content" }`

完全な例：Web ページにアクセスしてタイトルを取得

用户："访问 example.com 并获取页面标题"

你应该调用：
1. browser_launch({ "headless": false })
2. browser_goto({ "url": "https://example.com" })
3. browser_get_title({})
4. browser_close({})

完全な例：検索操作

用户："在百度搜索 OpenClaw"

你应该调用：
1. browser_launch({})
2. browser_goto({ "url": "https://www.baidu.com" })
3. browser_fill({ "selector": "#kw", "value": "OpenClaw" })
4. browser_click({ "selector": "#su" })
5. browser_wait_for_selector({ "selector": ".result" })
6. browser_close({})

重要な注意事項

✅ 最初に必ず browser_launch を呼び出す - どの操作を行う場合も、先にブラウザーを起動してください
✅ 使用後は browser_close を呼び出す - リソースを解放します
✅ 要素の読み込みを待つ - browser_wait_for_selector を使用して、要素の存在を確認します
✅ セレクターの構文 - CSS セレクター（#id、.class、button[type="submit"]）を使用します

🚀 ユーザー向けガイド

このスキルを使うと、ブラウザーを操作して、Web ページへのアクセス、コンテンツの抽出、スクリーンショットの撮影などを行えます。MCP プロトコルを通じて、101 種類のブラウザー操作ツールを利用できます。

このスキルの使い方

基本的な使い方： Web ページへのアクセス、情報の抽出、ブラウザーの操作が必要なときは、要望をそのまま伝えてください。タスクに適したツールを自動的に選択して実行します。

会話の例：

「example.com にアクセスして、ページのタイトルを取得して」
「百度を開いて、『OpenClaw』を検索して」
「github.com にアクセスして、スクリーンショットを撮って」
「この Web ページからすべてのリンクを抽出して」
「ブラウザーを起動して、https://www.google.com にアクセスして」

主な機能

Web ページへのアクセス - あらゆる Web サイトにアクセスして、ページの内容を取得します
コンテンツの抽出 - テキスト、リンク、画像などの情報を抽出します
ページの操作 - ボタンのクリック、フォームへの入力、ページのスクロールを行います
スクリーンショットの保存 - ページ全体または特定の要素のスクリーンショットを撮影します
データの取得 - Web ページのデータを一括で抽出します
自動テスト - ユーザーの操作をシミュレートして、Web サイトの機能をテストします

よくある使用例

使用例 1：Web ページをすばやく確認

你：帮我看看 example.com 上有什么内容
我：会自动启动浏览器，访问网页，提取并总结内容

使用例 2：情報の抽出

你：从 news.ycombinator.com 提取今天的热门文章标题
我：会访问网页，提取所有文章标题并整理给你

使用例 3：Web ページのスクリーンショット

你：帮我截取 github.com 首页的截图
我：会访问网页并保存截图

使用例 4：フォームへの入力

你：帮我在这个网站的搜索框输入 "OpenClaw" 并搜索
我：会找到搜索框，输入内容，点击搜索按钮

💡 使用上のヒント

ツール名を指定する必要はありません - 要望をそのまま伝えると、適切なツールを自動的に選択します
中国語と英語に対応 - 中国語または英語で要望を伝えられます
複雑なタスクにも対応 - 複数の操作を組み合わせて、複雑なタスクを実行できます
エラーを自動処理 - 問題が発生した場合は、自動的に再試行するか、手順を調整します

🔧 ツール呼び出しガイド（OpenClaw 向け）

基本的な呼び出し手順

手順 1：ブラウザーを起動

工具名称: browser_launch
参数: {
  "browserType": "chromium",
  "headless": false
}

手順 2：Web ページにアクセス

工具名称: browser_goto
参数: {
  "url": "https://example.com",
  "waitUntil": "networkidle"
}

手順 3：コンテンツを抽出

工具名称: browser_get_title
参数: {}

手順 4：ブラウザーを閉じる

工具名称: browser_close
参数: {}

よく使うツールのクイックリファレンス

1. ブラウザーを起動

{
  "tool": "browser_launch",
  "arguments": {
    "browserType": "chromium",
    "headless": false
  }
}

2. Web ページにアクセス

{
  "tool": "browser_goto",
  "arguments": {
    "url": "https://example.com"
  }
}

3. ページのタイトルを取得

{
  "tool": "browser_get_title",
  "arguments": {}
}

4. ページのテキストを取得

{
  "tool": "browser_get_text",
  "arguments": {
    "selector": "body"
  }
}

5. 要素をクリック

{
  "tool": "browser_click",
  "arguments": {
    "selector": "button.submit"
  }
}

6. フォームに入力

{
  "tool": "browser_fill",
  "arguments": {
    "selector": "#username",
    "value": "[email protected]"
  }
}

7. スクリーンショットを撮る

{
  "tool": "browser_screenshot",
  "arguments": {
    "path": "screenshot.png",
    "fullPage": true
  }
}

8. すべてのリンクを取得

{
  "tool": "browser_get_links",
  "arguments": {}
}

9. 要素を待機

{
  "tool": "browser_wait_for_selector",
  "arguments": {
    "selector": ".content",
    "timeout": 10000
  }
}

10. ブラウザーを閉じる

{
  "tool": "browser_close",
  "arguments": {}
}

タスクの完全な例

例 1：Web ページにアクセスしてタイトルを抽出

步骤 1: browser_launch
  参数: { "headless": false }

步骤 2: browser_goto
  参数: { "url": "https://example.com" }

步骤 3: browser_get_title
  参数: {}

步骤 4: browser_close
  参数: {}

例 2：検索して結果を抽出

步骤 1: browser_launch
  参数: { "headless": false }

步骤 2: browser_goto
  参数: { "url": "https://www.baidu.com" }

步骤 3: browser_fill
  参数: { "selector": "#kw", "value": "OpenClaw" }

步骤 4: browser_click
  参数: { "selector": "#su" }

步骤 5: browser_wait_for_selector
  参数: { "selector": ".result", "timeout": 5000 }

步骤 6: browser_get_text
  参数: { "selector": ".result" }

步骤 7: browser_close
  参数: {}

例 3：Web ページのデータを抽出

步骤 1: browser_launch
  参数: {}

步骤 2: browser_goto
  参数: { "url": "https://news.ycombinator.com" }

步骤 3: browser_wait_for_selector
  参数: { "selector": ".itemlist" }

步骤 4: browser_evaluate
  参数: { 
    "script": "Array.from(document.querySelectorAll('.titleline > a')).map(a => ({ title: a.textContent, url: a.href }))"
  }

步骤 5: browser_close
  参数: {}

重要な注意事項

最初に必ずブラウザーを起動 - ほかのツールを使う前に、必ず browser_launch を呼び出します
使用後はブラウザーを閉じる - タスクの完了後、browser_close を呼び出してリソースを解放します
ページの読み込みを待つ - Web ページにアクセスした後、browser_wait_for_selector を使ってコンテンツの読み込みを待ちます
正確なセレクターを指定 - 正しい CSS セレクターを使って要素を特定します
エラーに対処 - ツールの呼び出しに失敗した場合は、パラメーターが正しいか確認します

📚 技術ドキュメント

以下に、上級ユーザー向けのツール一覧と技術ドキュメントを示します。

ブラウザー管理 (8 個のツール)
ページナビゲーション (4 個のツール)
要素の操作 (12 個のツール)
キーボードとマウスの操作 (8 個のツール)
コンテンツの抽出 (11 個のツール)
高度なセレクター (7 個のツール)
待機操作 (7 個のツール)
スクリーンショットと PDF (3 個のツール)
JavaScript の実行 (3 個のツール)
Cookie とストレージ (8 個のツール)
ネットワーク制御 (7 個のツール)
ファイル操作 (2 個のツール)
ビューポートとデバイス (6 個のツール)
スクロール操作 (2 個のツール)
パフォーマンス指標 (3 個のツール)
アクセシビリティ機能 (1 個のツール)
時間制御 (5 個のツール)
権限管理 (2 個のツール)
ダイアログの処理 (1 個のツール)
Frame 操作 (1 個のツール)

ブラウザー管理

browser_launch

ブラウザーのインスタンスを起動します（デバイスのエミュレーション、動画の録画、トレースなどの高度な機能に対応）

パラメーター：

browserType: 'chromium' | 'firefox' | 'webkit' (デフォルト: 'chromium')
headless: boolean - ヘッドレスモードを使用するかどうか (デフォルト: true)
viewport: { width: number, height: number } - ビューポートのサイズ
deviceName: string - デバイス名。'iPhone 13'、'Pixel 5' など
recordVideo: boolean - 動画を録画するかどうか
recordTrace: boolean - トレースを記録するかどうか
slowMo: number - スローモーションの遅延時間（ミリ秒）

呼び出し例：

{
  "browserType": "chromium",
  "headless": false,
  "viewport": { "width": 1920, "height": 1080 },
  "deviceName": "iPhone 13"
}

browser_close

ブラウザーを閉じ、すべてのリソースを解放します

パラメーター： なし

呼び出し例：

{}

browser_new_page

新しいブラウザーページ（タブ）を作成します

パラメーター： なし

呼び出し例：

{}

browser_switch_page

指定したインデックスのページに切り替えます

パラメーター：

index: number - ページのインデックス（0 から開始）

呼び出し例：

{ "index": 1 }

browser_close_page

指定したインデックスのページを閉じます

パラメーター：

index: number - ページのインデックス（省略可。デフォルトでは現在のページを閉じます）

呼び出し例：

{ "index": 0 }

browser_get_all_pages

開いているすべてのページの一覧を取得します

パラメーター： なし

呼び出し例：

{}

browser_get_version

获取浏览器版本信息

参数： 无

调用示例：

{}

browser_is_connected

检查浏览器连接状态

参数： 无

调用示例：

{}

页面导航

browser_goto

导航到指定URL

参数：

url: string - 目标URL（必需）
waitUntil: 'load' | 'domcontentloaded' | 'networkidle' - 等待条件
timeout: number - 超时时间（毫秒）

调用示例：

{
  "url": "https://www.example.com",
  "waitUntil": "networkidle",
  "timeout": 30000
}

browser_go_back

返回上一页

参数： 无

调用示例：

{}

browser_go_forward

前进到下一页

参数： 无

调用示例：

{}

browser_reload

刷新当前页面

参数： 无

调用示例：

{}

元素交互

browser_click

点击页面元素

参数：

selector: string - CSS选择器（必需）
timeout: number - 超时时间（毫秒）
button: 'left' | 'right' | 'middle' - 鼠标按钮
clickCount: number - 点击次数

调用示例：

{
  "selector": "button.submit",
  "button": "left",
  "clickCount": 1
}

browser_dblclick

双击元素

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": ".item" }

browser_hover

鼠标悬停在元素上

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": ".menu-item" }

browser_fill

填写表单字段（清空后填入）

参数：

selector: string - CSS选择器（必需）
value: string - 要填写的值（必需）

调用示例：

{
  "selector": "#username",
  "value": "[email protected]"
}

browser_type

逐字符输入文本（模拟真实键盘输入）

参数：

selector: string - CSS选择器（必需）
text: string - 要输入的文本（必需）
delay: number - 每个字符间的延迟（毫秒）

调用示例：

{
  "selector": "#search",
  "text": "playwright",
  "delay": 100
}

browser_press

按下键盘按键

参数：

selector: string - CSS选择器（必需）
key: string - 按键名称（如 'Enter', 'Tab', 'Escape'）

调用示例：

{
  "selector": "#search",
  "key": "Enter"
}

browser_select

选择下拉框选项

参数：

selector: string - CSS选择器（必需）
value: string | string[] - 选项值（必需）

调用示例：

{
  "selector": "select#country",
  "value": "US"
}

browser_check

勾选复选框

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": "#agree-terms" }

browser_uncheck

取消勾选复选框

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": "#newsletter" }

browser_focus

聚焦到元素

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": "#email" }

browser_drag

拖拽元素到目标位置

参数：

sourceSelector: string - 源元素选择器（必需）
targetSelector: string - 目标元素选择器（必需）

调用示例：

{
  "sourceSelector": ".draggable",
  "targetSelector": ".drop-zone"
}

browser_tap

触摸点击（移动端）

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": ".mobile-button" }

键盘鼠标操作

browser_keyboard_down

按下键盘按键（不释放）

参数：

key: string - 按键名称（必需）

调用示例：

{ "key": "Shift" }

browser_keyboard_up

释放键盘按键

参数：

key: string - 按键名称（必需）

调用示例：

{ "key": "Shift" }

browser_mouse_move

移动鼠标到指定坐标

参数：

x: number - X坐标（必需）
y: number - Y坐标（必需）
steps: number - 移动步数（平滑移动）

调用示例：

{
  "x": 100,
  "y": 200,
  "steps": 10
}

browser_mouse_click

在指定坐标点击鼠标

参数：

x: number - X坐标（必需）
y: number - Y坐标（必需）

调用示例：

{
  "x": 150,
  "y": 250
}

browser_mouse_wheel

鼠标滚轮滚动

参数：

deltaX: number - 水平滚动量（必需）
deltaY: number - 垂直滚动量（必需）

调用示例：

{
  "deltaX": 0,
  "deltaY": 100
}

browser_mouse_down

按下鼠标按键（不释放）

参数：

button: 'left' | 'right' | 'middle' - 鼠标按键
clickCount: number - 点击次数

调用示例：

{
  "button": "left",
  "clickCount": 1
}

browser_mouse_up

释放鼠标按键

参数：

button: 'left' | 'right' | 'middle' - 鼠标按键
clickCount: number - 点击次数

调用示例：

{
  "button": "left",
  "clickCount": 1
}

browser_keyboard_insert_text

插入文本（不触发键盘事件，直接设置值）

参数：

text: string - 要插入的文本（必需）

调用示例：

{
  "text": "Hello World"
}

内容提取

browser_get_text

获取元素的文本内容

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": "h1.title" }

browser_get_title

获取页面标题

参数： 无

调用示例：

{}

browser_get_html

获取整个页面的HTML内容

参数： 无

调用示例：

{}

browser_get_links

获取页面中所有链接

参数： 无

调用示例：

{}

browser_get_attribute

获取元素的属性值

参数：

selector: string - CSS选择器（必需）
attribute: string - 属性名称（必需）

调用示例：

{
  "selector": "img.logo",
  "attribute": "src"
}

browser_get_input_value

获取输入框的值

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": "#email" }

browser_is_visible

检查元素是否可见

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": ".modal" }

browser_is_enabled

检查元素是否启用

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": "button.submit" }

browser_is_checked

检查复选框/单选框是否选中

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": "#agree" }

browser_count

统计匹配选择器的元素数量

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": ".product-item" }

browser_get_current_url

获取当前页面URL

参数： 无

调用示例：

{}

高级选择器

browser_get_by_role

通过ARIA角色查找元素

参数：

role: string - ARIA角色（必需）
name: string - 可访问名称

调用示例：

{
  "role": "button",
  "name": "Submit"
}

browser_get_by_text

通过文本内容查找元素

参数：

text: string - 文本内容（必需）
exact: boolean - 是否精确匹配

调用示例：

{
  "text": "Sign In",
  "exact": true
}

browser_get_by_label

通过标签文本查找表单元素

参数：

text: string - 标签文本（必需）
exact: boolean - 是否精确匹配

调用示例：

{
  "text": "Email Address",
  "exact": false
}

browser_get_by_placeholder

通过占位符文本查找输入框

参数：

text: string - 占位符文本（必需）
exact: boolean - 是否精确匹配

调用示例：

{
  "text": "Enter your email",
  "exact": false
}

browser_get_by_test_id

通过测试ID查找元素

参数：

testId: string - 测试ID（必需）

调用示例：

{ "testId": "submit-button" }

browser_get_by_alt_text

通过alt属性文本查找图片元素

参数：

text: string - alt文本（必需）
exact: boolean - 是否精确匹配

调用示例：

{
  "text": "Company Logo",
  "exact": false
}

browser_get_by_title

通过title属性查找元素

参数：

text: string - title文本（必需）
exact: boolean - 是否精确匹配

调用示例：

{
  "text": "Click to expand",
  "exact": false
}

等待操作

browser_wait_for_selector

等待元素出现在DOM中

参数：

selector: string - CSS选择器（必需）
timeout: number - 超时时间（毫秒）
state: 'attached' | 'visible' | 'hidden' - 等待状态

调用示例：

{
  "selector": ".loading-complete",
  "timeout": 10000,
  "state": "visible"
}

browser_wait_for_timeout

等待指定时间

参数：

timeout: number - 等待时间（毫秒，必需）

调用示例：

{ "timeout": 3000 }

browser_wait_for_url

等待URL匹配指定模式

参数：

url: string - URL模式（必需）
timeout: number - 超时时间（毫秒）

调用示例：

{
  "url": "https://example.com/dashboard",
  "timeout": 5000
}

browser_wait_for_request

等待网络请求

参数：

urlPattern: string - URL模式（必需）
timeout: number - 超时时间（毫秒）

调用示例：

{
  "urlPattern": "**/api/users",
  "timeout": 10000
}

browser_wait_for_response

等待网络响应

参数：

urlPattern: string - URL模式（必需）
timeout: number - 超时时间（毫秒）

调用示例：

{
  "urlPattern": "**/api/data",
  "timeout": 10000
}

browser_wait_for_function

等待JavaScript函数返回true

参数：

fn: string - JavaScript函数代码（必需）
arg: any - 传递给函数的参数
timeout: number - 超时时间（毫秒）
polling: number - 轮询间隔（毫秒）

调用示例：

{
  "fn": "() => document.readyState === 'complete'",
  "timeout": 5000,
  "polling": 100
}

browser_wait_for_load_state

等待页面加载到指定状态

参数：

state: 'load' | 'domcontentloaded' | 'networkidle' - 加载状态（必需）
timeout: number - 超时时间（毫秒）

调用示例：

{
  "state": "networkidle",
  "timeout": 30000
}

截图和PDF

browser_screenshot

截取页面截图

参数：

path: string - 保存路径
fullPage: boolean - 是否截取整页
type: 'png' | 'jpeg' - 图片格式
quality: number - 图片质量（0-100，仅JPEG）

调用示例：

{
  "path": "screenshot.png",
  "fullPage": true,
  "type": "png"
}

browser_screenshot_element

截取指定元素的截图

参数：

selector: string - CSS选择器（必需）
path: string - 保存路径

调用示例：

{
  "selector": ".chart",
  "path": "chart.png"
}

browser_pdf

生成页面PDF

参数：

path: string - 保存路径
format: string - 纸张格式（如 'A4', 'Letter'）
printBackground: boolean - 是否打印背景

调用示例：

{
  "path": "page.pdf",
  "format": "A4",
  "printBackground": true
}

JavaScript执行

browser_evaluate

在页面上下文中执行JavaScript代码

参数：

script: string - JavaScript代码（必需）
arg: any - 传递给脚本的参数

调用示例：

{
  "script": "document.querySelectorAll('h2').length"
}

browser_add_script_tag

向页面添加脚本标签

参数：

url: string - 脚本URL
content: string - 脚本内容

调用示例：

{
  "url": "https://cdn.example.com/library.js"
}

browser_add_style_tag

向页面添加样式标签

参数：

url: string - 样式URL
content: string - 样式内容

调用示例：

{
  "content": "body { background: red; }"
}

Cookie和存储

browser_set_cookies

设置一个或多个Cookie

参数：

cookies: array - Cookie数组（必需）
- name: string - Cookie名称
- value: string - Cookie值
- domain: string - 域名
- path: string - 路径

调用示例：

{
  "cookies": [
    {
      "name": "session",
      "value": "abc123",
      "domain": "example.com",
      "path": "/"
    }
  ]
}

browser_get_cookies

获取当前页面的所有Cookie

参数： 无

调用示例：

{}

browser_clear_cookies

清除所有Cookie

参数： 无

调用示例：

{}

browser_set_local_storage

设置LocalStorage项

参数：

key: string - 键名（必需）
value: string - 值（必需）

调用示例：

{
  "key": "theme",
  "value": "dark"
}

browser_get_local_storage

获取LocalStorage项

参数：

key: string - 键名（可选，不提供则返回所有）

调用示例：

{ "key": "theme" }

browser_clear_local_storage

清除LocalStorage

参数： 无

调用示例：

{}

browser_storage_state

保存存储状态（Cookie和LocalStorage）

参数：

path: string - 保存路径

调用示例：

{ "path": "storage.json" }

browser_restore_storage_state

恢复存储状态

参数：

state: object - 存储状态对象（必需）

调用示例：

{
  "state": { "cookies": [], "origins": [] }
}

网络控制

browser_set_offline

设置离线模式

参数：

offline: boolean - 是否离线（必需）

调用示例：

{ "offline": true }

browser_block_requests

拦截匹配模式的请求

参数：

patterns: array - URL模式数组（必需）

调用示例：

{
  "patterns": ["*.jpg", "*.png", "*/ads/*"]
}

browser_mock_response

模拟网络响应

参数：

urlPattern: string - URL模式（必需）
response: object - 响应对象（必需）
- status: number - 状态码
- body: string - 响应体
- contentType: string - 内容类型

调用示例：

{
  "urlPattern": "**/api/users",
  "response": {
    "status": 200,
    "body": "{\"users\": []}",
    "contentType": "application/json"
  }
}

browser_get_request_logs

获取请求日志

参数：

limit: number - 限制数量

调用示例：

{ "limit": 50 }

browser_get_response_logs

获取响应日志

参数：

limit: number - 限制数量

调用示例：

{ "limit": 50 }

browser_get_console_logs

获取控制台日志

参数：

limit: number - 限制数量

调用示例：

{ "limit": 100 }

browser_clear_logs

清除所有日志（请求、响应、控制台）

参数： 无

调用示例：

{}

文件操作

browser_upload_file

上传文件到文件输入框

参数：

selector: string - 文件输入框选择器（必需）
filePath: string | array - 文件路径（必需）

调用示例：

{
  "selector": "input[type='file']",
  "filePath": "C:\\Users\\Admin\\document.pdf"
}

browser_download_file

触发文件下载

参数：

triggerSelector: string - 触发下载的元素选择器（必需）

调用示例：

{ "triggerSelector": "a.download-link" }

视口和设备

browser_set_viewport_size

设置视口大小

参数：

width: number - 宽度（必需）
height: number - 高度（必需）

调用示例：

{
  "width": 1920,
  "height": 1080
}

browser_get_viewport_size

获取当前视口大小

参数： 无

调用示例：

{}

browser_emulate_media

模拟媒体类型和配色方案

参数：

colorScheme: 'light' | 'dark' | 'no-preference' - 配色方案
media: 'screen' | 'print' - 媒体类型

调用示例：

{
  "colorScheme": "dark",
  "media": "screen"
}

browser_set_geolocation

设置地理位置

参数：

latitude: number - 纬度（必需）
longitude: number - 经度（必需）
accuracy: number - 精度

调用示例：

{
  "latitude": 37.7749,
  "longitude": -122.4194,
  "accuracy": 100
}

browser_clear_geolocation

清除地理位置设置

参数： 无

调用示例：

{}

browser_touchscreen_tap

触摸屏点击指定坐标（移动端）

参数：

x: number - X坐标（必需）
y: number - Y坐标（必需）

调用示例：

{
  "x": 100,
  "y": 200
}

滚动操作

browser_scroll_to

滚动到指定坐标

参数：

x: number - X坐标（必需）
y: number - Y坐标（必需）

调用示例：

{
  "x": 0,
  "y": 1000
}

browser_scroll_into_view

滚动元素到可见区域

参数：

selector: string - CSS选择器（必需）

调用示例：

{ "selector": "#footer" }

性能指标

browser_get_metrics

获取页面性能指标

参数： 无

调用示例：

{}

返回数据包括：

domContentLoaded: DOM内容加载时间
loadComplete: 页面完全加载时间
firstPaint: 首次绘制时间
firstContentfulPaint: 首次内容绘制时间

browser_get_coverage

开始收集JavaScript和CSS代码覆盖率

参数： 无

调用示例：

{}

browser_stop_coverage

停止收集代码覆盖率并返回结果

参数： 无

调用示例：

{}

无障碍功能

browser_get_accessibility_snapshot

获取页面无障碍树快照

参数：

selector: string - 限定范围的选择器（可选）

调用示例：

{ "selector": "main" }

时间控制

browser_install_clock

安装时钟控制（用于测试时间相关功能）

参数：

time: number | string - 初始时间

调用示例：

{ "time": 1609459200000 }

browser_set_system_time

设置系统时间

参数：

time: number | string - 时间戳或日期字符串（必需）

调用示例：

{ "time": "2024-01-01T00:00:00Z" }

browser_fast_forward

快进时间

参数：

time: number - 快进的毫秒数（必需）

调用示例：

{ "time": 60000 }

browser_pause_clock

暂停时钟（冻结时间）

参数： 无

调用示例：

{}

browser_resume_clock

恢复时钟运行

参数： 无

调用示例：

{}

权限管理

browser_grant_permissions

授予浏览器权限

参数：

permissions: array - 权限列表（必需）
- 可选值: 'geolocation', 'notifications', 'camera', 'microphone', 'clipboard-read', 'clipboard-write'
origin: string - 限定域名

调用示例：

{
  "permissions": ["geolocation", "notifications"],
  "origin": "https://example.com"
}

browser_clear_permissions

清除所有权限

参数： 无

调用示例：

{}

对话框处理

browser_handle_dialog

处理JavaScript对话框（alert, confirm, prompt）

参数：

action: 'accept' | 'dismiss' - 操作类型（必需）
promptText: string - prompt对话框的输入文本

调用示例：

{
  "action": "accept",
  "promptText": "My Input"
}

Frame操作

browser_get_frames

获取页面中所有frame

参数： 无

调用示例：

{}

🎯 实际使用场景示例

以下是一些实际的使用场景，展示如何用自然语言与我交互来完成任务。

场景 1：查看网页内容

你说： "帮我看看 example.com 上有什么"

我会做：

启动浏览器
访问 example.com
提取页面标题和主要内容
总结并告诉你

场景 2：搜索信息

你说： "在百度搜索 'OpenClaw 使用教程'"

我会做：

启动浏览器
访问百度
在搜索框输入关键词
点击搜索按钮
提取搜索结果

场景 3：提取数据

你说： "从 news.ycombinator.com 提取前10条新闻标题"

我会做：

访问 Hacker News
定位新闻列表
提取标题和链接
整理成列表返回给你

场景 4：网页截图

你说： "帮我截取 github.com 首页的截图"

我会做：

访问 GitHub
等待页面加载完成
截取整页截图
保存并告诉你文件位置

场景 5：表单操作

你说： "帮我在这个登录页面输入用户名和密码"

我会做：

找到用户名输入框
填写用户名
找到密码输入框
填写密码
询问是否需要点击登录按钮

场景 6：监控网页变化

你说： "每隔5分钟检查一次这个网页的价格"

我会做：

定期访问网页
提取价格信息
与上次对比
如有变化立即通知你

📖 技术文档：工具列表

以下是完整的 101 个工具的详细文档，供高级用户和开发者参考。

注意： 作为普通用户，你不需要了解这些技术细节。直接用自然语言告诉我你的需求即可。

使用示例

示例1：基础网页访问和截图

1. browser_launch({ "headless": false })
2. browser_goto({ "url": "https://www.example.com" })
3. browser_get_title()
4. browser_screenshot({ "path": "screenshot.png", "fullPage": true })
5. browser_close()

示例2：表单填写和提交

1. browser_launch()
2. browser_goto({ "url": "https://example.com/login" })
3. browser_fill({ "selector": "#username", "value": "[email protected]" })
4. browser_fill({ "selector": "#password", "value": "password123" })
5. browser_click({ "selector": "button[type='submit']" })
6. browser_wait_for_selector({ "selector": ".dashboard", "timeout": 10000 })
7. browser_close()

示例3：数据抓取

1. browser_launch()
2. browser_goto({ "url": "https://example.com/products" })
3. browser_wait_for_selector({ "selector": ".product-list" })
4. browser_count({ "selector": ".product-item" })
5. browser_get_links()
6. browser_evaluate({ "script": "Array.from(document.querySelectorAll('.price')).map(e => e.textContent)" })
7. browser_close()

示例4：网络拦截和模拟

1. browser_launch()
2. browser_block_requests({ "patterns": ["*.jpg", "*.png", "*/ads/*"] })
3. browser_mock_response({ 
     "urlPattern": "**/api/users", 
     "response": { "status": 200, "body": "{\"users\": []}" }
   })
4. browser_goto({ "url": "https://example.com" })
5. browser_get_request_logs({ "limit": 50 })
6. browser_close()

示例5：移动设备模拟

1. browser_launch({ 
     "deviceName": "iPhone 13", 
     "headless": false 
   })
2. browser_goto({ "url": "https://example.com" })
3. browser_tap({ "selector": ".mobile-menu" })
4. browser_screenshot({ "path": "mobile.png" })
5. browser_close()

示例6：性能监控

1. browser_launch()
2. browser_goto({ "url": "https://example.com" })
3. browser_get_metrics()
4. browser_get_console_logs({ "limit": 100 })
5. browser_get_response_logs({ "limit": 50 })
6. browser_close()

选择器语法参考

CSS选择器

/* ID选择器 */
#element-id

/* 类选择器 */
.class-name

/* 属性选择器 */
[data-testid="submit"]
[name="username"]
[type="text"]

/* 组合选择器 */
div.container > button.primary
form input[type="text"]
ul li:first-child

/* 伪类选择器 */
button:hover
input:focus
div:nth-child(2)

高级选择器

// 通过文本内容
browser_get_by_text({ "text": "Sign In" })

// 通过ARIA角色
browser_get_by_role({ "role": "button", "name": "Submit" })

// 通过标签
browser_get_by_label({ "text": "Email Address" })

// 通过占位符
browser_get_by_placeholder({ "text": "Enter your email" })

// 通过测试ID
browser_get_by_test_id({ "testId": "submit-button" })

常用键盘按键

Enter - 回车键
Tab - Tab键
Escape - Esc键
Backspace - 退格键
Delete - 删除键
ArrowUp, ArrowDown, ArrowLeft, ArrowRight - 方向键
Home, End - Home/End键
PageUp, PageDown - 翻页键
Control, Shift, Alt, Meta - 修饰键
F1-F12 - 功能键

错误处理和最佳实践

1. 浏览器生命周期管理

使用前必须先调用 browser_launch 启动浏览器
使用完毕后应调用 browser_close 释放资源
浏览器未启动时调用其他方法会抛出错误

2. 等待策略

使用 browser_wait_for_selector 确保元素加载完成
设置合理的超时时间（默认30秒）
使用 waitUntil: 'networkidle' 等待网络请求完成

3. 选择器最佳实践

优先使用稳定的选择器（ID、data-testid）
避免使用易变的选择器（nth-child、复杂的CSS路径）
使用语义化选择器（getByRole、getByLabel）提高可维护性

4. 性能优化

使用 headless: true 提高执行速度
使用 browser_block_requests 拦截不必要的资源（图片、广告）
合理设置视口大小，避免过大的截图

5. 调试技巧

使用 headless: false 查看浏览器操作过程
使用 slowMo 参数减慢操作速度
使用 browser_get_console_logs 查看页面错误
使用 recordVideo 和 recordTrace 记录操作过程

6. 错误处理

// 所有工具调用失败时会返回错误信息
// 建议在使用时：
1. 先检查浏览器是否已启动
2. 使用 wait_for_selector 确保元素加载完成
3. 设置合理的超时时间
4. 使用 try-catch 处理异常情况

注意事项

路径格式：Windows系统使用双反斜杠 \\ 或正斜杠 /
- 正确：C:\\Users\\Admin\\file.pdf 或 C:/Users/Admin/file.pdf
- 错误：C:\Users\Admin\file.pdf
超时设置：默认超时为30秒，可根据需要调整
- 网络慢时增加超时时间
- 快速操作可减少超时时间
截图返回：截图返回base64编码的图片数据
- 可保存到文件或直接使用
Cookie域名：设置Cookie时必须指定正确的域名
- 域名必须与当前页面匹配
JavaScript执行：evaluate中的代码在页面上下文执行
- 可访问页面的DOM和全局变量
- 返回值必须是可序列化的
设备模拟：支持的设备名称参考Playwright设备列表
- 常用：'iPhone 13', 'Pixel 5', 'iPad Pro'
权限授予：某些功能需要先授予权限
- 地理位置需要 'geolocation' 权限
- 通知需要 'notifications' 权限

工具总数统计

浏览器管理: 8个工具
页面导航: 4个工具
元素交互: 12个工具
键盘鼠标操作: 5个工具
内容提取: 11个工具
高级选择器: 5个工具
等待操作: 5个工具
截图和PDF: 3个工具
JavaScript执行: 3个工具
Cookie和存储: 8个工具
网络控制: 7个工具
文件操作: 2个工具
视口和设备: 4个工具
滚动操作: 2个工具
性能指标: 1个工具
无障碍功能: 1个工具
时间控制: 3个工具
权限管理: 2个工具
对话框处理: 1个工具
Frame操作: 1个工具

总计：101个核心工具

版本信息

版本: 2.0.0
更新日期: 2024
Playwright版本: 最新稳定版
支持平台: Windows, macOS, Linux

技术支持

如遇到问题，请检查：

Playwright是否正确安装
浏览器驱动是否已下载
选择器是否正确
超时时间是否足够
网络连接是否正常

更多信息请参考：

Playwright官方文档：https://playwright.dev
项目README文档
Windows兼容性指南

Markdown 対応

ログインしてコメント

基本情報

作者: 91fapiao-cn
リポジトリ: 91fapiao-cn/playwright-browser-skill
カテゴリ: エージェントワークフロー
インストール数: 134
GitHub スター: 70

問題を報告

playwright-browser

playwright-browser について

主な機能

活用シーン

MCP 対応

インストール

詳細

Playwright Browser Skill - ブラウザー自動化スキル

⚡ AI 呼び出しガイド（OpenClaw 必読）

MCP ツールの呼び出し方法

基本的な呼び出し手順

よく使うツールのクイックリファレンス

完全な例：Web ページにアクセスしてタイトルを取得

完全な例：検索操作

重要な注意事項

🚀 ユーザー向けガイド

このスキルの使い方

主な機能

よくある使用例

💡 使用上のヒント

🔧 ツール呼び出しガイド（OpenClaw 向け）

基本的な呼び出し手順

よく使うツールのクイックリファレンス

1. ブラウザーを起動

2. Web ページにアクセス

3. ページのタイトルを取得

4. ページのテキストを取得

5. 要素をクリック

6. フォームに入力

7. スクリーンショットを撮る

8. すべてのリンクを取得

9. 要素を待機

10. ブラウザーを閉じる

タスクの完全な例

例 1：Web ページにアクセスしてタイトルを抽出

例 2：検索して結果を抽出

例 3：Web ページのデータを抽出

重要な注意事項

📚 技術ドキュメント

目次

ブラウザー管理

browser_launch

browser_close

browser_new_page

browser_switch_page

browser_close_page

browser_get_all_pages

browser_get_version

browser_is_connected

页面导航

browser_goto

browser_go_back

browser_go_forward

browser_reload

元素交互

browser_click

browser_dblclick

browser_hover

browser_fill

browser_type

browser_press

browser_select

browser_check

browser_uncheck

browser_focus

browser_drag

browser_tap

键盘鼠标操作

browser_keyboard_down

browser_keyboard_up

browser_mouse_move

browser_mouse_click

browser_mouse_wheel

browser_mouse_down

browser_mouse_up

browser_keyboard_insert_text

内容提取

browser_get_text

browser_get_title

browser_get_html