AI 操控网页一直是个老大难问题。
不是没有工具——Selenium、Playwright、Puppeteer 这些方案用了十几年了。但它们有个共同的痛点：你得写选择器。#submit-btn、.form-input[name="email"]、xpath://div[@class="modal"]……页面一改版，脚本全废。
更麻烦的是，当你想让 AI Agent 去操作网页时，你得先把"点击登录按钮"翻译成机器能懂的定位语言，这中间的鸿沟让很多自动化方案卡在了最后一公里。
阿里开源的 page-agent 换了一个思路：把 Agent 直接嵌进页面里，让它用自然语言理解和操作 UI。
它解决的核心问题
传统 Web 自动化的逻辑是：人写规则 → 机器执行。
你需要提前知道页面结构，写好 CSS 选择器或 XPath，然后脚本按图索骥。这套方案在页面稳定的情况下没问题，但现代 Web 应用迭代快，前端框架动态渲染，DOM 结构随时在变，维护成本极高。
page-agent 的逻辑是：人说意图 → Agent 理解 → 自动执行。
你告诉它"找到搜索框，输入'TypeScript'，然后点击第一个结果"，它自己去理解当前页面的 UI 结构，找到对应元素，完成操作。不需要你提前写任何选择器。
in-page 方式：嵌入而非外部控制
这是 page-agent 区别于其他方案的关键设计。
大多数浏览器自动化工具是从外部控制浏览器——通过 WebDriver 协议或 CDP（Chrome DevTools Protocol）发指令给浏览器。这种方式有天然的隔离性，但也意味着 Agent 对页面内部状态的感知是有限的。
page-agent 采用的是 in-page 方式，Agent 代码直接运行在页面上下文里。这带来几个优势：
- • 能直接访问页面的 DOM、JavaScript 运行时和组件状态
- • 对动态渲染的内容（React/Vue 组件、Shadow DOM）有更好的感知能力
- • 延迟更低，不需要跨进程通信
这种设计更接近"给页面装了一个会思考的助手"，而不是"用遥控器操控浏览器"。
使用方式
page-agent 提供两种接入方式，Chrome 扩展是最快的上手路径，不需要写任何代码。
方式一：Chrome 扩展（推荐新手）
直接安装 Chrome 扩展，打开任意网页后就能用自然语言发指令。不需要配置开发环境，不需要写代码，装完即用。看过程好像基于视觉了，可以自行安装尝试，官方文档有详细的安装和配置步骤：
Chrome 扩展使用文档 →
方式二：npm 集成（适合开发者）
如果你要把 page-agent 集成进自己的项目或自动化流程，通过 npm 安装：
npm install page-agent
基本使用思路（参考官方文档获取准确 API）：
import { PageAgent } from 'page-agent';
// 初始化 Agent，传入 LLM 配置
const agent = new PageAgent({
model: 'qwen3.5-plus',
baseURL: 'https://dashscope.aliyuncs.com/compatible-mode/v1',
apiKey: 'YOUR_API_KEY',
})
// 用自然语言描述操作
await agent.execute('在搜索框中输入 "TypeScript"，然后点击搜索按钮');
await agent.execute('找到价格最低的商品，加入购物车');
具体的初始化参数、支持的 LLM 接入方式、以及更复杂的任务编排，建议查阅 官方文档。
适用场景
自动化测试
写 E2E 测试时，最烦的就是维护选择器。用自然语言描述测试步骤，页面改版后不需要同步修改测试脚本，维护成本大幅降低。
// 传统方式
await page.click('#login-btn');
await page.fill('input[name="username"]', 'testuser');
// 自然语言方式（示意）
await agent.execute('点击登录按钮，在用户名输入框填入 testuser');
RPA 流程自动化
企业内部有大量重复性的网页操作：填表、数据录入、报表导出。这类场景不需要写复杂的自动化脚本，用自然语言描述流程步骤，Agent 自动执行。
AI Agent 工具调用
当你在构建一个更大的 AI Agent 系统时，page-agent 可以作为"操作网页"这个能力的底层工具。Agent 需要查询某个网站的数据、填写某个表单，直接调用 page-agent 完成，不需要为每个网站单独写爬虫或自动化脚本。
无障碍辅助
对于不熟悉复杂 UI 操作的用户，可以通过自然语言指令完成网页操作，降低使用门槛。
和同类方案的对比
| 方案 | 控制方式 | 需要选择器 | 适用场景 |
|---|---|---|---|
| Playwright/Puppeteer | 外部控制浏览器 | 是 | 传统自动化测试 |
| 浏览器扩展方案 | 注入扩展 | 部分需要 | 用户侧辅助 |
| page-agent | in-page 嵌入 | 否 | AI Agent 集成、自然语言自动化 |
Playwright 和 Puppeteer 是成熟的工具，稳定性和生态都很好，但它们的设计目标是"精确控制"，不是"理解意图"。page-agent 的定位是让 AI 理解你想做什么，然后自己找到怎么做。
两者并不完全竞争——复杂的、需要精确控制的自动化场景，传统工具更可靠；需要灵活性、要接入 LLM 的场景，page-agent 更合适。
当前状态
9599 stars，阿里出品，TypeScript 实现，最近更新于 2026 年 3 月。
阿里在 AI Agent 基础设施上投入不少，之前的 OpenSandbox（Agent 沙箱）也是这个方向的布局。page-agent 补上了"Agent 如何操作网页 UI"这个环节，和沙箱、工具调用等组件一起，构成了一套完整的 Agent 运行时能力。
项目用 TypeScript 写，对前端开发者友好，接入成本相对低。如果你在做 AI Agent 相关的产品，或者想把自动化测试从"写选择器"升级到"写自然语言"，值得关注。
GitHub：github.com/alibaba/pag…
有问题欢迎交流
