尧图网站设计 尧图网站设计YAOTU DESIGN
ARTICLE DETAIL

资讯详情

深耕网站设计与一线实操的经验洞察。

BrowserSkill 只录一遍操作,AI 就能照着干活:用 bsk CLI 把 trace.json 改到 TaoToken 的 3 种录制选型

BrowserSkill 只录一遍操作,AI 就能照着干活:用 bsk CLI 把 trace.json 改到 TaoToken 的 3 种录制选型 1. 为什么“录一遍就能干活”这件事卡在 trace.json 上BrowserSkill 这类工具最吸引人的地方是它把“教 AI 干活”从写一大段提示词变成了“你自己点一遍”。你在浏览器里怎么点它就怎么记下次换个参数照着跑。听起来像按键精灵但实际产物不是一段死板的坐标脚本而是一份trace.json——一份给 Agent 看的操作笔记里面记的是页面、步骤、元素语义而不是“屏幕第 800 像素处点一下”。问题也正好出在这里。很多人第一次用 bsk CLI 录制跑完发现 Agent 读不懂、回放对不上、或者干脆报鉴权错误。拆开看绝大多数不是录制本身的问题而是三件事没理清录制方式选错了、trace.json结构没看懂、bsk CLI 的 endpoint 和鉴权还指着默认通道。这篇就围绕 BrowserSkill 的录制回放链路把 Codex Browser Recorder 的三种录制方式手动 / 自动 / 混合在trace.json生成上的差异讲透再把 bsk CLI 的 endpoint 与鉴权改到 TaoToken 统一通道给一份能直接复制的配置和一次完整的录制→回放→校验动作。先说清楚 BrowserSkill 是什么、能做什么、适合谁。它是浏览器扩展加 bsk CLI 的组合扩展负责在真实浏览器里执行动作、采集页面结构CLI 负责把录制结果落成trace.json、把回放指令发给 Agent。适合的场景很具体——浏览器后台里那几步老重复、但每次参数不同的操作比如发测、改配置、批量提交。不适合的场景同样具体——写本地文件、点桌面软件、跨多个原生窗口的流程这些它管不了。我试过拿它跑 Jenkins 测试环境发包两步操作先打java-jar再进测试环境换包。录一遍之后下次只换分支名和包名就能重跑。整个过程里最值得琢磨的就是“录一遍”到底录出了什么以及这份东西怎么接到统一通道上让不同 Agent、不同模型都能读。2. 三种录制方式在 trace.json 上的差异以及 bsk CLI 接 TaoToken 的前置准备2.1 手动 / 自动 / 混合录出来的 trace.json 不一样Codex Browser Recorder 这条线里录制方式大致分三种它们在trace.json的生成逻辑上差别很大直接决定你后面回放稳不稳。手动录制就是你全程自己点工具只负责记录。生成的trace.json里steps数组基本一比一还原你的动作每个 step 带action、selector、value这些字段。优点是忠实缺点是如果你手抖多点了一下、或者中途刷新了页面这些也会被记进去回放时容易重复构建。我录 Jenkins 那次就多点了后来手动改了trace.json才干净。自动录制是 Agent 根据你给的目标自己探索页面、生成步骤。trace.json里的steps更“语义化”但可能和你实际想要的路径不一致尤其是页面有多个相似按钮时。它适合流程简单、页面结构规整的场景。混合录制是你先手动走一遍关键路径再让 Agent 补全或修正。生成的trace.json通常最干净关键步骤是你确认过的边角由 Agent 补齐。代价是要多一轮交互。三种方式产出的trace.json骨架是一样的差异集中在steps的粒度和pages的覆盖范围。下面是一份典型结构你可以对照自己录出来的文件看{ version: 1.0, purpose: jenkins发包测试, browser: a820cc4f, pages: [ { url: http://192.168.2.92:8080/job/java-jar/build?delay0sec, title: java-jar }, { url: http://192.168.2.92:8080/job/测试环境java换包/build?delay0sec, title: 测试环境java换包 } ], steps: [ { index: 1, action: select, selector: #branch, value: origin/feature_2.3.3, page: 0 }, { index: 2, action: click, selector: button.build, page: 0 }, { index: 3, action: input, selector: #project, value: demo-project, page: 1 }, { index: 4, action: click, selector: button.build, page: 1 } ] }看这份结构就知道pages决定 Agent 知道要去哪些页面steps决定它按什么顺序做什么。手动录制容易在steps里混入多余动作自动录制容易在pages上漏页混合录制相对平衡。选哪种取决于你的流程有多依赖“上一步的结果”。2.2 把 bsk CLI 的 endpoint 与鉴权改到 TaoToken录制和回放要跑起来bsk CLI 得能连上模型通道。默认配置指向的是官方通道如果你想让录制总结、回放决策都走 TaoToken 统一通道需要改两处endpoint 和鉴权。TaoToken 的 API 地址是https://taotoken.net/api官网在https://taotoken.net/?utm_sourcetaotoken_aicg_blog_endutm_mediumcsdnutm_campaignrewriteutm_content。先去控制台建一个 API Key路径是https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite。拿到 Key 之后bsk CLI 的配置一般落在用户目录下的配置文件里格式是 TOML# ~/.bsk/config.toml [api] base_url https://taotoken.net/api api_key sk-你的TaoToken密钥 model claude-sonnet-4-20250514 [record] default_browser a820cc4f trace_dir ./traces如果你用的是环境变量方式也可以这样export BSK_BASE_URLhttps://taotoken.net/api export BSK_API_KEYsk-你的TaoToken密钥 export BSK_MODELclaude-sonnet-4-20250514这里三件套要写全Base URL、Key、Model ID。少任何一个回放时都可能报鉴权或模型找不到。Model ID 按你实际在 TaoToken 控制台看到的可用模型填别照抄示例。配置改完先跑一次bsk config show确认读到的就是你写的那份别让旧的环境变量盖掉。3. 可复制的 bsk CLI 配置与 trace.json 修正片段3.1 一份完整的 bsk CLI 配置把上一节的配置补全加上回放相关的参数就是一份能直接用的版本# ~/.bsk/config.toml [api] base_url https://taotoken.net/api api_key sk-你的TaoToken密钥 model claude-sonnet-4-20250514 timeout 120 [record] default_browser a820cc4f trace_dir ./traces auto_summary true [replay] confirm_writes true refresh_between_steps true max_retries 1confirm_writes true对应“点构建前先念给我听”refresh_between_steps true对应“隔几秒刷一下页面看状态”。这两个开关在 Jenkins 这种要看上一步结果的流程里很关键。max_retries 1是防止失败后连点重试导致重复构建。3.2 修正 trace.json 的常见动作录完之后trace.json里常有多余步骤。比如你多点了一次 Buildsteps里就会出现两条click button.build。修正方式是删掉重复项并重排index{ steps: [ { index: 1, action: select, selector: #branch, value: origin/feature_2.3.3, page: 0 }, { index: 2, action: click, selector: button.build, page: 0 }, { index: 3, action: input, selector: #project, value: demo-project, page: 1 }, { index: 4, action: click, selector: button.build, page: 1 } ] }改完存回原文件再让 Agent 读一次确认它总结出的步骤和你预期一致。这一步别省trace.json是回放的唯一依据脏数据进去脏结果出来。3.3 录制指令模板录制时发给 Agent 的指令可以直接用这个模板把 browser id 和起始地址换成你的用 BrowserSkill 的 bsk CLI 录制我接下来的浏览器操作。步骤 1. 执行bsk record start --browser a820cc4f --url http://192.168.2.92:8080/job/java-jar/build?delay0sec --purpose jenkins发包测试 2. 你确认已开始后我会在打开的窗口里自己操作。 3. 我点“结束”后读取返回的 trace.json 并总结操作pages steps不要重跑或“验证”。最后一句“不要重跑或验证”很重要。录制阶段只留笔记回放阶段再换参数干活两个阶段分开出问题好定位。4. 一次完整的录制→回放→校验验证动作4.1 录制按上一节的模板发指令Agent 回“录制已启动”后浏览器里会出现录制条。你自己点两步第一步打开java-jar地址选好分支点 Build等 Builds 最新一条出现绿色对勾再走第二步打开测试环境换包地址填 project 和 jarname点 Build。两步跑完点录制条上的“结束”。Agent 读trace.json只总结pages和steps。4.2 回放回放时换参数用短提示词接着做吧。参考刚才的录制流程帮我把 Jenkins 测试环境发包两步都跑完。 第一步 java-jarbranch 选 2.3.3点 Build。看 Builds 最新一条出现绿色对勾后再做第二步。 第二步 测试环境java换包project填写本次项目jarname填写本次包名点 Build。 只走测试环境碰到“生产环境”立刻停。每一步点构建前先念给我听等我回“确认”再点。Agent 会按trace.json里的路径走遇到写操作弹确认。你回“确认”后它才点。跑完两步Jenkins 列表里能看到最近成功记录。4.3 校验校验分两层。第一层看结果Jenkins 里两条任务是不是都成功了包名和分支对不对。第二层看过程让 Agent 把这次实际执行的步骤和trace.json里的steps对一遍看有没有多走、漏走。如果对不上回到trace.json改别在提示词里硬掰。# 查看最近一次录制的 trace bsk trace show --latest # 对比回放步骤与录制步骤 bsk trace diff --latest --last-replaybsk trace diff会列出回放时实际动作和录制步骤的差异。差异集中在value字段是正常的因为参数换了如果差异出现在action或selector上说明页面结构变了或者录制时有脏数据需要重新录或修trace.json。5. 本篇常见报错排查401、local proxy failed、reading choices、OAuth5.1 401 Unauthorized最常见。原因基本是 Key 没配对或者环境变量盖掉了配置文件。先跑bsk config show看实际读到的base_url和api_key。如果base_url不是https://taotoken.net/api检查是不是有旧的BSK_BASE_URL环境变量。Key 的话去控制台重新建一个路径是https://taotoken.net/console/api-keys?utm_sourcetaotoken_aicg_blog_endutm_contentapi-keysutm_campaignrewrite建完直接替换配置文件里的值。5.2 local proxy failed这个报错通常出现在 CLI 尝试连本地代理但连不上。检查你的base_url是不是被写成了http://localhost:xxxx之类的本地地址。统一通道应该写https://taotoken.net/api不要带本地端口。另外确认没有其他工具在改HTTP_PROXY/HTTPS_PROXY环境变量。5.3 reading choices 相关报错回放时如果报读取choices字段失败多半是模型返回结构不符合预期。先确认model字段填的是 TaoToken 控制台里实际可用的模型 ID别填一个不存在的名字。再确认timeout够长复杂页面分析可能超过默认值。把timeout调到 120 秒以上再试。5.4 OAuth 相关报错如果 bsk CLI 或扩展提示 OAuth 失败检查是不是同时开了多个鉴权通道。统一走 TaoToken 的话OAuth 那套应该关掉只留 API Key。配置文件里不要同时存在oauth_token和api_key留api_key就行。5.5 回放重复构建这个不算报错但危害大。原因是max_retries设太大或者提示词里没写“失败就停”。把max_retries设成 1提示词里加一句“失败就停不要重试”。Jenkins 这种写操作重复构建的代价比慢一点大得多。6. 选型建议与统一通道接入三种录制方式怎么选看你的流程依赖什么。流程短、页面稳、你手不抖手动录制够用trace.json最直观。流程里判断多、页面有多个相似入口混合录制更稳关键步骤你确认边角 Agent 补。纯自动录制适合页面结构规整、你不想介入的场景但trace.json可能需要多改几轮。不管选哪种bsk CLI 的 endpoint 和鉴权都建议统一到 TaoToken。配置就三件套Base URL 写https://taotoken.net/apiKey 从控制台建Model ID 按实际可用填。改完用bsk config show确认再跑一次录制→回放→校验看bsk trace diff的差异是否只在参数上。如果你后面要把这套接到长期跑的编码或 Agent 流程里可以看下 Coding Plan路径是https://taotoken.net/coding-plan?utm_sourcetaotoken_aicg_blog_endutm_contentcoding-planutm_campaignrewrite。模型对话调试在https://taotoken.net/chat?utm_sourcetaotoken_aicg_blog_endutm_contentmodel-chatutm_campaignrewrite接入文档在https://taotoken.net/doc?utm_sourcetaotoken_aicg_blog_endutm_contentdocutm_campaignrewrite。录制回放这条链路先把trace.json弄干净再把通道接对剩下的就是换参数重跑的事。生产环境继续自己手点。
返回列表