playwright-browser

仓库: 91fapiao-cn/playwright-browser-skill
安装量: 45
排名: #16376

安装

npx skills add https://github.com/91fapiao-cn/playwright-browser-skill --skill playwright-browser
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
参数:
步骤 2: browser_goto
参数:
步骤 3: browser_get_title
参数: {}
步骤 4: browser_close
参数: {}
示例 2：搜索并提取结果
步骤 1: browser_launch
参数:
步骤 2: browser_goto
参数:
步骤 3: browser_fill
参数:
步骤 4: browser_click
参数:
步骤 5: browser_wait_for_selector
参数:
步骤 6: browser_get_text
参数:
步骤 7: browser_close
参数: {}
示例 3：提取网页数据
步骤 1: browser_launch
参数: {}
步骤 2: browser_goto
参数:
步骤 3: browser_wait_for_selector
参数:
步骤 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兼容性指南
← 返回排行榜