Benchmark Collector

基于 Playwright 的 Web Agent Benchmark 数据采集工具。录制用户在浏览器中的操作，同时采集截图、SoM（Set-of-Mark）标注、DOM 结构、对话消息和 Playwright 脚本，用于算法训练和基线测评。

特性

• Codegen 录制 — 基于 Playwright Codegen API，自动记录用户操作生成可回放脚本
• SoM 标注截图 — 自动识别页面可交互元素，生成带彩色编号标注的截图
• 零闪烁采集 — 使用 CDP 直接截图 + Runtime.evaluate，不触发 Playwright 内部钩子
• iframe 深度采集 — 通过 CDP frame targeting 采集页面内所有 iframe（含跨域）的 DOM 和可交互元素，支持 ERP 等多 iframe 页面
• Cookie 自动注入 — 从本地 Chrome 提取并解密 Cookie，保留登录态（支持 macOS / Windows / Linux）
• 对话采集 — 支持 DOM 检测和 API 拦截两种模式采集客服对话消息，内置平台预设选择器自动匹配，消息自动去重
• 平台预设 — 内置常见客服平台（抖店、拼多多等）的对话容器选择器，无需手动指定
• 长时间录制优化 — 写入节流、原子保存、CDP 自动清理，支持数小时连续采集
• 增量保存 — 每步操作实时保存，进程异常退出也不丢数据
• 跨平台 — 支持 macOS / Windows / Linux

安装

# npm 全局安装
npm install -g benchmark-collector

# 或项目内安装
npm install benchmark-collector

安装后会自动下载 Chromium 浏览器（如本地已有 Chrome 则优先使用系统 Chrome）。

使用

CLI 方式

# 基本用法（自动注入本地 Chrome Cookie 保留登录态）
benchmark-collect --task "处理退款" --url "https://mms.pinduoduo.com"

# 采集抖店客服对话（已内置预设，无需指定 --chat-selector）
benchmark-collect --task "客服对话" --url "https://im.jinritemai.com/pc_seller_v2/main/workspace" --cookie

# 采集拼多多客服对话（已内置预设，无需指定 --chat-selector）
benchmark-collect --task "客服对话" --url "https://mms.pinduoduo.com/chat-merchant/index.html" --cookie

# 手动指定对话容器选择器（覆盖平台预设）
benchmark-collect --task "客服对话" --url "https://example.com/chat" --chat-selector ".my-chat-list"

# 使用 API 拦截模式采集对话（适用于动态加载的 IM 系统）
benchmark-collect --task "客服对话" --url "https://example.com" --chat-api "im/message/list"

# 开启 Trace 录制（⚠️ 长时间采集可能产生大文件）
benchmark-collect --task "测试" --url "https://www.example.com" --trace

参数说明：

| 参数 | 说明 | 默认值 | |------|------|--------| | --task | 任务名称，用于目录命名 | 未命名任务 | | --url | 起始 URL | https://www.example.com | | --chat-selector | 对话容器的 CSS 选择器（已内置常见平台预设，通常无需手动指定） | 自动匹配或自动检测 | | --chat-api | API 拦截模式的 URL 匹配模式 | 无 | | --cookie | 从本地 Chrome 提取 Cookie 并注入 | 默认关闭 | | --trace | 开启 Playwright Trace 录制 | 默认关闭 |

平台预设选择器

以下平台已内置对话容器选择器，使用时无需手动指定 --chat-selector：

| 平台 | URL 特征 | 预设选择器 | |------|----------|------------| | 抖店（飞鸽 IM） | im.jinritemai.com | .messageList | | 拼多多（商家后台） | mms.pinduoduo.com | #msgListContainer |

如需新增平台预设，编辑 src/collector.ts 中的 PLATFORM_CHAT_SELECTORS 映射表即可。

对话采集模式

工具支持两种对话采集模式：

1. DOM 检测模式（默认）：从页面 DOM 中提取对话消息

   • 优先使用 --chat-selector 或平台预设选择器精确定位
   • 未指定时自动评分检测最佳对话容器
   • 内置消息去重：过滤重复内容、时间戳噪声、加载提示等

2. API 拦截模式（--chat-api）：拦截 IM 系统的网络请求，从接口返回数据中提取消息

   • 适用于消息通过 API 动态加载的 IM 系统
   • 支持自动分页和消息累积
   • 消息按时间排序并自动去重

Cookie 自动注入

使用 --cookie 参数时，工具会从本地 Chrome 浏览器提取目标站点的 Cookie 并注入，实现免登录采集。

• macOS: 通过 Keychain 获取加密密钥，支持 Chrome 127+ 新版加密格式
• Windows: 通过 DPAPI + AES-256-GCM 解密
• Linux: 通过 Secret Service 或 PBKDF2 解密

跨域自动注入：当页面跳转到不同域名时，会自动提取并注入新域名的 Cookie。

如果 Cookie 提取失败（权限不足、Chrome 未安装等），工具会静默降级为未登录状态继续采集。

API 方式

import { BenchmarkCollector } from 'benchmark-collector';

const collector = new BenchmarkCollector('处理退款', 'https://mms.pinduoduo.com', 'output', {
  chatSelector: '.custom-chat',   // 可选：覆盖平台预设选择器
  chatApiPattern: 'im/msg/list',  // 可选：API 拦截模式
  cookie: true,                   // 可选：注入本地 Chrome Cookie
  trace: false,                   // 可选：开启 Trace 录制
});
await collector.start();

输出产物

采集完成后在 output/<任务名>_<时间戳>/ 目录下生成：

output/处理退款_2026-03-22T10-00-00/
├── session.json              # 完整会话记录（元数据 + 所有步骤）
├── recorded-script.js        # 可直接 node 执行的 Playwright 回放脚本
├── trace.zip                 # Playwright Trace 文件（仅 --trace 模式）
├── history-{id}.json         # API 拦截模式的累积对话记录
└── steps/
    ├── 0000_clean.png        # 纯净截图
    ├── 0000_som.png          # SoM 标注截图
    ├── 0000_elements.json    # 可交互元素列表
    ├── 0000_dom.html         # DOM 结构快照
    ├── 0000_conversation.json # 对话消息（有新消息时保存）
    ├── 0001_clean.png
    └── ...

产物说明

| 文件 | 内容 | 用途 | |------|------|------| | session.json | 会话元数据、每步的 action / selector / timestamp / URL | 训练数据主文件 | | recorded-script.js | Codegen 原始代码片段（干净的操作序列） | 算法训练 action 数据、集成到测试框架 | | trace.zip | Playwright Trace（仅 --trace 模式） | npx playwright show-trace trace.zip 可视化回放 | | history-{id}.json | API 拦截模式累积的对话消息 | 客服对话训练数据（API 模式） | | *_clean.png | 纯净页面截图 | 视觉模型输入 | | *_som.png | SoM 标注截图（彩色编号框标记可交互元素） | 视觉 grounding 训练 | | *_elements.json | 可交互元素列表（tag / role / text / bbox / attributes） | 结构化 grounding 数据 | | *_dom.html | 页面 DOM 快照（含 iframe 内容） | DOM-based agent 训练 | | *_conversation.json | 对话消息（角色 / 内容 / 时间戳 / 附件） | 客服对话训练数据（DOM 模式） |

回放与调试

# 回放录制的操作
benchmark-replay output/处理退款_2026-03-22T10-00-00

# 本地开发时
npx ts-node scripts/replay.ts output/处理退款_2026-03-22T10-00-00

# 可视化查看 Trace（需 --trace 模式采集）
npx playwright show-trace output/处理退款_2026-03-22T10-00-00/trace.zip

注意： 回放时是全新浏览器，没有登录态，需要登录的页面会跳转到登录页。

开发

# 安装依赖
npm install

# 本地开发运行
npx ts-node scripts/collect.ts --task "测试任务" --url "https://www.taobao.com"

# 运行测试
npm test

# 构建
npm run build

License

ISC