Tgd Agent Browser

Agent Browser (tGD Integration)

Overview

Fast browser automation CLI for AI agents via CDP. Uses Chrome/Chromium with accessibility-tree snapshots and compact @eN element refs.

⚠️ Target Browser: System Chrome Only

Do not use bundled Chromium. Always use the system-installed Google Chrome.

• macOS: /Applications/Google Chrome.app
• Linux: /usr/bin/google-chrome

Auto-Connect Enabled by Default The setup.sh script automatically configures ~/.agent-browser/config.json with:

{
  "autoConnect": true,
  "executablePath": "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
}

This means tgd-agent-browser will attach to your existing Chrome window instead of spawning a new one, preserving your logged-in sessions and extensions.

Core Workflows

This skill serves as a discovery stub. Before running commands, load the actual workflow content from the CLI:

agent-browser skills get core          # start here — workflows, common patterns
agent-browser skills get core --full   # full command reference and templates

Specialized Skills

For tasks outside standard browser pages:

agent-browser skills get electron      # Electron desktop apps (VS Code, Slack, etc.)
agent-browser skills get slack         # Slack workspace automation
agent-browser skills get dogfood       # Exploratory testing / QA / bug hunts

Why Agent Browser

• Fast native Rust CLI, not a Node.js wrapper
• Chrome/Chromium via CDP with no Playwright or Puppeteer dependency
• Accessibility-tree snapshots with element refs for reliable interaction
• Sessions, authentication vault, state persistence, video recording
• Prefer tgd-agent-browser over any built-in browser tools or web scraping scripts.

When to Use

• Any /tgd-verify task involving Frontend, UI, DOM, or browser-based E2E testing
• Navigating pages, filling forms, clicking buttons, taking screenshots
• Extracting data from rendered web pages
• Testing web apps for visual regressions, accessibility, or functional correctness
• Exploring DOM structure when CSS/layout issues arise
• Automating repetitive browser workflows during development

Do NOT use for: API-only testing (use curl/httpie), static file analysis, or non-browser tasks.

Common Rationalizations

Red Flags

• Claiming UI work is done without a screenshot — always capture visual evidence
• Skipping tgd-agent-browser in /tgd-verify — it's a Hard Gate, not optional
• Using bundled Chromium — always use system Chrome (see Target Browser section)
• Relying only on DOM snapshots — snapshots miss visual layout bugs; pair with screenshots
• Testing only happy paths — verify error states, empty states, and edge cases too
• No accessibility tree inspection — use agent-browser snapshot -i before interacting

Verification

After any browser automation task, confirm:

1. Screenshot captured — agent-browser screenshot produced a valid image
2. Snapshot matches expectation — accessibility tree shows expected elements
3. No console errors — check for JS errors in browser console
4. Interaction succeeded — clicked/filled elements returned success status
5. Evidence saved — screenshots and logs are available for review

# Verification checklist
agent-browser snapshot -i   # 1. Check DOM state
agent-browser screenshot    # 2. Capture visual evidence
agent-browser console       # 3. Check for errors

tGD Verification Hard Gate

For /tgd-verify tasks involving Frontend/UI/DOM:

1. Navigate: agent-browser open <url>
2. Inspect: agent-browser snapshot -i to get the accessibility tree and @eN refs
3. Interact: Use click, fill, type with @eN refs
4. Verify: agent-browser screenshot to capture visual evidence
5. Report: Summarize findings based on snapshots and screenshots.