browser_action
browser_action
工具通过Puppeteer控制的浏览器实现网页自动化交互。它允许Roo启动浏览器、导航到网站、点击元素、输入文本以及滚动页面,并通过截图提供视觉反馈。
参数
该工具接受以下参数:
action
(必需): 要执行的操作:launch
: 在URL启动新的浏览器会话click
: 在特定x,y坐标点击type
: 通过键盘输入文本scroll_down
: 向下滚动一个页面高度scroll_up
: 向上滚动一个页面高度close
: 结束浏览器会话
url
(可选): 使用launch
操作时要导航到的URLcoordinate
(可选):click
操作的x,y坐标(如"450,300")text
(可选): 使用type
操作时要输入的文本
功能说明
该工具创建一个自动化浏览器会话,Roo可以控制它来导航网站、与元素交互以及执行需要浏览器自动化的任务。每个操作都会提供当前状态的截图,实现流程的视觉验证。
使用场景
- 当Roo需要与Web应用程序或网站交互时
- 测试用户界面或网页功能时
- 捕获网页截图时
- 可视化演示网页工作流程时
主要特性
- 每个操作后提供带截图的视觉反馈并捕获控制台日志
- 支持从启动到页面交互再到关闭的完整工作流程
- 通过坐标、键盘输入和滚动实现精确交互
- 通过智能页面加载检测保持一致的浏览器会话
- 两种操作模式:本地(隔离的Puppeteer实例)或远程(连接现有Chrome)
- 通过自动会话清理和详细消息优雅处理错误
- 支持多种格式和质量设置的视觉输出优化
- 通过位置指示器和操作历史跟踪交互状态
浏览器模式
该工具提供两种不同的操作模式:
本地浏览器模式(默认)
- 通过Puppeteer下载并管理本地Chromium实例
- 每次启动都创建全新的浏览器环境
- 无法访问现有用户配置文件、cookie或扩展
- 在沙盒环境中保持一致、可预测的行为
- 会话结束时完全关闭浏览器
远程浏览器模式
- 连接到已启用远程调试的现有Chrome/Chromium实例
- 可以访问现有浏览器状态、cookie和可能的扩展
- 重用现有浏览器进程,启动更快
- 支持连接到Docker容器或远程机器上的浏览器
- 会话结束时仅断开连接(不关闭浏览器)
- 要求Chrome运行时开放远程调试端口(通常为9222端口)
限制
- 浏览器活动期间只能使用
browser_action
工具 - 浏览器坐标是相对于视口的,不是相对于页面的
- 点击操作必须针对视口内的可见元素
- 在使用其他工具前必须显式关闭浏览器会话
- 浏览器窗口有可配置的尺寸(默认为900x600)
- 不能直接与浏览器开发者工具交互
- 浏览器会话是临时的,Roo重启后不会持久化
- 仅适用于Chrome/Chromium浏览器,不支持Firefox或Safari
- 本地模式无法访问现有cookie;远程模式需要启用调试的Chrome
工作原理
当调用browser_action
工具时,它遵循以下流程:
-
操作验证和浏览器管理:
- 验证请求操作所需的参数
- 对于
launch
: 初始化浏览器会话(本地Puppeteer实例或远程Chrome) - 对于交互操作: 使用现有浏览器会话
- 对于
close
: 适当地终止或断开与浏览器的连接
-
页面交互和稳定性:
- 通过
waitTillHTMLStable
算法使用DOM稳定性检测确保页面完全加载 - 在适当的时间执行请求的操作(导航、点击、输入、滚动)
- 点击后监控网络活动并在必要时等待导航
- 通过
-
视觉反馈:
- 使用WebP格式(带PNG回退)捕获优化后的截图
- 记录浏览器控制台日志用于调试
- 跟踪鼠标位置并维护操作的分页历史
-
会话管理:
- 跨多个操作维护浏览器状态
- 处理错误并自动清理资源
- 强制执行正确的工作流程顺序(启动→交互→关闭)
工作流程顺序
浏览器交互必须遵循以下特定顺序:
- 会话初始化: 所有浏览器工作流程必须以
launch
操作开始 - 交互阶段: 可以执行多个
click
、type
和滚动操作 - 会话终止: 所有浏览器工作流程必须以
close
操作结束 - 工具切换: 关闭浏览器后,可以使用其他工具
使用示例
- 创建网页表单提交流程时,Roo启动浏览器,导航到表单,使用
type
操作填写字段,并点击提交。 - 测试响应式网站时,Roo导航到网站并使用滚动操作检查不同部分。
- 捕获Web应用程序截图时,Roo在不同页面间导航并在每个步骤截图。
- 演示电子商务结账流程时,Roo模拟从产品选择到支付确认的整个过程。
用法示例
启动浏览器并导航到网站:
<browser_action>
<action>launch</action>
<url>https://example.com</url>
</browser_action>
在特定坐标点击(如按钮):
<browser_action>
<action>click</action>
<coordinate>450,300</coordinate>
</browser_action>
在聚焦的输入字段中输入文本:
<browser_action>
<action>type</action>
<text>Hello, World!</text>
</browser_action>
向下滚动查看更多内容:
<browser_action>
<action>scroll_down</action>
</browser_action>
关闭浏览器会话:
<browser_action>
<action>close</action>
</browser_action>