浏览器自动化技术演进：从脚本执行到智能代理
浏览器自动化正在经历从'机械执行'到'智能理解'的范式转移。阿里开源的 PageAgent 让 AI'住进'网页，但面对现代富文本编辑器的复杂结构，纯 DOM 自动化为何频频碰壁？本文深度解析技术演进与实战破局方案。
01 技术演进：三代浏览器自动化方案对比
| 方案 | 核心原理 | 优势 | 局限 |
|---|---|---|---|
| Playwright/Selenium | 基于 DOM 选择器 + 预定义指令 | 稳定、成熟、生态完善 | 页面结构变化即失效，无法理解语义 |
| PageAgent | LLM + 页面内嵌 JS 框架 | 自然语言交互、纯前端、免部署 | 依赖 LLM、Token 成本 |
| OCBot | 视觉识别 + 多模态理解 | 不依赖 DOM 结构、鲁棒性强 | 计算资源消耗大、推理速度慢 |
关键差异
传统方案（Playwright） 像是一个'盲眼执行者'——它能精准点击坐标，但不知道点击的是什么。
PageAgent 则像是一个'住在你网页里的智能助手'——它理解页面语义，能用自然语言对话，自主规划操作路径。
OCBot 更像是'视觉驱动的操作员'——通过截图和图像识别来定位元素，不依赖 DOM 结构。
02 PageAgent 深度解析：浏览器交互的新形态
什么是 PageAgent？
PageAgent 是阿里开源的纯前端 JavaScript GUI 智能体框架，核心理念用一句话概括：
The GUI Agent Living in Your Webpage（住在你网页里的 GUI 智能体）
GitHub 地址：alibaba/page-agent
新载体：标签页/浏览器插件
PageAgent 不再是一个独立的黑盒程序，它化身为两种形态：
- Side Panel（侧边栏）
- 在浏览器一侧常驻
- 实时感知当前标签页内容
- Browser Extension（插件）
- 注入页面上下文
- 直接操作 DOM 或调用页面内部 JS 实例
打破沙箱限制，实现'所见即所得'的辅助。
工作原理
┌─────────────────────────────────────────────────┐
│ 用户自然语言指令 │
│ "帮我把这篇文章发布到目标平台" │
└─────────────────┬───────────────────────────────┘
▼
┌─────────────────────────────────────────────────┐
│ PageAgent 感知层 │
│ • DOM 树文本化 │
│ • Accessibility Tree 解析 │
│ • （可选）视觉截图 │
└─────────────────┬───────────────────────────────┘
▼
┌─────────────────────────────────────────────────┐
│ LLM 决策层 │
│ • 理解页面结构 │
│ • 规划操作序列 │
│ • 生成执行代码 │
└─────────────────┬───────────────────────────────┘
▼
┌─────────────────────────────────────────────────┐
│ 执行层 │
│ • 调用页面 JS 实例 │
│ • 模拟用户交互 │
│ • 观察反馈并自我修正 │
└─────────────────────────────────────────────────┘
核心优势
| 特性 | 传统方案 | PageAgent |
|---|---|---|
| 部署方式 | 需配服务器/无头浏览器 | 一行 script 标签 |
| 交互方式 | 编写代码 | 自然语言对话 |
| DOM 依赖 | 强依赖选择器 | 语义理解 + 实例调用 |
| 视觉识别 | 不支持 | 可选（但推荐跳过 OCR 省 Token） |
03 实战痛点：当 PageAgent 遇上'顽固'编辑器
在实际落地博客自动撰写的过程中，我们发现：纯基于 DOM 的自动化方案，在现代富文本编辑器面前失效了。
痛点一：特定博客系统的'换行消失术'
现象：PageAgent 成功将 Markdown 文本填入编辑器，但发布预览后，段落粘连，标题失效。
原因分析：
- 渲染引擎对空行极度敏感
- LLM 生成的 Markdown 字符串往往为了节省 Token 压缩了换行符
- 标准 Markdown 要求段落间必须有
\n\n，但直接通过 DOMinnerText赋值往往丢失这些格式控制符
解决方案：
// Markdown 格式化清洗函数
function fixMarkdown(text) {
let content = text;
// 标题前后加空行
content = content.replace(/([^\n])(#{1,6}\s)/g, '$1\n\n$2');
// 代码块前后加空行
content = content.replace(/([^\n])(```)/g, '$1\n\n$2');
// 合并多余空行
content = content.replace(/\n{3,}/g, '\n\n');
return content;
}
💡 关键点：必须在注入前增加一层
