
ruflo 浏览器自动化 Skill用 agent-browser 与 AI 优化快照驱动 Agent 网页操作【免费下载链接】ruflo The original agent meta-harness. Deploy intelligent multi-player swarms, coordinate autonomous workflows, and build conversational AI systems. Features adaptive memory, self-learning intelligence, RAG integration, and native Claude Code / Codex / Hermes and many more Integrated项目地址: https://gitcode.com/GitHub_Trending/cl/ruflo本指南围绕 ruflo 仓库中的.claude/skills/browser/SKILL.md浏览器自动化技能展开讲解如何在 Claude Code / Claude Flow 类 Agent 与多智能体系统中使用agent-browser完成网页导航、表单填写、数据抓取与会话复用。读完本文你将掌握打开页面 → 抓取带元素引用的可访问性快照 → 基于引用交互 → 再次快照的完整闭环理解 MCP 工具层与记忆/钩子集成方式并能在多会话Swarm场景中隔离并行工作。Skill 是什么AI 为第一用户设计的浏览器操作层browser技能位于 .claude/skills/browser/SKILL.md它的核心设计目标不是给人一个浏览器控制台而是给 LLM/Agent 一个低上下文消耗、高确定性的网页操作协议。技能 frontmatter 声明如下name: browser description: Web browser automation with AI-optimized snapshots for claude-flow agents version: 1.0.0 triggers: - /browser - browse - web automation - scrape - navigate - screenshot tools: - browser/open - browser/snapshot - browser/click - browser/fill - browser/screenshot - browser/closefrontmatter 中的triggers定义了 Agent 路由到该技能的语义触发词browse、web automation、scrape、navigate、screenshottools列表则声明了技能对外暴露的 MCP 工具白名单。核心机制一句话概括用元素引用element refs如e1、e2替代完整 DOM 输出将每次页面感知所需的上下文压缩约 93%该数字来自 SKILL.md 的原文声明让长流程 Agent 把 token 预算花在推理而非解析 HTML 上。该技能在仓库中存在两份同构副本除根级.claude/skills/browser/SKILL.md外claude-flow/browser包内还维护一份 v3/claude-flow/browser/skills/browser/SKILL.md后者随 npm 包分发供作为依赖安装到宿主项目的场景使用。核心工作流快照驱动的感知—行动循环agent-browser的使用不遵循先写好选择器脚本再执行的传统自动化思路而是采用每步先快照感知、再基于引用行动的交互循环# 1. 导航到目标页面 agent-browser open url # 2. 抓取带元素引用的可访问性树accessibility tree agent-browser snapshot -i # -i 仅交互元素interactive elements # 3. 用快照返回的引用进行交互 agent-browser click e2 agent-browser fill e3 text # 4. 页面发生变化后重新快照进入下一轮感知 agent-browser snapshot -i为什么 Agent 必须每次页面变化后都重新快照因为可访问性树中eN引用编号是基于当前页面状态动态生成的点击触发路由跳转、表单提交触发局部渲染后元素编号会整体位移。若沿用旧引用click e2可能命中的已不是上一个页面中的那个按钮。因此该工作流刻意把重新快照固化为第四步形成感知snapshot→ 决策 → 行动click/fill→ 再感知的稳定闭环这与 Playwright 等传统库一次性写全流程的范式有本质区别。源码印证适配器如何执行每条命令在claude-flow/browser包中每条agent-browserCLI 命令都被封装为 TypeScript 方法。以 v3/claude-flow/browser/src/infrastructure/agent-browser-adapter.ts 为例所有命令统一经由exec()方法执行第 56-102 行该方法会拼装公共参数再同步调起agent-browser二进制const fullArgs [ --session, this.session, ...(this.timeout ? [--timeout, String(this.timeout)] : []), ...(!this.headless ? [--headed] : []), ...(this.executablePath ? [--executable-path, this.executablePath] : []), ...(this.proxy ? [--proxy-server, this.proxy] : []), ...(jsonOutput ? [--json] : []), ...args, ];从构造器选项第 23-31 行可以看出通过AgentBrowserAdapter可以做更精细的运行控制默认session为default默认timeout为 30000ms默认headless为 true同时支持指定浏览器可执行路径、代理服务器、视口尺寸与 debug 日志开关。这套参数说明SKILL.md 中展示的 CLI 语法只是冰山一角其底层还具备会话隔离 超时兜底 JSON 结构化输出的工程化能力适配器解析失败时不会崩溃而是返回带success: false与错误信息的ActionResult这正是它可安全接入 Agent 工具层的原因。快速参考常用命令速查表SKILL.md 将agent-browser的命令按用途整理为六组速查表以下完整保留并补充说明。导航NavigationCommandDescriptionopen urlNavigate to URLbackGo backforwardGo forwardreloadReload pagecloseClose browserAI 优化的快照SnapshotsCommandDescriptionsnapshotFull accessibility tree完整可访问性树snapshot -iInteractive elements only仅按钮、链接、输入框等交互元素snapshot -cCompact移除空元素进一步压缩输出snapshot -d 3Limit depth to 3 levels限制树深度为 3 层screenshot [path]Capture screenshot不传路径时输出 base64快照是全技能的基石-i只保留 Agent 真正可能操作的交互元素以缩小上下文-c剔除空壳节点-d N对深层级页面做截断三者可组合使用。在源码层快照方法 还额外支持-s selector参数SnapshotOptions.selector即可只快照页面中某个选择器子树的交互状态——当页面主体是长列表或复杂表格时这一能力能让每轮感知开销进一步收敛。交互InteractionCommandDescriptionclick selClick elementfill sel textClear and fill input先清空再填入type sel textType with key events逐键触发键盘事件press keyPress keyEnter、Tab 等hover selHover elementselect sel valSelect dropdown optioncheck/uncheck selToggle checkboxscroll dir [px]Scroll page注意fill与type的语义差异fill是清空后一次性赋值适合登录框、搜索框这类对速度敏感的场景type逐键触发事件能驱动依赖键盘事件的富文本编辑器或前端框架的受控组件。源码中的 fill / type 封装 也印证了这点——fill仅接收目标与值而type额外支持--delay控制键击间隔。读取信息Get InfoCommandDescriptionget text selGet text contentget html selGet innerHTMLget value selGet input valueget attr sel attrGet attributeget titleGet page titleget urlGet current URL数据抽取类任务主要依赖这一组命令。源码适配器在此基础上还提供了get count sel统计匹配元素数与get box sel获取元素坐标与尺寸两个补充读取原语可用于列表元素计数与坐标级断言。等待WaitCommandDescriptionwait selectorWait for element等待元素出现wait msWait milliseconds固定等待毫秒数wait --text textWait for textwait --url patternWait for URL支持 glob 模式wait --load networkidleWait for load state页面加载状态wait是让自动化从盲目 sleep升级为条件等待的关键建议优先使用--url **/dashboard、--text Thank you这类语义条件等待登录跳转或表单提交完成而不是拍脑袋固定 sleep——前者在慢网络下依然正确后者则要么白白等待、要么过早断言失败。在适配器源码中还可见--load可选load/domcontentloaded/networkidle三种取值以及--fn script允许等待一段在页面中求值为 true 的自定义函数见 wait 系列方法。会话SessionsCommandDescription--session nameUse isolated session使用隔离会话session listList active sessions会话机制让多个浏览器上下文相互隔离是后续多 Agent 并行工作的前提会话状态Cookie、登录态可通过state save/state load持久化并在会话间迁移。选择器体系三种定位页面元素的方式SKILL.md 给出了三层递进的选择器策略按可靠性从高到低排列1. 元素引用Element Refs推荐# 从快照拿到引用 agent-browser snapshot -i # Output: button Submit [refe2] # 用引用交互 agent-browser click e2元素引用是快照协议直接吐出的稳定句柄Agent 无需理解 CSS 或 DOM 结构即可操作页面。它的价值在于确定性只要快照时元素存在eN就能精确命中规避了类名混淆、选择器歧义等经典问题。2. CSS 选择器CSS Selectorsagent-browser click #submit agent-browser fill .email-input testtest.com当引用编号因页面动态变化不可靠、或需要直接表达这个 id/class 的元素时退回标准 CSS 语法。3. 语义定位器Semantic Locatorsagent-browser find role button click --name Submit agent-browser find label Email fill testtest.com agent-browser find testid login-btn clickfind系列通过元素语义而非结构定位roleARIA 角色 --name可访问名、label表单标签关联、testiddata-testid属性都是意图化表达对前端框架重渲染Vue/React 虚拟 DOM 变化导致 CSS 类名漂移不敏感。从适配器源码看find 方法族 还支持find text、find placeholder、find first/last/nth等变体覆盖按文本查找、按占位符填充、取第 N 个匹配等高频诉求语法统一为find 维度 值 动作 [参数]。实战示例四类典型任务登录流程Login Flowagent-browser open https://example.com/login agent-browser snapshot -i agent-browser fill e2 userexample.com agent-browser fill e3 password123 agent-browser click e4 agent-browser wait --url **/dashboard要点先snapshot -i获取输入框与按钮的真实引用不要假设它们固定是e1/e2提交后用wait --url等待跳转落地而不是 sleep 后直接断言页面内容。表单提交Form Submissionagent-browser open https://example.com/contact agent-browser snapshot -i agent-browser fill e1 John Doe agent-browser fill e2 johnexample.com agent-browser fill e3 Hello, this is my message agent-browser click e4 agent-browser wait --text Thank you多字段表单按快照引用逐个填充提交后以页面出现Thank you成功文案作为完成信号。数据抽取Data Extractionagent-browser open https://example.com/products agent-browser snapshot -i # Iterate through product refs agent-browser get text e1 # Product name agent-browser get text e2 # Price agent-browser get attr e3 href # Link抽取任务遵循快照一次、批量读取的模式先拿整页引用再对每个商品节点依次读取文本与属性。真实采集场景中应在每次读取后判断引用是否因懒加载失效必要时重新快照。多会话并行Multi-Session / Swarm# Session 1: Navigator导航会话负责登录 agent-browser --session nav open https://example.com agent-browser --session nav state save auth.json # Session 2: Scraper抓取会话复用同一份登录态 agent-browser --session scrape state load auth.json agent-browser --session scrape open https://example.com/data agent-browser --session scrape snapshot -i这套编排是 Swarm 模式的基础模板nav会话完成需要人类验证码、短信等复杂认证后把登录态保存为auth.jsonscrape以及其他任意数量的工作会话加载同一状态即可免登录并行抓取。每个--session独立成上下文互不污染。与 Agent 体系的集成MCP 工具、记忆与钩子该技能文档属于 Claude Code / Claude Flow 生态因此专门说明了如何把 CLI 能力接入 Agent 运行时。MCP 工具层所有浏览器操作都以browser/前缀暴露为 MCP 工具与 frontmattertools声明一致核心子集包括browser/openbrowser/snapshotbrowser/clickbrowser/fillbrowser/screenshotbrowser/close在仓库实现中claude-flow/browser包的导出清单包含./mcp-tools与./agent两个子模块见 v3/claude-flow/browser/package.jsonMCP 工具的组装与注册位于 v3/claude-flow/browser/src/mcp-tools/browser-tools.tsAgent 可编程接入则走 v3/claude-flow/browser/src/agent/index.ts。由于适配器统一追加--json并以结构化结果返回Agent 解析工具输出时无需再处理非结构化文本。记忆集成# 沉淀成功模式 npx claude-flow/cli memory store --namespace browser-patterns --key login-flow --value snapshot-fill-click-wait # 相似任务开始前检索 npx claude-flow/cli memory search --query login automation把针对某类站点的成功操作序列如snapshot-fill-click-wait以命名空间 键值形式写入跨会话记忆下次遇到相似任务时先检索再执行形成可复用的自动化经验库——这解决了纯脚本方案每次从零编写流程的重复劳动问题。钩子集成# 浏览前钩子获取上下文 npx claude-flow/cli hooks pre-edit --file browser-task.ts # 浏览后钩子记录成功 npx claude-flow/cli hooks post-task --task-id browse-1 --success true将浏览器操作编入 Agent 的 pre/post 钩子链路使每次浏览的成败、产物都能进入任务闭环支撑后续的审计与模式蒸馏。从 Skill 到会话级认知容器ruflo-browser 插件的纵深扩展在 ruflo 的插件生态中browserSkill 的交互协议被进一步封装为会话即技能的工程体系。插件 plugins/ruflo-browser/README.md 说明每一次浏览器会话都被采集为一级 RVF可验证流认知容器目录结构形如rvf-id/ ├── manifest.yaml # URL、viewport、profile、runner、lineage ├── trajectory.ndjson # 每个动作一行经 ruvector hooks 记录 ├── screenshots/step.png ├── snapshots/step.json # 按导航切分的可访问性树 ├── dom/ # 可选--with-dom 时启用 ├── cookies.json # 经 AIDefence 消毒 └── findings.md # 测试结论、抓取产物、注入隔离记录会话结束后可用rvf ingest重新打开、rvf derive派生、rvf export联邦共享。围绕会话生命周期插件将 SKILL.md 中的原语组合成 8 个专项技能browser-record、browser-replay、browser-extract、browser-login、browser-form-fill、browser-screenshot-diff、browser-auth-flow、browser-test并新增 5 个browser_session_*生命周期 MCP 工具browser_session_record/end/replay、browser_template_apply、browser_cookie_use。安全侧同样与浏览器场景强耦合被抓取文本写入 AgentDB 前需通过aidefence_has_pii扫描Cookie 经aidefence_scan消毒后以不透明句柄入库返回给 LLM 的页面文本需通过aidefence_is_safe的提示注入检测——命中项隔离到findings.md。这与 SKILL.md 面向的裸抓取形成了从可用到可信的完整梯度也解释了为何根级技能刻意保持轻量CLI 原语保持纯粹安全与持久化交给外围编排层。使用建议与注意事项SKILL.md 在结尾给出五条实践准则同样是落地时的最佳默认值Always use snapshots— 快照是专为 AI 优化过的感知通道带元素引用远比直接读 DOM 省 token、更可靠Prefer-iflag— 只取交互元素输出更小、噪声更低是绝大多数场景的正确默认Use refs, not selectors— 引用比手写 CSS/语义选择器更确定、可复现Re-snapshot after navigation— 页面状态变化后引用编号会失效务必重新感知Use sessions for parallel work— 每个会话相互隔离是并发抓取与多 Agent 协作的基石。深入阅读技能本体.claude/skills/browser/SKILL.md随包分发副本v3/claude-flow/browser/skills/browser/SKILL.md命令底层实现会话/超时/代理/JSON 参数拼装v3/claude-flow/browser/src/infrastructure/agent-browser-adapter.tsMCP 工具注册v3/claude-flow/browser/src/mcp-tools/browser-tools.ts依赖与安装后置脚本自动安装agent-browserlatestv3/claude-flow/browser/package.json适配器单测命令参数、返回值结构的可验证证据v3/claude-flow/browser/tests/agent-browser-adapter.test.ts会话级 RVF 容器与 23 个浏览器 MCP 工具的插件化扩展plugins/ruflo-browser/README.md【免费下载链接】ruflo The original agent meta-harness. Deploy intelligent multi-player swarms, coordinate autonomous workflows, and build conversational AI systems. Features adaptive memory, self-learning intelligence, RAG integration, and native Claude Code / Codex / Hermes and many more Integrated项目地址: https://gitcode.com/GitHub_Trending/cl/ruflo创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考