手动操作浏览器实战：用browser-harness像人类一样写文章

本文记录了一次完全模拟人类手动操作的浏览器自动化实战。与之前使用REST API直接创建文章不同，这次我们用browser-harness的CDP能力，像真人一样点击标题框、键盘输入文字、按回车创建段落、用Markdown快捷方式生成标题，最终点击发布按钮完成发文。

一、为什么选择手动操作方式

在前面的文章中，我们尝试了三种方式操作WordPress：Hermes内置浏览器因代理问题超时；browser-harness的Gutenberg data API因WordPress 6.7兼容性问题失败；最终用REST API成功发布。但这些都是程序员的解决思路——找到API直接调用。这次我们要换一种思路：完全模拟人类的操作方式，用鼠标点击、键盘输入、快捷键来完成任务。

这种方式的优点是所见即所得，不依赖API，不依赖框架内部数据结构，只要人类能操作的页面，自动化也能操作。缺点是速度较慢，且需要精确处理焦点切换和键盘事件。

二、操作过程详解

第一步是导航到写文章页面。用new_tab打开wp-admin/post-new.php，Gutenberg编辑器自动加载，页面包含一个标题输入框和一个空段落块。

第二步是输入标题。通过getBoundingClientRect获取标题框坐标，用click_at_xy点击中心点，焦点落到H1元素上。然后用CDP的Input.insertText输入中文标题。这里选择insertText而不是dispatchKeyEvent，因为中文输入法的事件序列非常复杂，insertText直接插入最终文本，绕过了输入法引擎。

第三步是切换到正文。按Tab键，焦点从标题H1移动到第一个段落P块。Gutenberg的编辑区是contentEditable的div，每个段落是一个独立的P块。

第四步是输入正文内容。每输入一段文字后按两次回车：第一次回车创建新段落块，第二次回车确保焦点在新的空块上。Gutenberg支持Markdown快捷方式：输入## 空格自动转为H2标题块，输入### 空格转为H3标题块。

三、CDP键盘事件 vs Playwright输入

browser-harness使用CDP的Input域来模拟键盘操作。Input.insertText用于插入文本（特别是中文），Input.dispatchKeyEvent用于按键（Enter、Tab等）。这种方式直接与Chrome的输入管道交互，兼容性最好。Playwright的page.type()底层也是用CDP Input事件，但封装了更多逻辑。browser_harness暴露的cdp()函数让我们可以直接调用底层CDP方法，灵活性更高。

四、与REST API方式的对比

REST API方式：通过CDP获取cookie和nonce，用curl调用wp-json/wp/v2/posts，一步到位创建并发布文章。速度快，不依赖UI，但需要理解WordPress REST API。

手动操作方式：模拟人类点击和输入，所见即所得。速度较慢，但更直观，不需要了解API，任何人类能操作的页面都能自动化。特别适合不提供API的网站，或者API文档不完善的场景。

五、总结

这次实战证明了browser-harness不仅能用API走捷径，也能像人类一样操作浏览器。CDP的Input.insertText完美解决了中文输入问题，Markdown快捷方式让格式化变得简单。整个过程中没有调用任何WordPress API，纯靠UI操作完成了文章的撰写。

三种浏览器自动化工具各有擅长场景：Hermes内置浏览器适合简单的无代理交互，browser-harness适合需要精细控制的复杂操作（包括API和UI两种路径），Chrome DevTools MCP适合开发调试场景。本文的发布过程本身就是browser-harness灵活性的最佳证明。