【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址https://gitcode.com/gh_mirrors/zco/ZCode点击查看免费下载导读本文是 ZCode 仓库内agent-browserSkill 的浏览器自动化视频录制技术指南讲解如何用agent-browser record系列命令将浏览器自动化过程捕获为 WebM 视频用于自动化失败排查、操作文档生成与 CI/CD 测试取证。读完本文你将掌握录制命令的完整用法、三种典型录制脚本模板、四条实操最佳实践以及输出格式与已知限制并了解 ZCode 桌面端内置浏览器IAB的另一种视频录制方案作为对照。视频录制在浏览器自动化中的定位agent-browser是随 ZCode 以 Skill 形式集成的浏览器自动化 CLI通过 Chrome DevTools ProtocolCDP直接驱动 Chrome/Chromium安装方式见 SKILL.mdnpm i -g agent-browser、brew install agent-browser或cargo install agent-browser。视频录制是该工具链中面向事后可回溯能力的一环自动化过程中的每一步open、snapshot、click、fill都可以被连续录制成一段视频供调试、文档或验证使用。在 commands.md 的命令参考中视频录制与screenshot、pdf、profiler、trace一起构成了捕获Capture能力族——截图提供瞬间快照录制提供时间维度的完整过程二者互补。基本录制三行命令完成一次捕获一次最基本的录制遵循开始 → 操作 → 停止三步流程# Start recording agent-browser record start ./demo.webm # Perform actions agent-browser open https://example.com agent-browser snapshot -i agent-browser click e1 agent-browser fill e2 test input # Stop and save agent-browser record stop要点拆解record start path以目标文件路径启动录制录制期间所有浏览器操作都会被捕获进视频流录制过程中的交互仍使用常规的open/snapshot -i/click e1/fill e2 text等命令e1、e2这类元素引用由snapshot -i生成注意页面变化后引用会失效需重新snapshotrecord stop结束录制并将视频写入启动时指定的.webm文件。录制命令速查命令作用agent-browser record start ./output.webm开始录制到指定文件agent-browser record stop停止当前录制并保存agent-browser record restart ./take2.webm停止当前录制并立即开始新录制换文件续录# Start recording to file agent-browser record start ./output.webm # Stop current recording agent-browser record stop # Restart with new file (stops current starts new) agent-browser record restart ./take2.webmrestart适合多镜头场景一次会话内连续产出多段独立视频例如同一个测试流程的不同分支、不同账号的登录演示无需先stop再start。典型使用场景场景一调试失败的自动化自动化断言失败时一段录制视频能完整还原失败前的操作序列。下面的脚本将录制文件名带上了时间戳并在点击失败时立即停止录制并退出方便事后回看#!/bin/bash # Record automation for debugging agent-browser record start ./debug-$(date %Y%m%d-%H%M%S).webm # Run your automation agent-browser open https://app.example.com agent-browser snapshot -i agent-browser click e1 || { echo Click failed - check recording agent-browser record stop exit 1 } agent-browser record stop场景二生成操作文档为文档录制如何登录这类操作演示时通过agent-browser wait 毫秒在关键步骤之间插入停顿让观看者看清每一步#!/bin/bash # Record workflow for documentation agent-browser record start ./docs/how-to-login.webm agent-browser open https://app.example.com/login agent-browser wait 1000 # Pause for visibility agent-browser snapshot -i agent-browser fill e1 demoexample.com agent-browser wait 500 agent-browser fill e2 password agent-browser wait 500 agent-browser click e3 agent-browser wait --load networkidle agent-browser wait 1000 # Show result agent-browser record stop这里用到了两类等待wait ms固定时长停顿让人眼跟上节奏wait --load networkidle等待网络空闲保证页面真正加载完成后再继续。场景三CI/CD 测试取证在流水线中为 E2E 测试录制视频作为测试产物artifact留存。文件名包含测试名与时间戳无论测试通过与否都保留证据#!/bin/bash # Record E2E test runs for CI artifacts TEST_NAME${1:-e2e-test} RECORDING_DIR./test-recordings mkdir -p $RECORDING_DIR agent-browser record start $RECORDING_DIR/$TEST_NAME-$(date %s).webm # Run test if run_e2e_test; then echo Test passed else echo Test failed - recording saved fi agent-browser record stop最佳实践1. 为可读性插入停顿录制是给人看的操作间隙加入wait能显著提升回放体验# Slow down for human viewing agent-browser click e1 agent-browser wait 500 # Let viewer see result2. 使用描述性文件名录制文件按上下文-场景-日期命名便于归档与检索# Include context in filename agent-browser record start ./recordings/login-flow-2024-01-15.webm agent-browser record start ./recordings/checkout-test-run-42.webm3. 错误场景下的兜底清理在脚本开头注册trap即使自动化中途失败也能保证录制停止、浏览器关闭不留下残留进程与未写完的视频文件#!/bin/bash set -e cleanup() { agent-browser record stop 2/dev/null || true agent-browser close 2/dev/null || true } trap cleanup EXIT agent-browser record start ./automation.webm # ... automation steps ...|| true保证record stop/close在未启动录制或已关闭时也不会触发set -e提前退出。4. 与截图结合使用视频用于过程回溯截图用于关键帧快照。二者结合可以在文档中同时提供视频与静态图# Record video AND capture key frames agent-browser record start ./flow.webm agent-browser open https://example.com agent-browser screenshot ./screenshots/step1-homepage.png agent-browser click e1 agent-browser screenshot ./screenshots/step2-after-click.png agent-browser record stop输出格式默认格式WebMVP8/VP9 编码与所有现代浏览器和主流视频播放器兼容在保持较高画质的同时做了压缩处理体积可控。WebM 是 Chromium 原生支持的容器格式这也是录制不依赖额外转码工具、开箱即用的原因。已知限制录制会给自动化带来少量额外开销内存与 I/O长时间的录制会占用可观的磁盘空间建议控制单次录制时长、及时归档清理部分无头headless环境可能存在编解码器限制导致录制不可用或异常此时应优先考虑有图形环境的 runner。延伸ZCode 内置浏览器IAB的录制方案对照除agent-browserCLI 外ZCode 桌面端还内置了另一套浏览器自动化录制能力实现在 browser-use-plugin 的Tab.recordingAPI 中。两者同为 WebM 输出但实现与用法差异明显可作为理解视频录制这一主题的横向参考录制对象Tab.recording直接录制受控 IABIn-App Browser标签页的现有 WebView不额外启动 Playwright 或新的 Chromium 进程异步与跨内核录制 API 是异步的可跨多个全新的node_repl内核继续——先tab.recording.start(...)拿到job.id之后在新的js调用中恢复目标 tab轮询tab.recording.status(recordingId, { outputPath: recordings/demo.webm })仅在completed状态且携带artifact.path时才产出可交付的 WebM 文件动作 DSL录制脚本由受限的纯数据动作组成wait、click、type、hover、move、scroll、scrollTo、wheel、drag、waitFor不允许在录制动作中注入页面代码选择器需取自最新 DOM 快照坐标仅用于视觉可验证的 canvas/自定义控件单个 tab 同时只能有一个活跃录制硬性时长上限为 90 秒实现机制录制期间保持隐藏的 IAB 渲染表面存活最终化 WebM 流前释放底层使用 Electron 内置的 ChromiumMediaRecorder不需要 FFmpeg 或应用 PATH 上的任何可执行程序。两套方案的选择建议在终端/CI 脚本中做外部网站自动化并需要录制取证时用agent-browser record start/stop/restart本文主体在 ZCode 桌面应用内部驱动受控 IAB 并需要跨内核长任务录制时用Tab.recording。更完整的命令清单见 commands.md快速上手见 SKILL.md仓库还提供了可直接运行的 capture-workflow.sh 捕获模板截图 结构 文本 PDF 四件套可作为录制工作流的配套参考。赞分享【免费下载链接】ZCodeZ.ais coding agent harness. Powerful, intelligent, extensible.项目地址https://gitcode.com/gh_mirrors/zco/ZCode点击查看免费下载相关推荐agent-browser 视频录制实战指南用 WebM 录像为浏览器自动化提供可追溯的调试与验证证据agent browser 视频录制实战指南用 WebM 录像为浏览器自动化提供可追溯的调试与验证证据 agent browser 是当前仓库中随 AI Ag工作流自动化低代码AI 应用人工智能AI AgentMCP 服务后端前端agent-browser 浏览器自动化视频录制完全指南调试、文档与 CI/CD 证据采集agent browser 浏览器自动化视频录制完全指南调试、文档与 CI/CD 证据采集 本指南围绕当前仓库中 Claude 技能 agent browse人工智能AI 应用后端前端agent-browser 视频录制实战指南为浏览器自动化调试、文档演示与 CI 留证agent browser 视频录制实战指南为浏览器自动化调试、文档演示与 CI 留证 agent browser 是面向 AI Agent 的浏览器自动化人工智能大模型微调模型评测本地部署模型推理服务LLMOps前端后端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
