问题：头条号发文为什么不能一个脚本搞定

头条号后台用的是ProseMirror编辑器，标题是textarea，正文是contenteditable div——看起来跟普通网页没区别，CDP（Chrome DevTools Protocol）应该一把梭对吧？

我们一开始也是这么想的。结果4篇文章，从81分钟干到9分钟，中间踩了三个大坑：ProseMirror的insertHTML不触发自动保存、React checkbox用CDP怎么都勾不上、发布后草稿箱还留着残留草稿。

每一个坑都不是"调试一下就好了"那么简单，而是需要换一种完全不同的技术方案。今天把这三个坑的底层原因和解决思路全写出来，如果你也在做浏览器自动化，这些弯路你不用再走了。

CDP能做什么，做不了什么

先说CDP能搞定的部分：

• 打开编辑器页面：CDP Page.navigate
• 注入标题：CDP Runtime.evaluate + textarea.value赋值 + input事件派发
• 写入正文HTML：ProseMirror的view.dispatch + insertHTML命令
• 上传配图：CDP DOM.querySelector找到file input + Input.dispatchKeyEvent触发文件选择
• 设置三图封面：CDP点击"从图片库选择"→选图→裁切确认
• 保存草稿：CDP点击"存草稿"按钮

看起来很完美？问题出在两个地方。

第一个问题：insertHTML不触发auto-save。ProseMirror的auto-save机制监听的是用户输入事件（keydown/keyup/input），而insertHTML是程序化注入，绕过了事件流。所以你写入正文后，编辑器认为"什么都没改"，草稿不会自动保存。解决方法：写入后手动派发一个input事件。

第二个问题：React checkbox。这个才是真正的拦路虎。

React Checkbox：CDP的盲区

头条号要求勾选"头条首发"和"引用AI"两个checkbox。看起来简单——找到input元素，CDP .click()一下就完了？

实际上这些checkbox是React组件，渲染结构是这样的：

• 一个hidden input（type="checkbox"，display:none）
• 一个label元素（视觉上看到的勾选框）
• label::before伪元素（显示勾选标记）
• 状态由React Fiber管理，不在DOM上

我们试了所有CDP方案：

• CDP .click()：点击了DOM元素，但React状态没变
• __reactProps$.onChange()：直接调用React事件处理函数，但状态没更新
• Input.dispatchMouseEvent：模拟鼠标点击，同样无法穿透React事件系统
• label.click()：点击label触发change事件，DOM变了但React状态没变

所有CDP方案都失败了，根本原因是：CDP操作的是DOM，而React管理的是Virtual DOM + Fiber状态树。两者之间有一层React的事件委托和状态调度机制，CDP的DOM操作无法穿透这层机制。

agent-browser（Playwright）为什么能解决

最终解决方案是agent-browser，它底层基于Playwright。关键区别：Playwright的click/check操作走的是浏览器的输入事件管道，经过浏览器的渲染进程、React的事件委托系统、最终到达React Fiber的状态管理。而CDP的DOM操作跳过了浏览器的输入事件管道，直接操作DOM节点。

简单说：CDP是从"内部"改DOM，Playwright是从"外部"模拟用户。React的设计是响应"用户操作"而不是"DOM变更"，所以只有模拟用户操作才能触发React的状态更新。

实际操作命令：

• agent-browser snapshot -i：获取页面元素快照
• agent-browser check @ref_xxx：勾选checkbox
• agent-browser find text "引用AI" click：语义定位点击

5分钟解决，之前用CDP试了2个小时。

81分钟→9分钟，每一步优化了什么

第1篇：81分钟——全手动+踩坑。配图上传找不到正确入口、封面走错入口、checkbox不知道要用agent-browser。

第2篇：22分钟——主流程走通了，配图上传还需手动确认、封面操作不熟练。

第3篇：14分钟——配图流程标准化，三图封面自动提取。

第4篇：9分钟——checkbox改用agent-browser后零返工，流程完全固化。

效率提升的核心不是模型能力，而是SOP的成熟度。每一轮迭代都是在解决一个具体的失败模式。

草稿箱残留：一个被忽略的坑

头条号有个机制：文章发布后，草稿箱里的对应草稿不会自动删除。解决方案：每次发布后，手动进草稿箱清理。我们已经把这个步骤写进了SOP的第10步。

SOP三件套：可复用的方法论

4篇文章踩完坑后，我们把所有经验沉淀成了一套SOP三件套：

• SOP文档：10步标准流程，每一步都有明确的操作命令和验证标准
• 上岗考核：25道题，铁律题错1题淘汰
• 故障排查表：常见错误码+解决方案，遇到问题直接查表

这套方法论不是头条号独有的。微信公众号和微博全自动发文Skill，都采用了同样的SOP三件套结构。核心思路：踩过的坑不能白踩，必须变成制度。

三个Skill已上架扣子技能商店，搜索"头条号全自动发文""微信公众号全自动发文""微博全自动发文"即可安装。

---

杭州法喜品牌设计有限公司 | 国家高新技术企业 | 400-888-4860 | faxide.com

本文由AI辅助创作