用 CDP 协议做浏览器自动化：从连接、抓包到表单提交的工程实践

背景

日常开发和运维中，很多操作需要在浏览器里完成：查询平台数据、提交表单、跟踪任务进度。传统方案（Selenium/Playwright）需要额外安装驱动、启动独立浏览器实例，登录态还要单独维护。Chrome DevTools Protocol（CDP）提供了另一条路径：直接连接一个已运行的浏览器调试端口，复用它的登录态和环境，用 HTTP/WebSocket 驱动页面。

基础连接

启动带调试端口的浏览器（务必使用独立的用户数据目录，否则新版 Chromium 会忽略调试端口）。Python 侧只需 websocket-client 即可驱动：读取 9222 端口的 json/list 拿到页面列表，连接 webSocketDebuggerUrl，发送 Runtime.evaluate 即可在页面里执行任意表达式。

三个实战要点

1. 真实输入 vs JS 赋值。现代前端框架通过事件系统感知输入。直接给 element.value 赋值不会触发框架的响应式更新，表单校验会认为字段为空、提交按钮保持禁用。正确做法是发送浏览器层的真实输入事件，例如 Input.insertText，它会触发完整的 input 事件链。

2. 富文本编辑器的写入。这类编辑器通常运行在 iframe 内（如 TinyMCE）或用 contenteditable 实现。TinyMCE 需要先点击编辑区再输入；CodeMirror 则推荐 document.execCommand 的 insertText 方式，走编辑器自己的事务系统，兼容性最好。

3. 网络抓包定位接口。比模拟 UI 点击更稳定的方式是直接调用后端接口。开启 Network domain 收集请求，或在页面上下文里用 fetch 请求同源接口，自动携带 Cookie 且无跨域问题。UI 只是接口的封装，抓到接口后就可以脱离页面做批处理。

常见坑

扩展干扰：某些浏览器扩展会让重载后的单页应用卡在 loading 状态（主文档返回 200 但页面不解析），调试专用实例建议禁用扩展。

隐藏必选项：表单里如果存在隐藏的必选勾选框，前端会直接拦截提交且不发送任何请求，表现为按钮灰色、点击无反应。

懒加载 Cookie：浏览器对 Cookie 采用按需加载策略，连接后需要先导航到目标域再读取。

小结

CDP 的核心价值在于复用真实的浏览器环境：登录态、扩展、指纹全部保留，适合需要以登录用户身份执行的低频自动化任务。