| name | playwright-browser |
| description | 浏览器自动化技能，支持101个工具：页面导航、元素交互、内容提取、截图、网络控制、性能监控等 Use when this capability is needed. |
| metadata | {"author":"91fapiao-cn"} |
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": "Shift" }
browser_keyboard_up
释放键盘按键
参数：
调用示例：
{ "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 - 脚本URLcontent: string - 脚本内容
调用示例：
{
"url": "https://cdn.example.com/library.js"
}
browser_add_style_tag
向页面添加样式标签
参数：
url: string - 样式URLcontent: 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": "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": 50 }
browser_get_response_logs
获取响应日志
参数：
调用示例：
{ "limit": 50 }
browser_get_console_logs
获取控制台日志
参数：
调用示例：
{ "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选择器
#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" })
browser_get_by_role({ "role": "button", "name": "Submit" })
browser_get_by_label({ "text": "Email Address" })
browser_get_by_placeholder({ "text": "Enter your email" })
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是否正确安装
- 浏览器驱动是否已下载
- 选择器是否正确
- 超时时间是否足够
- 网络连接是否正常
更多信息请参考：
Source: 91fapiao-cn/playwright-browser-skill — distributed by TomeVault.
