mcpField
A
agent-browser

agent-browser

github.com/countbot-aiAgent 工作流78337 次安装3 天前更新
代码仓库

关于 agent-browser

使用 agent-browser 进行浏览器自动化的技能,适用于需要操作网页、提交表单或提取内容的 Agent。它以页面快照和元素引用组织交互,并支持会话持久化及并行会话。

主要功能

  1. 01导航并获取交互元素快照
  2. 02点击、填写和选择页面元素
  3. 03保存并恢复浏览器会话状态
  4. 04并行管理多个会话
  5. 05提取文本并输出 JSON

适用场景

  1. 01自动填写并提交网页表单
  2. 02登录后保存状态以供后续使用
  3. 03从网页提取文本或结构化结果
  4. 04并行操作多个网站会话

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/countbot-ai/countbot --skill agent-browser

安装后在 Claude Code 中输入/agent-browser确认已加载。

包含的文件

除 SKILL.md 外,安装时一起下载的参考资料和脚本。

安装与配置手册.md
references/
authentication.md
commands.md
proxy-support.md
session-management.md
snapshot-refs.md
video-recording.md
templates/
authenticated-session.sh
capture-workflow.sh
form-automation.sh

详细介绍

使用 agent-browser 进行浏览器自动化

核心工作流

每次浏览器自动化都遵循以下模式:

  1. 导航:agent-browser open <url>
  2. 快照:agent-browser snapshot -i(获取 @e1、@e2 等元素引用)
  3. 交互:使用引用进行点击、填写和选择
  4. 重新获取快照:导航或 DOM 发生变化后,获取新的引用
agent-browser open https://example.com/form
agent-browser snapshot -i
# Output: @e1 [input type="email"], @e2 [input type="password"], @e3 [button] "Submit"

agent-browser fill @e1 "[email protected]"
agent-browser fill @e2 "password123"
agent-browser click @e3
agent-browser wait --load networkidle
agent-browser snapshot -i  # Check result

基本命令

# Navigation
agent-browser open <url>              # Navigate (aliases: goto, navigate)
agent-browser close                   # Close browser

# Snapshot
agent-browser snapshot -i             # Interactive elements with refs (recommended)
agent-browser snapshot -i -C          # Include cursor-interactive elements (divs with onclick, cursor:pointer)
agent-browser snapshot -s "#selector" # Scope to CSS selector

# Interaction (use @refs from snapshot)
agent-browser click @e1               # Click element
agent-browser fill @e2 "text"         # Clear and type text
agent-browser type @e2 "text"         # Type without clearing
agent-browser select @e1 "option"     # Select dropdown option
agent-browser check @e1               # Check checkbox
agent-browser press Enter             # Press key
agent-browser scroll down 500         # Scroll page

# Get information
agent-browser get text @e1            # Get element text
agent-browser get url                 # Get current URL
agent-browser get title               # Get page title

# Wait
agent-browser wait @e1                # Wait for element
agent-browser wait --load networkidle # Wait for network idle
agent-browser wait --url "**/page"    # Wait for URL pattern
agent-browser wait 2000               # Wait milliseconds

# Capture
agent-browser screenshot              # Screenshot to temp dir
agent-browser screenshot --full       # Full page screenshot
agent-browser pdf output.pdf          # Save as PDF

常见模式

提交表单
agent-browser open https://example.com/signup
agent-browser snapshot -i
agent-browser fill @e1 "Jane Doe"
agent-browser fill @e2 "[email protected]"
agent-browser select @e3 "California"
agent-browser check @e4
agent-browser click @e5
agent-browser wait --load networkidle
使用状态持久化进行身份验证
# Login once and save state
agent-browser open https://app.example.com/login
agent-browser snapshot -i
agent-browser fill @e1 "$USERNAME"
agent-browser fill @e2 "$PASSWORD"
agent-browser click @e3
agent-browser wait --url "**/dashboard"
agent-browser state save auth.json

# Reuse in future sessions
agent-browser state load auth.json
agent-browser open https://app.example.com/dashboard
会话持久化
# Auto-save/restore cookies and localStorage across browser restarts
agent-browser --session-name myapp open https://app.example.com/login
# ... login flow ...
agent-browser close  # State auto-saved to ~/.agent-browser/sessions/

# Next time, state is auto-loaded
agent-browser --session-name myapp open https://app.example.com/dashboard

# Encrypt state at rest
export AGENT_BROWSER_ENCRYPTION_KEY=$(openssl rand -hex 32)
agent-browser --session-name secure open https://app.example.com

# Manage saved states
agent-browser state list
agent-browser state show myapp-default.json
agent-browser state clear myapp
agent-browser state clean --older-than 7
数据提取
agent-browser open https://example.com/products
agent-browser snapshot -i
agent-browser get text @e5           # Get specific element text
agent-browser get text body > page.txt  # Get all page text

# JSON output for parsing
agent-browser snapshot -i --json
agent-browser get text @e1 --json
并行会话
agent-browser --session site1 open https://site-a.com
agent-browser --session site2 open https://site-b.com

agent-browser --session site1 snapshot -i
agent-browser --session site2 snapshot -i

agent-browser session list
连接到现有的 Chrome
# Auto-discover running Chrome with remote debugging enabled
agent-browser --auto-connect open https://example.com
agent-browser --auto-connect snapshot

# Or with explicit CDP port
agent-browser --cdp 9222 snapshot
可视化浏览器(调试)
agent-browser --headed open https://example.com
agent-browser highlight @e1          # Highlight element
agent-browser record start demo.webm # Record session
本地文件(PDF、HTML)
# Open local files with file:// URLs
agent-browser --allow-file-access open file:///path/to/document.pdf
agent-browser --allow-file-access open file:///path/to/page.html
agent-browser screenshot output.png
iOS 模拟器(移动版 Safari)
# List available iOS simulators
agent-browser device list

# Launch Safari on a specific device
agent-browser -p ios --device "iPhone 16 Pro" open https://example.com

# Same workflow as desktop - snapshot, interact, re-snapshot
agent-browser -p ios snapshot -i
agent-browser -p ios tap @e1          # Tap (alias for click)
agent-browser -p ios fill @e2 "text"
agent-browser -p ios swipe up         # Mobile-specific gesture

# Take screenshot
agent-browser -p ios screenshot mobile.png

# Close session (shuts down simulator)
agent-browser -p ios close

**要求:**运行 macOS 和 Xcode,并安装 Appium(npm install -g appium && appium driver install xcuitest)

**真实设备:**预先配置后即可使用实体 iOS 设备。使用 --device "<UDID>",其中 UDID 可通过 xcrun xctrace list devices 获取。

超时和加载缓慢的页面

本地浏览器的默认 Playwright 超时时间为 60 秒。对于加载缓慢的网站或较大的页面,请使用显式等待,而不要依赖默认超时:

# Wait for network activity to settle (best for slow pages)
agent-browser wait --load networkidle

# Wait for a specific element to appear
agent-browser wait "#content"
agent-browser wait @e1

# Wait for a specific URL pattern (useful after redirects)
agent-browser wait --url "**/dashboard"

# Wait for a JavaScript condition
agent-browser wait --fn "document.readyState === 'complete'"

# Wait a fixed duration (milliseconds) as a last resort
agent-browser wait 5000

对于持续加载缓慢的网站,在 open 后使用 wait --load networkidle,确保页面完全加载后再获取快照。如果某个特定元素渲染缓慢,请直接等待该元素:使用 wait <selector> 或 wait @ref。

会话管理和清理

同时运行多个 Agent 或自动化任务时,务必使用命名会话以避免冲突:

# Each agent gets its own isolated session
agent-browser --session agent1 open site-a.com
agent-browser --session agent2 open site-b.com

# Check active sessions
agent-browser session list

完成后务必关闭浏览器会话,以免留下未清理的进程:

agent-browser close                    # Close default session
agent-browser --session agent1 close   # Close specific session

如果之前的会话未正确关闭,守护进程可能仍在运行。开始新任务前,使用 agent-browser close 清理它。

引用生命周期(重要)

页面发生变化时,引用(@e1、@e2 等)会失效。以下操作后务必重新获取快照:

  • 点击会导致页面跳转的链接或按钮
  • 提交表单
  • 动态内容加载(下拉菜单、模态框)
agent-browser click @e5              # Navigates to new page
agent-browser snapshot -i            # MUST re-snapshot
agent-browser click @e1              # Use new refs

语义定位器(替代引用)

引用不可用或不可靠时,请使用语义定位器:

agent-browser find text "Sign In" click
agent-browser find label "Email" fill "[email protected]"
agent-browser find role button click --name "Submit"
agent-browser find placeholder "Search" type "query"
agent-browser find testid "submit-btn" click

JavaScript 求值(eval)

使用 eval 在浏览器上下文中运行 JavaScript。Shell 引号可能会破坏复杂表达式——使用 --stdin 或 -b 避免此问题。

# Simple expressions work with regular quoting
agent-browser eval 'document.title'
agent-browser eval 'document.querySelectorAll("img").length'

# Complex JS: use --stdin with heredoc (RECOMMENDED)
agent-browser eval --stdin <<'EVALEOF'
JSON.stringify(
  Array.from(document.querySelectorAll("img"))
    .filter(i => !i.alt)
    .map(i => ({ src: i.src.split("/").pop(), width: i.width }))
)
EVALEOF

# Alternative: base64 encoding (avoids all shell escaping issues)
agent-browser eval -b "$(echo -n 'Array.from(document.querySelectorAll("a")).map(a => a.href)' | base64)"

**为何重要:**Shell 处理命令时,内部双引号、! 字符(历史展开)、反引号和 $() 都可能破坏 JavaScript,使其无法正确传递给 agent-browser。--stdin 和 -b 标志可完全绕过 Shell 解析。

经验法则:

  • 单行且无嵌套引号 → 使用单引号的常规 eval 'expression' 即可
  • 有嵌套引号、箭头函数、模板字面量或多行内容 → 使用 eval --stdin <<'EVALEOF'
  • 以编程方式生成的脚本 → 使用 eval -b 并搭配 base64

深入文档

参考文档使用场景
references/commands.md完整命令参考及所有选项
references/snapshot-refs.md引用生命周期、失效规则和故障排除
references/session-management.md并行会话、状态持久化和并发抓取
references/authentication.md登录流程、OAuth、双重身份验证处理和状态复用
references/video-recording.md用于调试和文档编写的录制工作流
references/proxy-support.md代理配置、地理位置测试和轮换代理

即用模板

模板描述
templates/form-automation.sh带验证的表单填写
templates/authenticated-session.sh登录一次,重复使用状态
templates/capture-workflow.sh提取内容并截图
./templates/form-automation.sh https://example.com/form
./templates/authenticated-session.sh https://app.example.com/login
./templates/capture-workflow.sh https://example.com ./output

评论

支持 Markdown