How do I install the Playwright Browser skill?

Run npx skillmds@latest add tomevault-io/playwright-browser-2 in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Playwright Browser skill do?

浏览器自动化技能，支持101个工具：页面导航、元素交互、内容提取、截图、网络控制、性能监控等 Use when this capability is needed. It is listed under Coding & Dev Tools on SkillMD.

Is Playwright Browser safe to use?

This skill has not completed SkillMD's automated safety review yet. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Playwright Browser?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Playwright Browser free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Playwright Browser?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Playwright Browser by tomevault-io — Agent Skill

Name: Playwright Browser
Author: tomevault-io

Playwright Browser Skill - 浏览器自动化技能

⚡ AI 调用指南（OpenClaw 必读）

如何调用 MCP 工具

当用户请求浏览器操作时，你需要通过 MCP 协议调用相应的工具。以下是调用方法：

基本调用流程

启动浏览器 → 调用 browser_launch
访问网页 → 调用 browser_goto
执行操作 → 调用相应工具（点击、填写、提取等）
关闭浏览器 → 调用 browser_close

常用工具快速参考

用户需求	调用工具	参数示例
"访问网站"	`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" }`

完整示例：访问网页并获取标题

用户："访问 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"]）

🚀 用户使用指南

这是一个强大的浏览器自动化技能，可以帮助你控制浏览器、访问网页、提取内容、截图等。通过 MCP 协议提供 101 个完整的浏览器操作工具。

如何使用这个技能

基本用法： 当你需要访问网页、提取信息或控制浏览器时，直接告诉我你的需求即可。我会自动选择合适的工具来完成任务。

示例对话：

"帮我访问 example.com 并获取页面标题"
"打开百度搜索 'OpenClaw'"
"访问 github.com 并截图"
"帮我从这个网页提取所有链接"
"启动浏览器并访问 https://www.google.com"

主要功能

网页访问 - 访问任何网站，获取页面内容
内容提取 - 提取文本、链接、图片等信息
页面交互 - 点击按钮、填写表单、滚动页面
截图保存 - 对整个页面或特定元素截图
数据抓取 - 批量提取网页数据
自动化测试 - 模拟用户操作，测试网站功能

常见使用场景

场景 1：快速查看网页

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

场景 2：提取信息

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

场景 3：网页截图

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

场景 4：表单填写

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

💡 使用提示

无需指定工具名称 - 直接说你的需求，我会自动选择合适的工具
支持中英文 - 可以用中文或英文描述你的需求
支持复杂任务 - 可以组合多个操作完成复杂任务
自动处理错误 - 如果遇到问题，我会自动重试或调整策略

🔧 工具调用指南（给 OpenClaw 看的）

基本调用流程

步骤 1：启动浏览器

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

步骤 2：访问网页

工具名称: 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. 访问网页

{
  "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": "user@example.com"
  }
}

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：访问网页并提取标题

步骤 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：提取网页数据

步骤 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 释放资源
等待页面加载 - 访问网页后，使用 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": "user@example.com"
}

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": "user@example.com" })
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兼容性指南

Source: 91fapiao-cn/playwright-browser-skill — distributed by TomeVault.

Playwright Browser

File contents

Playwright Browser Skill - 浏览器自动化技能

⚡ AI 调用指南（OpenClaw 必读）

如何调用 MCP 工具

基本调用流程

常用工具快速参考

完整示例：访问网页并获取标题

完整示例：搜索操作

重要提示

🚀 用户使用指南

如何使用这个技能

主要功能

常见使用场景

💡 使用提示

🔧 工具调用指南（给 OpenClaw 看的）

基本调用流程

常用工具快速参考

1. 启动浏览器

2. 访问网页

3. 获取页面标题

4. 获取页面文本

5. 点击元素

6. 填写表单

7. 截图

8. 获取所有链接

9. 等待元素

10. 关闭浏览器

完整任务示例

示例 1：访问网页并提取标题

示例 2：搜索并提取结果

示例 3：提取网页数据

重要提示

📚 技术文档

目录

浏览器管理

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

browser_get_links

browser_get_attribute

browser_get_input_value

browser_is_visible

browser_is_enabled