mcpField
B
browser-automation

browser-automation

github.com/civitai测试与质量7.3k82 次安装今天更新
代码仓库

关于 browser-automation

browser-automation 是用于交互式浏览器操作与测试的技能，面向需要重复执行页面流程或验证多用户场景的团队。它通过 HTTP 接口管理会话、认证配置和可复用的 Playwright 流程。

主要功能

  1. 01创建并管理浏览器会话
  2. 02保存和使用认证配置
  3. 03录制并运行可复用流程
  4. 04执行 Playwright 页面代码
  5. 05查看页面状态与截图

适用场景

  1. 01测试不同用户权限下的页面
  2. 02重复运行已保存的浏览器流程
  3. 03比较本地 mockup 与线上页面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/civitai/civitai --skill browser-automation

安装后在 Claude Code 中输入/browser-automation确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

package-lock.json
package.json
server.mjs

详细介绍

浏览器自动化技能

交互式探索页面、构建可复用流程，并测试多用户场景。

快速入门

# 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

端点

端点方法描述
/profilesGET列出身份验证配置及其描述
/sessionsGET列出活动会话
/sessionsPOST创建会话 { name, url, profile?, headless? }
/sessions/:nameDELETE关闭会话
/flowsGET列出已保存的流程
/flows/:name/runPOST运行流程 { profile?, startUrl?, headless? }
/statusGET会话状态
/inspectGET页面状态 + 截图。添加 ?fullPage=true 以获取整页截图
/chunkPOST执行代码 { label, code }
/navigatePOST导航 { url, fullPage? }。设置 fullPage: true 以获取整页截图
/save-authPOST保存身份验证 { profile, description }
/reviewGET查看录制的代码块
/exitPOST关闭服务

有多个会话处于活动状态时，请使用 ?session=name。

多用户测试

# 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"}'

配置

# 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"}'
配置描述
moderator拥有内容审核权限的版主
creator已发布内容的成熟用户
member已登录的普通用户
new-user用于新手引导流程的新账户

流程

已保存的流程是可复用的 Playwright 脚本。

# 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"}'

流程存储在 .browser/flows/*.js 中。

Playwright 代码

代码块执行时可使用 page：

await page.click('button.submit');
await page.fill('input[name="email"]', '[email protected]');
await page.waitForSelector('h1');
await page.goto('https://example.com');
const title = await page.textContent('h1');

样机对比

使用 file:// URL 打开本地 HTML 样机，然后与线上页面进行对比：

# 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

文件位置

  • 流程：.browser/flows/*.js
  • 配置元数据：.browser/profiles/profiles.meta.json
  • 身份验证状态：.browser/profiles/*.json（已加入 gitignore）
  • 截图：.browser/sessions/{id}/screenshots/

评论

支持 Markdown