mcpField
B
browser-automation

browser-automation

github.com/different-ai开发24.3k45 次安装今天更新
代码仓库

关于 browser-automation

browser-automation 是用于本地开发期间探索和调试 OpenWork Electron 应用的技能。它通过 Electron 的 CDP 端点连接 OpenCode 浏览器工具，以检查界面并提交任务。

主要功能

  1. 01将浏览器工具连接到 OpenWork
  2. 02使用浏览器工具检查应用状态
  3. 03在编辑器中输入并运行任务
  4. 04在界面中核验响应

适用场景

  1. 01本地调试 OpenWork 界面
  2. 02检查任务提交及响应
  3. 03探索开发期间的应用行为

安装

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

$npx skills add https://github.com/different-ai/openwork --skill browser-automation

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

详细介绍

浏览器自动化

验证时，不要手动驱动 CDP——请编写或运行 evals/core 测试流程或 evals/proofs 证明（write-a-spec、run-tests）。此技能仅用于探索和调试。

我做什么

  • 在本地开发期间，将 OpenCode 浏览器工具连接到 OpenWork Electron 应用。
  • 通过 Electron 的 Chrome DevTools Protocol 端点驱动应用 UI。
  • 在编辑器中发送任务／会话，并在 UI 中确认响应。

本地开发环境设置

pnpm dev 默认启用 Electron CDP：

OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=${OPENWORK_ELECTRON_REMOTE_DEBUG_PORT:-9823}

OpenCode 浏览器工具的默认浏览器 URL 为：

http://127.0.0.1:9823

应用 UI 通常加载于：

http://localhost:5173/

若要使用其他 CDP 端口，请通过覆盖配置启动：

OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=9830 pnpm dev

若要在本次运行中禁用 Electron CDP：

OPENWORK_ELECTRON_REMOTE_DEBUG_PORT=0 pnpm dev

后台启动

用户希望应用在后台运行时，请使用分离式启动：

nohup pnpm dev > /tmp/openwork-dev.log 2>&1 &

然后等待 CDP 端口就绪：

lsof -nP -iTCP:9823 -sTCP:LISTEN

浏览器工具流程

  1. 使用 browser_url: "http://127.0.0.1:9823" 调用 browser_list 列出目标。
  2. 选择 OpenWork 目标 ID。
  3. 使用 browser_eval 或 browser_snapshot 读取状态。
  4. 定位 [contenteditable="true"][data-lexical-editor="true"]，并在 Lexical 编辑器中填写内容。
  5. 点击 Run task 按钮。
  6. 检查 document.body.innerText 或当前 URL，确认会话响应。

发送会话

选择 OpenWork 目标后，使用以下 browser_eval 模式：

(() => {
  const editor = document.querySelector('[contenteditable="true"][data-lexical-editor="true"]');
  if (!editor) return { ok: false, reason: 'editor not found' };

  editor.focus();
  const data = new DataTransfer();
  data.setData('text/plain', 'Say hello from the Electron browser test.');
  editor.dispatchEvent(new ClipboardEvent('paste', {
    bubbles: true,
    cancelable: true,
    clipboardData: data,
  }));

  const run = Array.from(document.querySelectorAll('button'))
    .find((button) => button.innerText.trim() === 'Run task');
  if (!run) return { ok: false, reason: 'Run task not found', inserted };
  if (run.disabled) return { ok: false, reason: 'Run task disabled', inserted, text: editor.innerText };

  run.click();
  return { ok: true, inserted: true, text: editor.innerText };
})()

注意事项

  • Electron CDP 用于开发测试工具。用户的浏览器任务应使用内置的 OpenWork Browser 目标。
  • 本地连接成功后，应显示位于 http://127.0.0.1:9823 的 OpenWork 目标。
  • 已知可正常运行的冒烟测试提示词为 Say hello from the Electron browser test.，预期响应为 Hello from the Electron browser test.

评论

支持 Markdown