浏览器自动化演进:从 Playwright 到 PageAgent
摘要:浏览器自动化正在经历从"脚本执行"到"智能代理"的范式转移。阿里开源的 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 感知层 -> LLM 决策层 -> 执行层
- 感知层:DOM 树文本化、Accessibility Tree 解析、(可选)视觉截图
- 决策层:理解页面结构、规划操作序列、生成执行代码
- 执行层:调用页面 JS 实例、模拟用户交互、观察反馈并自我修正


