title: "浏览器自动化的竞争维度变了：有人在截图识图，有人在让 AI 直接读懂网页骨架" description: "阿里开源 Page Agent，20K+ Star，一行代码让 AI 住进网页——不用截图、不用 Python、不用浏览器扩展，直接读 DOM 操作界面。但轻量的代价是什么？" tags: ["AI Agent", "Page Agent", "阿里巴巴", "浏览器自动化", "DOM", "开源"]

浏览器自动化的竞争维度变了：有人在截图识图，有人在让 AI 直接读懂网页骨架

如果你花过 200 行 Playwright 代码去点一个按钮，你会理解一种深深的荒谬感——明明你的眼睛 0.1 秒就能找到那个按钮，AI 却要先截图、再 OCR、再定位，最后还点歪了。

上周，阿里巴巴开源的 Page Agent 在 GitHub 冲上 20K+ Star。它做了一件反直觉的事：不用截图，不用多模态模型，直接让 AI 读网页的"骨架"——DOM。

这不是又一个浏览器自动化工具。这是一个范式选择：AI 操控网页，到底是该"看图"，还是该"读代码"？

一行代码的魔法

Page Agent 的接入方式简单到离谱。在你的网页里加一行 script：

<script src="https://cdn.jsdelivr.net/npm/page-agent@1.8.0/dist/iife/page-agent.demo.js"></script>

页面右上角就出现一个 AI 控制面板。你用自然语言下达指令——"帮我把表单里的公司名改成阿里巴巴"、"找到三月的发票并下载PDF"——AI 就开始自动点击、填写、跳转。

如果你是开发者，npm 安装也很直接：

import { PageAgent } from 'page-agent';

const agent = new PageAgent({
  model: 'qwen3.5-plus',
  baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
  apiKey: process.env.YOUR_API_KEY
});

await agent.execute('找到最近的订单并导出');

它支持 OpenAI、Claude、DeepSeek、Qwen、Gemini、Grok、Ollama、Kimi、GLM——市面上主流大模型几乎一网打尽。官方 Demo 甚至提供了免费的 Qwen 3.5 Plus 接口，零成本试用。

为什么不用截图？这才是关键

Page Agent 最核心的架构决策是：不用截图，不用视觉模型，直接处理 DOM 文本。

这个选择在 2026 年看起来很反直觉。多模态大模型满天飞的时代，谁还在用纯文本？

但仔细想想：截图识图这条路，从一开始就有致命缺陷——

第一，截图是信息的有损压缩。 一个按钮的文字、位置、是否禁用，在 DOM 里是精确的结构化数据，到了截图里就变成了像素。AI 还得再用视觉模型"猜"回来，猜错的概率不小。

第二，截图是昂贵的。 每次操作前截一张图，送进多模态模型，Token 消耗是纯文本的几十倍。你让 AI 连续操作 20 步，光截图的 Token 费就够你心疼半天。

第三，截图是脆弱的。 网页换个深色模式、调一下布局、换张背景图，视觉模型可能就懵了。但 DOM 结构没变，Page Agent 完全不受影响。

Page Agent 把 DOM 结构"脱水"成极轻量的文本映射——类似屏幕阅读器的工作方式。模型收到的不是一张图，而是一棵干净的文本树：这里有按钮、那里有输入框、这个下拉菜单有三个选项。轻量、精准、不怕样式变动。

官方数据显示，通过智能工具按需加载（而非一次性加载所有工具），Token 消耗降低了 **99%**。

和 Playwright、browser-use 到底什么区别？

很多人第一反应是：这不就是 Playwright 吗？不完全是。

关键区别在于：Playwright 和 browser-use 是从外部控制浏览器，Page Agent 是从内部操控网页。

打个比方：Playwright 是坐在车外用遥控器开车，browser-use 是用无人机俯瞰着开车，而 Page Agent 是直接坐在驾驶座上——它就在车里。

真实场景：它到底能干什么？

智能表单填写。 自动识别表单字段，根据指令智能填写。HR 系统批量录入、CMS 内容发布，这种重复性填表工作，一句话搞定。

SaaS AI 副驾驶。 给你的 SaaS 产品加一个 AI 助手。用户说"帮我导出上个月的报表"，AI 自动在界面上点完整个操作流程。

无障碍增强。 视障用户可以用自然语言操控网页，不用依赖键盘和鼠标的精确操作。

多页面任务控制。 配合 Chrome 扩展，AI 可以跨页面完成复杂流程——比如先在 A 页面查数据，再到 B 页面提交。

代价清醒：轻量的背面

说到这里，你可能已经想打开 GitHub 了。但等等——

纯文本 DOM 有天然盲区。 靠颜色传达的状态（灰色禁用按钮）、靠图标表达的功能、靠布局暗示的层级关系——这些视觉信息在 DOM 脱水后全部丢失。一个纯图标按钮在 DOM 里可能就一个 <button></button>，AI 根本不知道它干什么。

单页边界是硬伤。 不装 Chrome 扩展，Agent 只能操作当前页面。想跨页面？对不起，得装扩展。这对"一行代码"的极简承诺是个折扣。

复杂页面容易翻车。 CSDN 的换行陷阱、掘金的 CodeMirror 编辑器——这类高度定制的 UI 组件，DOM 结构异常复杂，Page Agent 处理起来并不顺利。社区反馈：复杂场景下错误率不低。

安全边界需要人工把关。 Page Agent 内置了确认面板（Human-in-the-loop），执行高风险操作前需要用户确认。但这恰恰说明——它还不够可靠到让你完全放手。你还得盯着。

免费 Demo 的隐含成本。 官方 Demo 用的是免费的 Qwen 3.5 Plus，但仅供技术评估。生产环境你需要自带 API Key，Token 费用取决于你选的模型和操作频次。如果每步操作都要过一遍大模型，一个复杂流程跑下来，Token 费也不便宜。

趋势判断：AI 和网页的关系，正在从"旁观"变成"入住"

Page Agent 的真正意义，不是它有多强，而是它代表的方向——AI 正在从网页的"观察者"变成"居民"。

传统方案里，AI 永远在网页外面：要么截图看，要么用协议控。Page Agent 把 AI 嵌进了网页本身。这意味着：

• 对 Web 开发者：你不再是 Agent 时代的被动方。你可以主动在自己的产品里植入 AI 能力，而不是等外部工具来"控制"你的页面。
• 对 SaaS 创业者：给产品加 AI Copilot 的门槛从"重写后端"降到了"一行代码"。
• 对前端测试：自然语言写测试用例不再是梦——虽然现在还不够稳定，但方向已经清晰。

当然，今天的 Page Agent 还远不完美。DOM 脱水丢视觉信息、单页边界、复杂组件翻车——这些都是真实存在的短板。但它提出了一个正确的方向性问题：

AI 操控网页的最优解，到底是让 AI 更会"看图"，还是让网页更会被"读懂"？

如果你的答案是后者，Page Agent 值得你花一个小时试试。

项目地址：https://github.com/alibaba/page-agent 在线体验：https://alibaba.github.io/page-agent/