ag-agent-browser

Files (35)

• SKILL.md
• agent-browser-vs-chrome-devtools.md · references/
• browserbase-cloud-setup.md · references/
• cdp-domains.md · references/
• performance-guide.md · references/
• puppeteer-reference.md · references/
• .gitignore · scripts/
• README.md · scripts/
• error-handling.test.js · scripts/__tests__/
• selector.test.js · scripts/__tests__/
• aria-snapshot.js · scripts/
• attach-listener.js · scripts/
• click.js · scripts/
• connect-chrome.js · scripts/
• console.js · scripts/
• evaluate.js · scripts/
• fill.js · scripts/
• import-cookies.js · scripts/
• inject-auth.js · scripts/
• inspect-chat-page.js · scripts/
• install-deps.sh · scripts/
• install.sh · scripts/
• browser.js · scripts/lib/
• selector.js · scripts/lib/
• navigate.js · scripts/
• network.js · scripts/
• package-lock.json · scripts/
• package.json · scripts/
• performance.js · scripts/
• reload-and-listen.js · scripts/
• screenshot.js · scripts/
• select-ref.js · scripts/
• snapshot.js · scripts/
• ws-debug.js · scripts/
• ws-full-debug.js · scripts/

SKILL.md (first lines)

# agent-browser Skill

Browser automation CLI designed for AI agents. Uses "snapshot + refs" paradigm for 93% less context than Playwright MCP.

## How to Use

### Quick Start

```bash
# Install globally
npm install -g agent-browser

# Download Chromium (one-time)
agent-browser install

# Linux: include system deps
agent-browser install --with-deps

# Verify
agent-browser --version
```

## Core Workflow

The 4-step pattern for all browser automation:

```bash
# 1. Navigate
agent-browser open https://example.com

# 2. Snapshot (get interactive elements with refs)
agent-browser snapshot -i
# Output: button "Sign In" @e1, textbox "Email" @e2, ...

# 3. Interact using refs
agent-browser fill @e2 "user@example.com"
agent-browser click @e1

# 4. Re-snapshot after page changes
agent-browser snapshot -i
```

## Project-Specific Setup

For project-specific connection patterns, logged-in session reuse through `chrome-debug`, and when to use `agent-browser` vs `chrome-devtools` vs direct non-browser verification, see the project's browser-automation testing notes in the consuming repo, if present. This skill file stays a generic tool reference only and should not redefine the project's broader testing policy.

---

## When to Apply

| Use agent-browser             | Use chrome-devtools             |
| ----------------------------- | ------------------------------- |
| Long autonomous AI sessions   | Quick one-off screenshots       |
| Context-constrained workflows | Custom Puppeteer scripts needed |
| Video recording for debugging | WebSocket full frame debugging  |
| Cloud browsers (Browserbase)  | Existing workflow integration   |
| Multi-tab handling            | Need Sharp auto-compression     |
| Self-verifying build loops    | Session with auth injection     |

**Token efficiency:** ~280 chars/snapshot vs 8K+ for Playwright MCP.

## Command Reference

### Navigation

```bash
agent-browser open <url>       # Navigate to URL
agent-browser back             # Go back
agent-browser forward          # Go forward
agent-browser reload           # Reload page
agent-browser close            # Close browser
```

### Analysis (Snapshot)

```bash
agent-browser snapshot         # Full accessibility tree
agent-browser snapshot -i      # Interactive elements only (recommended)
agent-browser snapshot -c      # Compact output
agent-browser snapshot -d 3    # Limit depth
agent-browser snapshot -s "nav" # Scope to CSS selector
```

### Interactions (use @refs from snapshot)

```bash
agent-browser click @e1        # Click element
agent-browser dblclick @e1     # Double-click
agent-browser fill @e2 "text"  # Clear and fill input
agent-browser type @e2 "text"  # Type without clearing
agent-browser press Enter      # Press key
agent-browser hover @e1        # Hover over element
agent-browser check @e3        # Check checkbox
agent-browser uncheck @e3      # Uncheck checkbox
agent-browser select @e4 "opt" # Select dropdown option
agent-browser scroll @e1       # Scroll element into view
agent-browser scroll down 500  # Scroll page by pixels
agent-browser drag @e1 @e2     # Drag from e1 to e2
agent-browser upload @e5 file.pdf  # Upload file
```

### Information Retrieval

```bash
agent-browser get text @e1     # Get text content
agent-browser get html @e1     # Get HTML
agent-browser get value @e2    # Get input value
agent-browser get attr @e1 href  # Get attribute
agent-browser get title        # Page title
agent-browser get url          # Current URL
agent-browser get count "li"   # Count elements
agent-browser get box @e1      # Bounding box
```

### State Checks

```bash
agent-browser is visible @e1   # Check visibility
agent-browser is enabled @e1   # Check if enabled

From ngxccc/agent-skills-kit, MIT.

More from ngxccc/agent-skills-kit