mcpField
A
agent-browser

agent-browser

github.com/shanraisshanAgent 工作流68.3k372 次安装1 天前更新
代码仓库

关于 agent-browser

通过 agent-browser 命令行操作网页的浏览器自动化 Skill，涵盖导航、页面快照、交互、会话状态、数据提取及 iOS 模拟器流程。

主要功能

  1. 01导航并检查网页
  2. 02使用元素引用进行交互
  3. 03使用语义定位器
  4. 04保存并复用会话状态
  5. 05提取文本和 JSON
  6. 06运行并行会话

适用场景

  1. 01填写并提交网页表单
  2. 02复用已认证的浏览器状态
  3. 03提取网页文本以供分析
  4. 04在 iOS 模拟器中测试移动版 Safari

安装

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

$npx skills add https://github.com/shanraisshan/claude-code-best-practice --skill agent-browser

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

详细介绍

使用 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
数据提取
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
可视化浏览器（调试）
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。

引用的生命周期（重要）

页面发生变化时，引用（@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

深入文档

参考资料使用时机
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