ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

PostHog Desktop 实战:用 agent-browser 通过 CDP 驱动真实 Electron 应用做端到端验证

PostHog Desktop 实战:用 agent-browser 通过 CDP 驱动真实 Electron 应用做端到端验证 PostHog Desktop 实战用 agent-browser 通过 CDP 驱动真实 Electron 应用做端到端验证【免费下载链接】posthog:hedgehog: PostHog is the leading platform for building self-driving products. Our developer tools – AI observability, analytics, session replay, flags, experiments, error tracking, logs, and more – capture all the context agents need to diagnose problems, uncover opportunities, and ship fixes. Steer it all from Slack, web, desktop, or the MCP.项目地址: https://gitcode.com/GitHub_Trending/po/posthog本篇基于 PostHog 仓库products/desktop下的 Claude Code Skill 文档 test-electron-app 展开讲解一套在 PostHog Desktop 桌面端Electron 应用开发中真实可用的“活体测试”方案通过 Chrome DevTools ProtocolCDP端口 9222 连接正在运行的开发版应用用 agent-browser 快照可访问性树accessibility tree来验证 UI 变更、检查网络请求、必要时截图。读完后你可以掌握如何在无 TTY 的后台环境启动开发应用、如何编写 10 分钟空闲自动关闭的看门狗、以及如何在 dev 与生产实例并存的环境中安全地驱动被测应用而不误伤用户状态。背景两个测试面选对工具PostHog Desktop 的测试体系把“验证一个改动”和“回归覆盖”分成两个明确的面TESTING.md 与 SKILL 文档给出了一致的选择表目标工具在真实应用live tRPC、workspace-server、真实数据中验证或截图某个改动本技能agent-browser CDP:9222CI 中的回归覆盖Playwright E2Eapps/code/tests/e2e/关键区别在于Playwright 启动的是一个受控的新实例而 CDP 方案驱动的是你正在运行、签着你真实 profile 的那个实例——它跑的是真实 tRPC 与 workspace-server数据来自~/.posthog-code里已登录的账号含 GitHub/Slack 集成状态。这让它天然适合“后端到桌面”的联调与 dogfooding也决定了它的一系列安全约定见后文“与生产实例并存”。桌面端整体结构来自 products/desktop/README.mdapps/code是 Electron 桌面应用React Vitepackages/下是 agent 框架、core 业务逻辑、ui 共享组件、workspace-server 本地服务与 platform 宿主能力接口整个目录是独立的 pnpm workspace。CDP 端口从何而来应用自举而非 CLI 参数一个常见误解是“开发脚本传了--remote-debugging-port”。实际实现里由于 electron-vite 直接拉起 Electron这个开关是在主进程内设置的。见 apps/code/src/main/bootstrap.ts// In dev, expose the renderer over CDP (:9222 by default) for the // test-electron-app skill. electron-vite launches Electron itself, so this is // set in-process rather than via a CLI flag. POSTHOG_CODE_CDP_PORT matches the // port resolution in scripts/electron-cdp.mjs, for when :9222 is taken. if (isDev) { app.commandLine.appendSwitch( remote-debugging-port, process.env.POSTHOG_CODE_CDP_PORT ?? 9222, ); }三个要点只有 dev 构建暴露 CDPisDev条件保证生产构建没有调试端口这也是后文“agent-browser 永远打不到 prod”的底层保证。端口可覆盖环境变量POSTHOG_CODE_CDP_PORT与 9222 默认值和端口解析脚本保持一致见下。同一文件里还有几个值得注意的配套开关dns.setDefaultResultOrder(ipv4first)与net.setDefaultAutoSelectFamily(false)禁用 Happy Eyeballs解决多地址 ELB 的 IPv6 连接超时问题autoplay-policy no-user-gesture-required允许 agent 在无人点击时自动播放语音与完成音。前置准备与连接预检pnpm app:cdp一次性安装npm i -g agent-browser agent-browser install连接用仓库提供的预检脚本pnpm app:cdp在 products/desktop/package.json 中定义为node scripts/electron-cdp.mjs。阅读 scripts/electron-cdp.mjs 可以看到它做了三件事端口解析优先取第一个位置参数其次POSTHOG_CODE_CDP_PORT最后回落 9222非法端口非整数或超出 1-65535直接报错退出agent-browser 存在性检查执行agent-browser --version未安装时给出安装命令提示可达性探测 自动连接带 2 秒超时 fetchhttp://127.0.0.1:port/json/list列出所有type page的 target标题 URL失败则提示“用pnpm dev或pnpm dev:code启动”成功则 spawnagent-browser connect port并提示下一步agent-browser snapshot -i。如果脚本报告应用不可达结论很简单应用没在运行。先启动再重试pnpm app:cdp。后台无 TTY启动应用为什么不能用 pnpm dev这是本技能中最具实操价值的部分之一。SKILL 明确警告不要在非交互 shell 里用pnpm dev。原因是它构建依赖后会把控制权交给phrocsTUI 进程多路复用器bubbletea 实现后者在缺少控制终端时直接中止bubbletea: could not open TTY: /dev/tty: device not configured后台 agent 没有 TTY所以正确姿势是——先跑 TTY 安全、与pnpm dev相同的依赖构建步骤再单独以“stdin 保持打开”的方式启动 Electron 应用本体pnpm build:deps # turbo build of posthog/code deps tail -f /dev/null | pnpm dev:code # 后台运行并保持存活对照 products/desktop/package.json 的定义可以核实这两个脚本的真实身份dev:code: node scripts/dev-with-skills.mjs pnpm --filter code start, build:deps: turbo build --filterposthog/code^...,而apps/code的start脚本就是electron-vite dev --watch见 apps/code/package.json——只跑应用本体不经过phrocsTUI它监视并重建 main/preload、对 renderer 做热更新完全够用。关于tail -f /dev/null |前缀文档诚实地说明它现在只是“无害的历史遗留护栏”旧版electron-forge start有一个交互式“输入rs重启”的 stdin 读取器在无 stdin 的 shell 里读到 EOF 即视为退出会在 CDP 端口打开之前把 Electron 窗口拆掉electron-vite dev没有这个读取器所以后台化后自身就能稳定存活。启动后用轮询等端口就绪不要盲目 sleepuntil curl -s localhost:9222/json/version /dev/null; do sleep 1; done agent-browser connect 9222SKILL 还强调启动后要给应用几秒稳定时间renderer 在#root *出现且 “Loading” 消失后才算就绪。生命周期纪律永不杀掉不是你启动的实例技能文档把实例生命周期写成硬规则这是多 agent / 人机协作场景下防止事故的核心pnpm app:cdp发现应用已在:9222上运行→ 那是用户自己的实例。你用完只需agent-browser close断开会话让应用继续运行。是你自己启动的实例→ 也不要测完立刻拆掉。应用可以在多轮对话间存活结束时告知用户它仍在运行并询问是否还有后续——后续操作无需重新拉起。10 分钟空闲看门狗为防止遗忘的实例长期滞留启动时 arm 一个空闲监控。每次交互后 touch 标记文件重新 touch 即重置计时touch /tmp/posthog-dev-lastuse # 启动时先 arm之后每次交互再跑一次然后作为后台任务启动看门狗一次务必先 touch 标记再启动否则立即触发。它每 30 秒轮询标记文件静默满 600 秒10 分钟即触发while sleep 30; do last$(stat -f %m /tmp/posthog-dev-lastuse 2/dev/null || echo 0) [ $(( $(date %s) - last )) -ge 600 ] break done pid$(pgrep -f remote-debugging-port9222 | head -1) [ -n $pid ] kill -TERM -$(ps -o pgid -p $pid | tr -d ) 2/dev/null注意它按进程组发 SIGTERMkill -TERM -PGIDtail、pnpm、electron-vite与 Electron 一并退出连tail -f /dev/null这个 stdin 管道都不会残留。匹配条件remote-debugging-port9222只会命中你的 dev 实例——生产构建既没有调试端口、又使用独立的posthog-code-dev之外的 profile因此永远不会误伤用户的应用。用户说“完成/关掉”时主动停机三连agent-browser close pid$(pgrep -f remote-debugging-port9222 | head -1) [ -n $pid ] kill -TERM -$(ps -o pgid -p $pid | tr -d ) 2/dev/null rm -f /tmp/posthog-dev-lastuse验证方式curl -s localhost:9222/json/version失败、pgrep -fl posthog-code-dev输出为空。标准操作循环snapshot 优先于 screenshot驱动循环只有 5 条命令agent-browser connect 9222 # 附加若已跑过 pnpm app:cdp 可跳过 agent-browser snapshot -i # 只快照可交互元素应用本身就是暗色主题 agent-browser click e5 # 对快照中的 ref 执行操作 agent-browser snapshot -i # UI 一变就重新快照——这就是你的验证手段 agent-browser close # 结束释放会话三条纪律值得展开1. 验证靠 snapshot不靠 screenshot。可访问性树以极少的 token 成本告诉你屏幕上有什么是确认“测试生效”的正道。不要为了“确认自己的改动”而截图——截图只在用户明确要求看应用时才执行。2. ref 会失效。e1、e2… 每次快照重新分配UI 一变即过期下一次 ref 交互前必须重新快照。3. 优先稳定定位器。renderer 大量使用data-testid目标明确时优先于 refagent-browser find testid new-task-button click agent-browser find role button click --name New task agent-browser find text Settings click对 API 支撑的 UI要同时检查请求与渲染状态agent-browser network requests成功状态码不够。要确认响应中客户端实际读取的字段齐全然后对消费这些字段的组件重新快照在报告通过或失败之前把“请求 交互”完整重复一遍。启动前还应加载与 agent-browser 版本匹配的权威工作流文档agent-browser skills get electron # Electron-over-CDP 工作流权威 agent-browser skills get core # snapshot/interact/screenshot 参考截图规范绝对路径 帮用户打开只在用户明确索要时“screenshot”、“show me”、“what does it look like”才截图agent-browser screenshot /tmp/app.png # 视口绝对路径 可点击 agent-browser screenshot --full /tmp/app.png # 整页而非视口操作顺序是“先导航到目标视图点击穿过 UI再捕获”。重复捕获复用已连接的会话批量截图很快。交付闭环每次都要做保存并报告绝对路径/tmp/app.png绝不使用裸文件名out.png——Claude Code 会把绝对路径渲染为可点击链接点路径即打开 PNG主动提出帮用户打开用户答应则执行open /tmp/app.pngmacOS 会用预览打开如果请求明显是“截个图给我看看”直接打开而不是再问用户随时可用!open /tmp/app.png自行打开。仓库特定坑位端口、多目标、暗色与认证SKILL 文档列出的四条 repo-specific 注意事项每一条都对应一个真实的翻车场景端口 9222 与 Chrome 默认调试端口冲突若connect附加到了错误目标用agent-browser tab列出全部 target再用agent-browser tab --url *挑出 PostHog 窗口切换agent-browser tab index。多 target应用有主 renderer 窗口页面标题含 PostHog以及可能的 webview/devtools全部可通过agent-browser tab枚举与切换。永远不要传--color-scheme dark这个全局标志会触发 agent-browser 的设备仿真强制 1280x720 视口使该 Electron 窗口渲染成空白且状态粘在 daemon 里——只有重启 agent-browser daemon 能清除close无效。应用本身已是暗色直接用裸snapshot/screenshot即可。认证/数据边界你驱动的是~/.posthog-code里登录的那个 profile。如果应用显示 onboarding 或登录页那就是真实的启动状态照实处理即可。探索期间不要修改生产数据不要创建真实 task/PR。dev 与 prod 并存设计上就允许两个实例同时跑PostHog 的用法是生产已安装应用运行 agent开发构建pnpm dev是被测系统。二者能安全并存依据在 bootstrap.ts 的 dev 隔离设计SKILL 原文归纳agent-browser 永远只指向 dev只有 dev 构建在:9222暴露 CDPprod 没有调试端口connect 9222不可能误驱动生产实例独立认证/状态dev 实例使用自己的posthog-code-devprofile、独立的 app 名称、userData 与单实例锁与 prod 永不冲突。prod 已登录不代表 dev 已登录——需要单独在 dev 窗口登录一次其状态随后持久保留只允许一个 dev 实例dev 的单实例锁、固定 dev 回调端口8238和:9222意味着第二个pnpm dev会冲突并退出。正确组合是 prod 一个 dev热更新范围renderer/UI 改动热更新重新快照即可main 进程/Electron 改动需要重启 dev 实例才生效。故障排查症状诊断与处理:9222连接被拒应用没有带调试标志运行。先启动参考无头启动配方用lsof -i :9222或curl -s localhost:9222/json/version验证端口应用启动后立即退出CDP 从未打开旧版electron-forge的“stdin EOF 即退出”行为在electron-vite下已消失所以tail -f /dev/null不是这里的解药。现在通常是构建错误、单实例锁另一个 dev 在跑或崩溃——检查pnpm dev:code输出。记住pnpm dev完全不能无头运行phrocsTUI 需要 TTY要用pnpm dev:code快照为空 / 窗口不对target 选错了agent-browser tab切到 PostHog 页面输入框打不进字试agent-browser keyboard type text在当前焦点处键入或agent-browser keyboard inserttext text绕过按键事件直接插入文本进阶本地 Django 栈的后端到桌面 E2E当验证目标是“本地 PostHog 后端 桌面端”的完整链路时SKILL 指向参考文档 local-django-stack.md。其要点最小栈原则先查现有进程复用不属于自己的服务、绝不停掉开发者的 Electron 实例只启动被测端点所需的 Docker 数据服务 本地 PostHog 地址上的 Django 登录/OAuth 页面所需的根 Vite Electron dev 进程。测试不用 ingestion/Celery/Temporal/plugin server 就别把它们全拉起来——全栈 原生桌面构建会一起挤爆小内存 VM就绪判断Django 与根 Vite 作为独立长进程运行轮询http://localhost:8010/_health不要信任启动器的退出码走真实 OAuth 流程在应用里选Local development在浏览器中对localhost:8010完成 Electron 生成的 OAuth URL。用常规登录表单或页内/api/login/请求让 cookie 与 CSRF 留在浏览器里不要改写 scope 或往桌面存储里塞 token 来“凑”登录成功。若授权成功但 Desktop 没有 project去检查 OAuth token scope 与/api/users/me/及组织/project 请求——这是契约证据不是环境噪音先种数据再开界面追踪端点的所有服务端依赖后再造 fixture项目/团队通过Project.objects.create_with_team(...)创建不要直接建Team行ClickHouse fixture 需确认活动库是posthog而非default时间戳晚于任务创建时间并匹配查询用到的全部归因属性五层验证端点返回预期状态 → JSON 包含桌面端读取的全部字段 → 可访问性快照中指示器显示该值 → 打开 popover 显示预期明细 → 重新加载并重复交互结果一致。请求失败时读 Django 日志拿确切异常修复范围内的 bug 后继续同一次 E2E 运行而不是止步于第一个可处理的失败。小结这套技能文档沉淀的核心不是某条命令而是一整套在“agent 驱动真实开发应用”场景下的工程纪律CDP 端口由应用自举bootstrap.ts而非外部参数pnpm app:cdpscripts/electron-cdp.mjs把安装检查、端口解析、可达性探测与自动连接封装成一个可预检动作snapshot 替代 screenshot 作为验证手段token 成本与判断力双优按进程组的空闲看门狗与“只匹配remote-debugging-port9222”的杀法保证了自动化测试既能自愈又绝不碰用户实例。配合 Playwright E2Eapps/code/tests/e2e/承担 CI 回归两条测试面各司其职构成 PostHog Desktop 从活体验证到回归覆盖的完整闭环。【免费下载链接】posthog:hedgehog: PostHog is the leading platform for building self-driving products. Our developer tools – AI observability, analytics, session replay, flags, experiments, error tracking, logs, and more – capture all the context agents need to diagnose problems, uncover opportunities, and ship fixes. Steer it all from Slack, web, desktop, or the MCP.项目地址: https://gitcode.com/GitHub_Trending/po/posthog创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表