Browser Automation Skill
Explore pages interactively, build reusable flows, and test multi-user scenarios.
Quick Start
# Start server
node .claude/skills/browser-automation/server.mjs &
# Check available profiles
curl http://localhost:9222/profiles
# Create a session
curl -X POST http://localhost:9222/sessions \
-d '{"name": "test", "url": "http://localhost:3000", "profile": "member"}'
# Inspect the page
curl http://localhost:9222/inspect
# Execute code
curl -X POST http://localhost:9222/chunk \
-d '{"label": "Click button", "code": "await page.click(\"button.submit\");"}'
# Shutdown
curl -X POST http://localhost:9222/exitEndpoints
| Endpoint | Method | Description |
|---|---|---|
/profiles | GET | List auth profiles with descriptions |
/sessions | GET | List active sessions |
/sessions | POST | Create session {name, url, profile?, headless?} |
/sessions/:name | DELETE | Close session |
/flows | GET | List saved flows |
/flows/:name/run | POST | Run flow {profile?, startUrl?, headless?} |
/status | GET | Session status |
/inspect | GET | Page state + screenshot. Add ?fullPage=true for full-page screenshot |
/chunk | POST | Execute code {label, code} |
/navigate | POST | Navigate {url, fullPage?}. Set fullPage: true for full-page screenshot |
/save-auth | POST | Save auth {profile, description} |
/review | GET | Review recorded chunks |
/exit | POST | Shutdown server |
Use ?session=name when multiple sessions are active.
Multi-User Testing
# Create two sessions with different profiles
curl -X POST http://localhost:9222/sessions \
-d '{"name": "creator", "url": "http://localhost:3000", "profile": "creator"}'
curl -X POST http://localhost:9222/sessions \
-d '{"name": "viewer", "url": "http://localhost:3000", "profile": "member"}'
# Creator does something
curl -X POST "http://localhost:9222/chunk?session=creator" \
-d '{"label": "Publish", "code": "await page.click(\"button.publish\");"}'
# Viewer sees it
curl -X POST "http://localhost:9222/navigate?session=viewer" \
-d '{"url": "http://localhost:3000/models"}'Profiles
# List profiles
curl http://localhost:9222/profiles
# Create new profile (description required)
curl -X POST http://localhost:9222/save-auth \
-d '{"profile": "moderator", "description": "User with mod permissions"}'
# Refresh existing profile
curl -X POST http://localhost:9222/save-auth \
-d '{"profile": "moderator"}'| Profile | Description |
|---|---|
moderator | Mod permissions for content review |
creator | Established user with published content |
member | Standard logged-in user |
new-user | Fresh account for onboarding flows |
Flows
Saved flows are reusable Playwright scripts.
# List flows
curl http://localhost:9222/flows
# Run a flow
curl -X POST http://localhost:9222/flows/my-flow/run \
-d '{"profile": "member"}'
# Run with custom start URL
curl -X POST http://localhost:9222/flows/my-flow/run \
-d '{"profile": "member", "startUrl": "http://localhost:3000"}'Flows are stored in .browser/flows/*.js.
Playwright Code
Chunks execute with page available:
await page.click('button.submit');
await page.fill('input[name="email"]', 'test@example.com');
await page.waitForSelector('h1');
await page.goto('https://example.com');
const title = await page.textContent('h1');Mockup Comparison
Open local HTML mockups with file:// URLs, then compare to live pages:
# 1. Open mockup and take full-page screenshot
curl -X POST http://localhost:9222/sessions \
-d '{"name": "compare", "url": "file:///C:/path/to/mockup.html"}'
curl "http://localhost:9222/inspect?session=compare&fullPage=true"
# 2. Navigate to live page and screenshot
curl -X POST "http://localhost:9222/navigate?session=compare" \
-d '{"url": "http://localhost:3000/page", "fullPage": true}'
# 3. Compare screenshots in session folderFile Locations
- Flows:
.browser/flows/*.js - Profile metadata:
.browser/profiles/profiles.meta.json - Auth state:
.browser/profiles/*.json(gitignored) - Screenshots:
.browser/sessions/{id}/screenshots/