浏览器自动化新范式：从 Playwright 到 PageAgent
摘要：浏览器自动化正在经历从'脚本执行'到'智能代理'的范式转移。阿里开源的 PageAgent 让 AI'住进'网页，但面对现代富文本编辑器的黑盒机制，纯 DOM 自动化为何频频碰壁？本文深度解析技术演进与实战破局方案。
技术演进：三代浏览器自动化方案对比
浏览器自动化技术，正在经历一场从'机械执行'到'智能理解'的革命。
| 方案 | 核心原理 | 优势 | 局限 |
|---|---|---|---|
| Playwright/Selenium | 基于 DOM 选择器 + 预定义指令 | 稳定、成熟、生态完善 | 页面结构变化即失效，无法理解语义 |
| PageAgent | LLM + 页面内嵌 JS 框架 | 自然语言交互、纯前端、免部署 | 依赖 LLM、Token 成本 |
| OCBot | 视觉识别 + 多模态理解 | 不依赖 DOM 结构、鲁棒性强 | 计算资源消耗大、推理速度慢 |
关键差异
传统方案（Playwright）像是一个'盲眼执行者'——它能精准点击坐标，但不知道点击的是什么。
PageAgent 则像是一个'住在你网页里的智能助手'——它理解页面语义，能用自然语言对话，自主规划操作路径。
OCBot 更像是'视觉驱动的操作员'——通过截图和图像识别来定位元素，不依赖 DOM 结构。
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 实例 │
│ • 模拟用户交互 │
│ • 观察反馈并自我修正 │
└─────────────────────────────────────────────────┘
