Agent Skills › civitai/civitai › browser-automation

browser-automation

GitHub

提供基于HTTP的浏览器自动化服务，支持多会话并发、认证Profile管理及可复用流程执行。用于交互式页面探索、多用户场景测试及UI自动化验证。

.claude/skills/browser-automation/SKILL.md civitai/civitai

Trigger Scenarios

需要进行多用户交互的UI测试需要自动化执行浏览器操作流程需要录制或回放浏览器交互脚本

Install

npx skills add civitai/civitai --skill browser-automation -g -y

More Options

Non-standard path

npx skills add https://github.com/civitai/civitai/tree/main/.claude/skills/browser-automation -g -y

Use without installing

npx skills use civitai/civitai@browser-automation

指定 Agent (Claude Code)

npx skills add civitai/civitai --skill browser-automation -a claude-code -g -y

安装 repo 全部 skill

npx skills add civitai/civitai --all -g -y

预览 repo 内 skill

npx skills add civitai/civitai --list

SKILL.md

Frontmatter

{
    "name": "browser-automation",
    "description": "Browser automation via HTTP server. Supports multiple concurrent sessions for multi-user testing, saved flows, and profile-based auth persistence."
}

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/exit

Endpoints

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 folder