$npx -y skills add PramodDutta/qaskills --skill agent-browserFast Rust-based headless browser automation CLI with Node.js fallback for AI agents, featuring navigation, clicking, typing, snapshots, and structured commands optimized for agent workflows.
| 1 | # Agent Browser Automation Skill |
| 2 | |
| 3 | You are an expert in browser automation using agent-browser, a fast Rust-based CLI tool designed specifically for AI coding agents. When the user asks you to automate browser interactions, perform web scraping, or test web applications, follow these detailed instructions. |
| 4 | |
| 5 | ## Core Principles |
| 6 | |
| 7 | 1. **Speed-first architecture** -- Rust core provides millisecond-level responsiveness for agent commands. |
| 8 | 2. **Structured output** -- All commands return JSON output optimized for AI agent parsing. |
| 9 | 3. **Fallback resilience** -- Automatically falls back to Node.js implementation when Rust binary is unavailable. |
| 10 | 4. **Agent-optimized commands** -- CLI designed for programmatic control, not human interaction. |
| 11 | 5. **Snapshot-driven debugging** -- Every action can capture page snapshots for AI agent analysis. |
| 12 | |
| 13 | ## Installation |
| 14 | |
| 15 | ```bash |
| 16 | # Install globally via npm |
| 17 | npm install -g agent-browser |
| 18 | |
| 19 | # Or use npx without installation |
| 20 | npx agent-browser --version |
| 21 | |
| 22 | # Verify installation |
| 23 | agent-browser --help |
| 24 | ``` |
| 25 | |
| 26 | ## Project Structure for Agent-Driven Testing |
| 27 | |
| 28 | ``` |
| 29 | tests/ |
| 30 | browser-automation/ |
| 31 | scenarios/ |
| 32 | login-flow.json |
| 33 | checkout-flow.json |
| 34 | search-navigation.json |
| 35 | snapshots/ |
| 36 | login-success.png |
| 37 | cart-state.png |
| 38 | scripts/ |
| 39 | run-scenario.sh |
| 40 | batch-test.sh |
| 41 | config/ |
| 42 | browser-config.json |
| 43 | viewport-sizes.json |
| 44 | ``` |
| 45 | |
| 46 | ## Core Commands |
| 47 | |
| 48 | ### Navigation Commands |
| 49 | |
| 50 | ```bash |
| 51 | # Navigate to URL |
| 52 | agent-browser navigate --url "https://example.com" |
| 53 | |
| 54 | # Navigate with custom viewport |
| 55 | agent-browser navigate --url "https://example.com" --viewport "1920x1080" |
| 56 | |
| 57 | # Navigate with custom user agent |
| 58 | agent-browser navigate --url "https://example.com" \ |
| 59 | --user-agent "Mozilla/5.0 (iPhone; CPU iPhone OS 14_0 like Mac OS X)" |
| 60 | |
| 61 | # Navigate and wait for network idle |
| 62 | agent-browser navigate --url "https://example.com" --wait-until "networkidle" |
| 63 | ``` |
| 64 | |
| 65 | **Output:** |
| 66 | ```json |
| 67 | { |
| 68 | "success": true, |
| 69 | "url": "https://example.com", |
| 70 | "title": "Example Domain", |
| 71 | "loadTime": 234, |
| 72 | "timestamp": "2024-02-12T10:30:00Z" |
| 73 | } |
| 74 | ``` |
| 75 | |
| 76 | ### Clicking Elements |
| 77 | |
| 78 | ```bash |
| 79 | # Click by selector |
| 80 | agent-browser click --selector "button#submit" |
| 81 | |
| 82 | # Click by text content |
| 83 | agent-browser click --text "Sign In" |
| 84 | |
| 85 | # Click with coordinate offset |
| 86 | agent-browser click --selector ".dropdown" --offset "10,20" |
| 87 | |
| 88 | # Wait for element before clicking |
| 89 | agent-browser click --selector "button.load-more" --wait 5000 |
| 90 | ``` |
| 91 | |
| 92 | **Output:** |
| 93 | ```json |
| 94 | { |
| 95 | "success": true, |
| 96 | "element": "button#submit", |
| 97 | "action": "click", |
| 98 | "timestamp": "2024-02-12T10:30:01Z" |
| 99 | } |
| 100 | ``` |
| 101 | |
| 102 | ### Typing Input |
| 103 | |
| 104 | ```bash |
| 105 | # Type into input field |
| 106 | agent-browser type --selector "input#email" --text "user@example.com" |
| 107 | |
| 108 | # Type with delay between keystrokes (human-like) |
| 109 | agent-browser type --selector "input#search" --text "automation" --delay 50 |
| 110 | |
| 111 | # Type and press Enter |
| 112 | agent-browser type --selector "input#search" --text "query" --enter |
| 113 | |
| 114 | # Clear field before typing |
| 115 | agent-browser type --selector "input#username" --text "newuser" --clear |
| 116 | ``` |
| 117 | |
| 118 | **Output:** |
| 119 | ```json |
| 120 | { |
| 121 | "success": true, |
| 122 | "element": "input#email", |
| 123 | "action": "type", |
| 124 | "length": 17, |
| 125 | "timestamp": "2024-02-12T10:30:02Z" |
| 126 | } |
| 127 | ``` |
| 128 | |
| 129 | ### Taking Snapshots |
| 130 | |
| 131 | ```bash |
| 132 | # Full page screenshot |
| 133 | agent-browser snapshot --output "screenshot.png" |
| 134 | |
| 135 | # Snapshot specific element |
| 136 | agent-browser snapshot --selector "#content" --output "content.png" |
| 137 | |
| 138 | # Snapshot with custom dimensions |
| 139 | agent-browser snapshot --viewport "1920x1080" --output "desktop.png" |
| 140 | |
| 141 | # Get page HTML |
| 142 | agent-browser snapshot --format "html" --output "page.html" |
| 143 | |
| 144 | # Get page as PDF |
| 145 | agent-browser snapshot --format "pdf" --output "document.pdf" |
| 146 | ``` |
| 147 | |
| 148 | **Output:** |
| 149 | ```json |
| 150 | { |
| 151 | "success": true, |
| 152 | "format": "png", |
| 153 | "path": "screenshot.png", |
| 154 | "size": 245678, |
| 155 | "dimensions": { |
| 156 | "width": 1280, |
| 157 | "height": 720 |
| 158 | }, |
| 159 | "timestamp": "2024-02-12T10:30:03Z" |
| 160 | } |
| 161 | ``` |
| 162 | |
| 163 | ### Extracting Data |
| 164 | |
| 165 | ```bash |
| 166 | # Extract text from element |
| 167 | agent-browser extract --selector "h1.title" --attribute "text" |
| 168 | |
| 169 | # Extract attribute value |
| 170 | agent-browser extract --selector "a.link" --attribute "href" |
| 171 | |
| 172 | # Extract multiple elements |
| 173 | agent-browser extract --selector "li.item" --all |
| 174 | |
| 175 | # Extract as JSON |
| 176 | agent-browser extract --selector ".product-card" --json \ |
| 177 | --fields "title:.title,price:.price,image:img@src" |
| 178 | ``` |
| 179 | |
| 180 | **Output:** |
| 181 | ```json |
| 182 | { |
| 183 | "success": true, |
| 184 | "selector": "h1.title", |
| 185 | "results": [ |
| 186 | { |
| 187 | "text": "Welcome to Our Site", |
| 188 | "visible": true |
| 189 | } |
| 190 | ], |
| 191 | "co |