Browser Automation Skill
Web browser automation using agent-browser with AI-optimized snapshots. Reduces context by 93% using element refs (@e1, @e2) instead of full DOM.
Core Workflow
# 1. Navigate to page
agent-browser open <url>
# 2. Get accessibility tree with element refs
agent-browser snapshot -i # -i = interactive elements only
# 3. Interact using refs from snapshot
agent-browser click @e2
agent-browser fill @e3 "text"
# 4. Re-snapshot after page changes
agent-browser snapshot -i
Quick Reference
Navigation
| Command |
Description |
open <url> |
Navigate to URL |
back |
Go back |
forward |
Go forward |
reload |
Reload page |
close |
Close browser |
Snapshots (AI-Optimized)
| Command |
Description |
snapshot |
Full accessibility tree |
snapshot -i |
Interactive elements only (buttons, links, inputs) |
snapshot -c |
Compact (remove empty elements) |
snapshot -d 3 |
Limit depth to 3 levels |
screenshot [path] |
Capture screenshot (base64 if no path) |
Interaction
| Command |
Description |
click <sel> |
Click element |
fill <sel> <text> |
Clear and fill input |
type <sel> <text> |
Type with key events |
press <key> |
Press key (Enter, Tab, etc.) |
hover <sel> |
Hover element |
select <sel> <val> |
Select dropdown option |
check/uncheck <sel> |
Toggle checkbox |
scroll <dir> [px] |
Scroll page |
Get Info
| Command |
Description |
get text <sel> |
Get text content |
get html <sel> |
Get innerHTML |
get value <sel> |
Get input value |
get attr <sel> <attr> |
Get attribute |
get title |
Get page title |
get url |
Get current URL |
Wait
| Command |
Description |
wait <selector> |
Wait for element |
wait <ms> |
Wait milliseconds |
wait --text "text" |
Wait for text |
wait --url "pattern" |
Wait for URL |
wait --load networkidle |
Wait for load state |
Sessions
| Command |
Description |
--session <name> |
Use isolated session |
session list |
List active sessions |
Selectors
Element Refs (Recommended)
# Get refs from snapshot
agent-browser snapshot -i
# Output: button "Submit" [ref=e2]
# Use ref to interact
agent-browser click @e2
CSS Selectors
agent-browser click "#submit"
agent-browser fill ".email-input" "test@test.com"
Semantic Locators
agent-browser find role button click --name "Submit"
agent-browser find label "Email" fill "test@test.com"
agent-browser find testid "login-btn" click
Examples
Login Flow
agent-browser open https://example.com/login
agent-browser snapshot -i
agent-browser fill @e2 "user@example.com"
agent-browser fill @e3 "password123"
agent-browser click @e4
agent-browser wait --url "**/dashboard"
Form Submission
agent-browser open https://example.com/contact
agent-browser snapshot -i
agent-browser fill @e1 "John Doe"
agent-browser fill @e2 "john@example.com"
agent-browser fill @e3 "Hello, this is my message"
agent-browser click @e4
agent-browser wait --text "Thank you"
Data Extraction
agent-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 (uses same auth)
agent-browser --session scrape state load auth.json
agent-browser --session scrape open https://example.com/data
agent-browser --session scrape snapshot -i
Integration with Claude Flow
MCP Tools
All browser operations are available as MCP tools with browser/ prefix:
-
browser/open
-
browser/snapshot
-
browser/click
-
browser/fill
-
browser/screenshot
- etc.
Memory Integration
# Store successful patterns
npx @claude-flow/cli memory store --namespace browser-patterns --key "login-flow" --value "snapshot->fill->click->wait"
# Retrieve before similar task
npx @claude-flow/cli memory search --query "login automation"
Hooks
# Pre-browse hook (get context)
npx @claude-flow/cli hooks pre-edit --file "browser-task.ts"
# Post-browse hook (record success)
npx @claude-flow/cli hooks post-task --task-id "browse-1" --success true
Tips
-
Always use snapshots - They're optimized for AI with refs
-
Prefer
-i flag - Gets only interactive elements, smaller output
-
Use refs, not selectors - More reliable, deterministic
-
Re-snapshot after navigation - Page state changes
-
Use sessions for parallel work - Each session is isolated
