automating-browser
Interactive browser automation using claude-in-chrome MCP tools. Best for: demos, documentation GIFs, manual testing, live browser control. For automated E2E testing in CI/CD, use webapp-testing skill instead. Triggers: browser automation, ブラウザ自動化, screenshot, スクリーンショット, form fill, フォーム入力, click, navigate, GIF recording, GIF録画, ブラウザ操作, Chrome, demo, デモ, live browser.
When & Why to Use This Skill
This Claude skill enables seamless interactive browser automation using claude-in-chrome MCP tools. It empowers users to perform live browser control, capture high-quality screenshots, record demos, and conduct manual or E2E testing directly through Claude. By leveraging agent-browser CLI commands, it simplifies complex web interactions, form filling, and real-time debugging, making it an essential tool for developers and QA professionals seeking to automate web-based workflows.
Use Cases
- Live Browser Control & Navigation: Interactively navigate to specific URLs, click elements using reference IDs, and scroll through pages to verify web layouts and functionality in real-time.
- Automated Testing & QA: Execute end-to-end (E2E) testing workflows, including complex form filling and element validation, while proactively monitoring console logs and network errors for debugging.
- Visual Documentation & Demos: Capture high-resolution screenshots and record GIF demonstrations of web workflows to create professional product documentation, tutorials, or bug reports.
- Web Interaction & Data Verification: Use interactive element snapshots to identify, read, and interact with specific web components to verify data or automate repetitive browser-based tasks.
| name | automating-browser |
|---|---|
| description | > |
| allowed-tools | [Read, Glob, Bash(agent-browser:*)] |
| context | fork |
| user-invocable | false |
Browser Automation (agent-browser)
Core Commands
| Command | Purpose |
|---|---|
agent-browser --headed open <url> |
Open URL (visible browser) |
agent-browser open <url> |
Open URL (headless) |
agent-browser snapshot -i |
Get interactive elements (refs) |
agent-browser click @ref |
Click element |
agent-browser fill @ref "text" |
Clear and fill |
agent-browser type @ref "text" |
Type into element |
agent-browser press <key> |
Press key (Enter, Tab, etc.) |
agent-browser get text @ref |
Read element text |
agent-browser wait <sel|ms> |
Wait for element or time |
agent-browser find <loc> <val> <a> |
Find by role/text/label + act |
agent-browser screenshot [path] |
Capture screenshot |
agent-browser close |
Close browser session |
Debugging Commands
| Command | Purpose |
|---|---|
agent-browser console |
Display console output |
agent-browser errors |
Show JS error stack traces |
agent-browser network requests |
List captured requests |
agent-browser network requests --filter api |
Filter by keyword |
agent-browser trace start <path> |
Begin recording trace |
agent-browser trace stop |
Save trace file |
Workflow
| Step | Action |
|---|---|
| 1 | agent-browser --headed open <url> |
| 2 | agent-browser snapshot -i |
| 3 | Use @ref for operations |
| 4 | Re-snapshot after DOM changes |
| 5 | Check console/errors regularly |
Key Points
| Point | Description |
|---|---|
| Always snapshot | Refs are only valid after snapshot |
| Re-snapshot on DOM | After click/fill, get new refs |
| Check DevTools | Run console/errors proactively, not on fail |
| Mode switch | Close first when switching headed ↔ headless |
Patterns
| Pattern | Commands |
|---|---|
| Form Filling | snapshot -i → fill @ref "value" → click submit |
| Navigation | click @ref → wait → snapshot |
| Screenshot | snapshot → screenshot path.png |
| Debug | action → console → errors → network requests |