WebdriverIO DevTools Session Screencast 指南用 CDP / BiDi 将浏览器会话自动录制为 WebM 视频【免费下载链接】webdriverioNext-gen browser and mobile automation test framework for Node.js项目地址: https://gitcode.com/GitHub_Trending/we/webdriverio导读Screencast会话录屏是 WebdriverIO DevTools 服务提供的自动化测试录像能力它把整个浏览器测试会话录制为.webm视频并呈现在 DevTools UI 面板中与快照snapshot和 DOM 变更视图并排展示帮助你在回放测试时直观看到每一步的页面真实状态。读完本文你将掌握如何在wdio.conf.ts中开启并调优录屏参数、理解 Chrome 与 Firefox/Safari 两种录制模式的底层差异、知道录制文件落在哪里以及如何命名并了解它与 Trace 模式trace.zip的关系。概述什么是 Session ScreencastScreencast 把一次完整的浏览器测试会话录制为.webm视频文件。录制得到的视频会显示在 DevTools UI 界面中与快照视图、DOM 变更视图并列展示方便你回放整个测试执行的视觉过程——这是调试「测试断言通过但页面看起来不对」这类问题的利器。该能力横跨全部三个适配器WebdriverIO、Selenium WebDriver和Nightwatch.js。不同框架的**采集模式capture mode**不同支持 CDP 的浏览器使用高效的「推送式」采集其余浏览器则退化为「轮询式」截图采集详见下文「浏览器支持」。前置准备安装 ffmpeg 与 fluent-ffmpegScreencast 的.webm编码依赖两个外部组件ffmpeg必须出现在PATH中与 npm 包fluent-ffmpeg# 安装 ffmpeg参考 https://ffmpeg.org/download.html brew install ffmpeg # macOS sudo apt install ffmpeg # Ubuntu/Debian # 安装 fluent-ffmpeg npm install fluent-ffmpeg安装 DevTools 服务本体则与普通服务一致在 WebdriverIO 侧使用 wdio/devtools-servicenpm install wdio/devtools-service --save-dev配置在 wdio.conf.ts 中开启录屏在 WebdriverIO 测试运行器配置中把devtools以「服务 选项」的数组形式加入services并在screencast子对象中开启录制// wdio.conf.ts export const config { services: [ [ devtools, { screencast: { enabled: true, captureFormat: jpeg, quality: 70, maxWidth: 1280, maxHeight: 720, } } ] ] }从配置参考文档看screencast选项的默认值是{ enabled: false }——即默认不录制必须显式开启。选项名称、类型与默认值在三个适配器上完全一致只是传参方式不同WebdriverIO 用services: [[devtools, { … }]]Selenium 用DevTools.configure({ … })Nightwatch 用globals: nightwatchDevtools({ … })。如果你在独立脚本Standalone中使用 WebdriverIO可以用setupForDevtools包装远程会话配置来启用该服务import { remote } from webdriverio import { setupForDevtools } from wdio/devtools-service const browser await remote(setupForDevtools({ capabilities: { browserName: chrome } })) await browser.url(https://example.com) await browser.deleteSession()选项详解Screencast 全参数对照选项类型默认值说明enabledbooleanfalse是否开启会话录制captureFormatjpeg \| pngjpeg帧图像格式。仅 Chrome/Chromium 生效——它控制 Chrome 通过 CDP 发送的帧格式在轮询模式下Firefox、Safari被忽略截图始终是 PNG。该选项不影响输出视频容器输出始终为.webmqualitynumber70JPEG 压缩质量0-100。仅在 Chrome/Chromium CDP 模式且captureFormat: jpeg时生效maxWidthnumber1280帧最大宽度像素。仅 Chrome/Chromium 生效——Chrome 在通过 CDP 发送前会缩放帧轮询模式下忽略maxHeightnumber720帧最大高度像素。同上仅 CDP 模式生效pollIntervalMsnumber200非 Chrome 浏览器的截图间隔毫秒轮询模式。值越小视频越流畅但测试执行期间会有更多 WebDriver 往返请求需要特别理解的三点captureFormat与quality只影响 CDP 模式的帧压缩它们决定了「Chrome 把什么样的帧数据推给录制器」而不改变最终.webm容器格式。PNG 帧无损但体积更大JPEG 有损但显著减小带宽与内存占用——在长会话录制中通常优先选jpeg。maxWidth/maxHeight是 CDP 模式的传输前缩放。Chrome 先把页面帧缩放到该尺寸再推送给录制端能大幅降低网络/内存开销轮询模式下由浏览器原生截图输出缩放不生效。pollIntervalMs是轮询模式的性能旋钮。间隔越小视频越顺滑但每次轮询都是一次takeScreenshot()WebDriver 往返会叠加到测试执行耗时上——需要在视频质量与测试开销之间取平衡。此外还有一个 Trace 模式专用的screencast.maxBufferFrames默认 2000它约束了录制缓冲的帧数上限见下文「与 Trace 模式的关系」。浏览器支持CDP 推送 vs BiDi 轮询录制通过自动模式选择覆盖所有主流浏览器无需手动切换浏览器模式说明Chrome / Chromium / EdgeCDP pushChrome 通过 DevTools 协议主动推送帧。高效对测试命令时序零影响Firefox / Safari / 其他BiDi polling退化为按pollIntervalMs间隔调用browser.takeScreenshot()。凡支持 WebDriver 截图的环境均可工作代价是带来与间隔成比例的小额开销切换模式不需要任何配置变更——服务会自动探测浏览器 capabilities 并选择模式同时会在日志中输出当前激活的模式方便你确认走了哪条路径。从协议层看WebDriver BiDi 规范本身提供了原生的录屏命令。在仓库的 WebDriver BiDi 协议定义 中可以看到browsingContext.startScreencast参数含context、mimeType、video、audio返回{ screencast, path }与browsingContext.stopScreencast返回{ path, error? }两条命令——可以推断未来轮询模式具备向协议级录屏演进的通道而当前实现则基于takeScreenshot轮询以最大化浏览器兼容性。行为细节录制生命周期录制随会话启停浏览器会话一打开即开始录制会话关闭即停止。自动裁剪前导空白帧在首次 URL 导航之前捕获的空白帧会被自动剔除因此视频从第一个有意义的页面动作开始不会出现一段黑屏/白屏开头。browser.reloadSession()的处理如果在运行中途调用browser.reloadSession()服务会先结束当前录制再为新会话开启一段全新录制。每个会话各产生一个独立的.webm文件。多段录制的切换当存在多段录制时DevTools UI 会显示Recording N下拉框供你在各段视频之间切换查看。输出文件存放目录与命名规则存放目录三个适配器选择的输出目录略有差异——它们共享wdio/devtools-core中的同一个路径解析器只是喂给它不同的输入适配器输出位置WebdriverIOwdio.conf.ts中显式设置了outputDir则用outputDir否则用rootDir配置文件所在目录。注意不要仅仅为了控制视频路径而设置outputDir——WDIO 也会把 worker 日志重定向到那里Selenium刚刚运行的那个测试文件所在目录回退到process.cwd()Nightwatch测试文件所在目录依次回退到nightwatch.conf.*所在目录再回退到process.cwd()在 Selenium/Nightwatch 路径上位于node_modules/下的目录会被跳过这样通过 symlink 挂载的 workspace 不会把视频误写入某个依赖包文件夹。命名规则Live 模式通过 WebSocket 把采集到的数据流式传输到仪表盘不会向磁盘写入 trace 文件——需要可移植的产物时请使用 Trace 模式产出trace.zip。Live 模式唯一会落盘的文件就是录屏视频且仅当screencast.enabled: true时写入。文件名与适配器相关框架名会出现在前缀中适配器录屏视频文件WebdriverIOwdio-video-{sessionId}.webmSeleniumselenium-video-{sessionId}.webmNightwatchnightwatch-video-{sessionId}.webm与 Trace 模式的关系Screencast 是Live 模式下的连续视频录制在 Trace 模式mode: trace下行为有所不同需要区分清楚Trace 模式忽略screencast.enabled据 Trace 模式限制文档Trace 模式下连续.webm录制被忽略会打印一条警告。Trace 模式默认改为把**密集连续帧dense filmstrip**写进归档方便播放器平滑拖动设置filmstrip: false则退化为每动作一帧。录制器是同一个Screencast 的调优字段quality、maxWidth、pollIntervalMs等在 Trace 模式下依然作用于实际运行的录制器CDP 推送或截图轮询。每测试视频切片在traceGranularity: test下Trace 模式还支持按tracePolicy保留语义产出每测试一个的视频切片video选项WebM 格式且设置video非off后录制器会自行启动无需再同时开启filmstrip或screencast.enabled。详见 Trace 模式文档。缓冲上限Trace 模式下的密集 filmstrip 录制缓冲受screencast.maxBufferFrames默认 2000约束导出时帧会被抽稀≥100ms 一帧并做内容寻址完全相同的帧如静态等待会合并为同一资源。关于 Live 模式的记录旧的wdio-trace-sessionId.json整包 JSON 转储已被彻底移除——Live 模式现在只向仪表盘流式传输、不落盘任何 trace 文件trace.zip是唯一的 trace 产物。小结Session Screencast 用一条「前置 ffmpeg 一个screencast配置块」的低成本路径为 WebdriverIO / Selenium / Nightwatch 三种框架提供了统一的浏览器会话.webm录制能力Chrome 系走 CDP 推送获得零开销的高效采集Firefox/Safari 自动退化到轮询截图enabled、captureFormat、quality、maxWidth、maxHeight、pollIntervalMs六个参数组合即可精确控制画质、尺寸与开销。理解录制生命周期会话启停、空白帧裁剪、reloadSession分段与文件落点各适配器目录与wdio-video-{sessionId}.webm命名再结合 Trace 模式的 filmstrip 与每测试视频切片即可把「录屏调试」从临时手段升级为可落盘、可归档、可在 CI 中回放的工程化能力。【免费下载链接】webdriverioNext-gen browser and mobile automation test framework for Node.js项目地址: https://gitcode.com/GitHub_Trending/we/webdriverio创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考