用自然语言操控网页：阿里 Page Agent 开源背后的技术革新
“点击登录按钮，输入用户名 admin，密码 123456，然后点击提交。"——如果这一句话就能自动完成网页操作，你会怎么想？
阿里巴巴最新开源的 Page Agent 正在让这个愿景成为现实。这是一个用自然语言控制 Web 界面的 JavaScript GUI Agent，单日新增超过 1,200 个 Star。区别于传统自动化脚本的"硬编码"方式，Page Agent 让用户用自然语言描述操作意图，Agent 自动解析并执行网页交互。
更令人惊喜的是——它不需要浏览器扩展、不需要 Python 环境、不需要 headless browser。只需在页面中引入一段 JavaScript，就能让任何网页拥有 AI 驱动的自动化能力。
从"写代码"到"说话”：Page Agent 的核心能力
传统 Web 自动化的门槛不低。想用 Selenium 控制一个网页？你需要：
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://example.com")
driver.find_element("id", "username").send_keys("admin")
driver.find_element("id", "password").send_keys("123456")
driver.find_element("id", "submit").click()
这还只是最基础的操作。遇到动态加载的元素？元素选择器变了？页面结构改版？代码就要重写。而且每增加一个操作，都要写一堆选择器逻辑。
Page Agent 的做法完全不同：
import { PageAgent } from 'page-agent'
const agent = new PageAgent({
model: 'qwen3.5-plus',
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
apiKey: 'YOUR_API_KEY',
})
await agent.execute('登录系统，用户名 admin，密码 123456')
就这么简单。Agent 会自动理解你的意图，分析页面 DOM 结构，找到对应的按钮和输入框，执行操作。页面改版了？选择器变了？没关系，Agent 会重新理解页面，自己找到正确的元素。
技术实现：纯前端方案的优雅与边界
Page Agent 最大的技术特点是完全运行在浏览器端：
文本化 DOM 处理：与需要截图和多模态模型的方案不同，Page Agent 采用纯文本的 DOM 解析。它将页面结构转换为可理解的文本描述，让 LLM 基于文本进行决策。这带来几个好处：
- 成本优势：不需要 GPT-4V 等昂贵多模态模型，普通文本 LLM 即可
- 速度优势：无需图像处理，响应更快
- 隐私优势：不截取屏幕，敏感信息不外泄
安全边界设计：既然代码在页面中运行，安全问题如何保障？Page Agent 采用了多层防护：
- 同源限制：只能操作当前页面，无法跨域访问其他页面数据
- 动作白名单：可配置允许执行的操作类型（点击、输入、滚动等）
- 用户确认机制：敏感操作（如提交表单）可选择需要用户二次确认
可选 Chrome 扩展：对于需要跨页面操作的复杂任务，Page Agent 提供了可选的 Chrome 扩展，支持多标签页协调。但对于大多数单页面自动化场景，纯前端方案已经足够。
与传统自动化工具的横向对比
| 维度 | Selenium/Puppeteer | Playwright | Page Agent |
|---|---|---|---|
| 学习成本 | 中高（需掌握选择器） | 中等 | 低（自然语言） |
| 环境要求 | Python/Node.js + WebDriver | Node.js + 浏览器 | 纯前端 JavaScript |
| 维护成本 | 高（选择器易失效） | 中等 | 低（自适应页面变化） |
| 灵活度 | 极高（完全可控） | 高 | 中等（依赖 LLM 理解） |
| 稳定性 | 中等（依赖选择器稳定性） | 较高 | 依赖模型能力 |
| 适用场景 | 复杂自动化测试、爬虫 | E2E 测试、自动化 | AI Copilot、智能填表 |
核心差异：传统工具是"程序员的自动化工具"，Page Agent 是"产品经理也能用的自动化工具"。前者追求精确控制，后者追求自然交互。
企业应用场景：从 RPA 升级到 AI Agent
SaaS AI Copilot：这是 Page Agent 最直接的应用场景。想在你的 ERP、CRM、后台管理系统中嵌入一个 AI 助手？引入 Page Agent，用户说"帮我把上个月的订单导出成 Excel"，Agent 就能自动完成操作。无需重构后端，无需改造 API。
智能表单填充：ERP、CRM 系统中常见的"20 步操作流程"，可以被浓缩成一句话。“新建一个客户，姓名张三，电话 138xxxx，地址北京朝阳区，标签重点客户”——Agent 自动找到对应输入框并填充。
无障碍访问：对于视障用户、行动不便用户，Page Agent 提供了全新的网页交互方式。语音命令 + Agent 执行，让任何网页都能通过自然语言操作。
自动化测试升级：传统 E2E 测试用例维护成本极高，UI 改版就要重写选择器。用 Page Agent 编写测试用例：“登录 → 点击商品管理 → 搜索关键词 test → 验证结果不为空”，测试用例更接近自然语言，维护成本大幅降低。
技术局限与适用边界
Page Agent 不是传统自动化工具的替代品，有其明确的适用边界：
不适合高精度场景：金融交易、支付确认等需要 100% 精确操作的场景，传统选择器方案更可靠。LLM 的不确定性在这些场景可能是风险。
不适合超大规模自动化：需要同时操作数百个页面的爬虫场景，传统 headless browser 方案效率更高。
依赖 LLM 能力：Page Agent 的表现高度依赖底层模型的理解能力。复杂页面、模糊指令可能导致操作失败。
网络依赖：需要调用 LLM API，离线场景无法使用。虽然可以接入本地模型，但性能和成本需要权衡。
快速上手：三行代码集成
<script src="https://cdn.jsdelivr.net/npm/page-agent/dist/iife/page-agent.demo.js"></script>
<script>
const agent = new PageAgent.demo()
agent.execute('点击页面上的登录按钮')
</script>
官方提供的 Demo CDN 内置了免费测试 API，可以直接体验。生产环境建议接入自己的 LLM API（支持 OpenAI 兼容格式）。
结语：Web 自动化的"自然语言时代"
从命令行到图形界面，从脚本语言到低代码平台——每一次交互范式的革新，都在降低技术门槛，让更多人获得"技术能力"。
Page Agent 的意义，不在于取代 Selenium 或 Playwright，而在于开辟了一条新路径：让非程序员也能定义自动化流程。产品经理可以用自然语言描述业务流程，运营人员可以自己配置数据采集任务，测试工程师可以用更接近人类语言的方式编写测试用例。
代码门槛正在消失。当"说一句话"就能替代"写十行代码"，Web 自动化的边界被重新定义。
这不是技术的终点，而是新起点的开始。自然语言驱动的人机交互，正在从对话走向操作，从理解走向执行。Page Agent 只是这个趋势的一个注脚——但足以让人看到未来。
项目地址：https://github.com/alibaba/page-agent