benchmark-collector

v1.7.1

Published

11 days ago

Playwright-based benchmark data collector for web agent training

0High
0Medium
0Low

shaozj

benchmark playwright web-agent data-collection som

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 映射表即可。

对话采集模式

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

DOM 检测模式（默认）：从页面 DOM 中提取对话消息
- 优先使用 --chat-selector 或平台预设选择器精确定位
- 未指定时自动评分检测最佳对话容器
- 内置消息去重：过滤重复内容、时间戳噪声、加载提示等
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 模式） |

历史会话批量采集

针对抖音飞鸽（抖店）和拼多多商家后台的历史会话页面，提供两个独立的批量采集脚本，自动操作页面、拦截接口、翻页累积数据。

登录态同步：优先使用 CDP 模式

部分系统（如飞鸽）除了 Cookie 还把 JWT 等登录凭证存在 localStorage 里。仅注入 Cookie 不足以维持登录态 — 前端 JS 检查 localStorage 找不到 token 会判定为"未登录"。

推荐方案：CDP 连接已运行的真实 Chrome

# 1. 完全退出 Chrome（Cmd+Q），然后用 CDP 模式启动
benchmark-chrome-cdp

# 2. 在新启动的 Chrome 中登录飞鸽 / 拼多多
# 3. 保持 Chrome 开启，另开终端跑采集脚本
benchmark-feige-history
benchmark-pdd-history

# 检查 CDP 端口状态（不启动浏览器）
benchmark-chrome-cdp --check

benchmark-chrome-cdp 智能行为：

端口已监听 → 直接告知，无需重启
Chrome 已运行但未开调试端口 → 报错提示先退出 Chrome（避免登录态未复用）
自定义端口：--port 9333；自定义 user-data-dir：--user-data-dir /tmp/chrome-cdp
强制启动（独立 profile）：--force

CDP 模式下采集脚本通过 chromium.connectOverCDP 连接到这个 Chrome 实例，直接复用现有 context（cookie + localStorage + sessionStorage 全有），完全规避登录态问题，且不会被反爬识别为自动化浏览器。

回退：仅 Cookie 注入模式

如果不方便启动 CDP Chrome，脚本也支持纯 Cookie 注入（自动从本地 Chrome 提取）。但对于使用 localStorage 存 JWT 的系统会失败：

# 显式禁用 CDP，强制走 Cookie 注入
benchmark-feige-history --no-cdp

抖音飞鸽

页面：https://im.jinritemai.com/pc_seller_v2/main/data/historyConversation，接口：fuzzySearchConversation。

# 全局安装后直接运行
benchmark-feige-history

# 自定义参数
benchmark-feige-history \
  --max-pages 100 \   # 最大账号列表翻页数（默认 100）
  --delay 1000 \      # 每次翻页间隔，避免限流（默认 1000ms）
  --output ./data \   # 输出目录（默认 output）
  --headless          # 无头模式

# 本地开发模式
npm run feige-history

流程：打开页面 → 选"近30天" → 点击查询 → 拦截 fuzzySearchConversation → 自动翻页直到采集全部 → 保存到 output/feige-history_<timestamp>.json。

拼多多商家后台

页面：https://mms.pinduoduo.com/mms-chat/search?msfrom=mms_sidenav，接口：getMessages。

# 全局安装后直接运行
benchmark-pdd-history

# 自定义参数
benchmark-pdd-history \
  --max-accounts 5000 \      # 最多采集消费者账号总数（默认 5000）
  --max-account-pages 50 \   # 账号列表最多翻多少页（默认 50）
  --max-msg-pages 20 \       # 每个账号最多翻多少页消息（默认 20）
  --delay 600 \              # 操作间隔（默认 600ms）
  --output ./data \
  --headless

# 本地开发模式
npm run pdd-history

流程：打开页面 → 选"近30天" → 点击查询 → 遍历左侧 .user-item 消费者账号列表（含分页翻页）→ 每个账号点击后遍历右侧消息分页 → 拦截 getMessages 累积全部消息 → 保存到 output/pdd-history_<timestamp>.json。

拼多多页面有两套独立分页器（均为 .PGT_outerWrapper）：
左侧 .table-section-left-footer：简版 (< 1 / 41 >)，下一页类 PGT_simpleNext
右侧 .table-section-right-footer：完整版 (1 2 3 4 5 ... 51 >)，下一页类 PGT_next
脚本通过祖先容器精确区分，避免互相误触。

前置条件：
推荐：用 benchmark-chrome-cdp 启动带调试端口的 Chrome → 在其中登录飞鸽 / 拼多多 → 保持 Chrome 开启 → 另开终端跑采集脚本
备选：在本地 Chrome 中登录目标商家后台后，跑脚本时加 --no-cdp 参数，从 Chrome 解密提取 Cookie（仅适用于 cookie-only 鉴权系统，飞鸽不可用）

回放与调试

# 回放录制的操作
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