让AI帮你操作网页——阿里19K星page-agent实测

昨天同事发来一个链接让我帮他查数据——一个政府网站，44个字段的表单，每个月5号必须提交。他每个月手动填一次，填错一个数字就重来，平均花2小时。

我问他：你试过用AI吗？他说试过写Selenium脚本——但那个网站的DOM结构每个月都在变，脚本跑三次就失效了。

page-agent就是做这个的。阿里开源的一个浏览器JavaScript Agent，你用自然语言说"帮我在淘宝搜蓝牙耳机，按销量排序"，它真的帮你点、帮你翻、帮你找。

快速开始

git clone https://github.com/alibaba/page-agent
cd page-agent
npm install && npm run dev

浏览器访问localhost:3000，输入任务，Agent开始操作。

能做什么

• 自动填表（同一网站登录信息自动填）
• 数据采集（翻页、提取数据、导出CSV）
• 流程自动化（"每个月5号登录XX系统下载上月报表"）
• 表单测试（自动填充100种边界情况测试表单）

踩坑实录

坑1：中文网站DOM复杂，Agent点不到正确按钮。 中文网站的class名经常是自动生成的乱码，视觉位置和DOM位置不一致。解法：用CSS选择器给关键按钮加标签，或在任务描述中写明确的选择器路径。

坑2：页面加载慢导致Agent超时。 部分政府网站加载超过10秒，Agent默认等待时间不够。解法：代码里加waitTimeout配置。

效果验证

打开page-agent界面，输入"帮我打开GitHub Trending，截个图存到桌面"。检查页面是否加载正确、截图是否保存、操作日志有没有报错。

延伸思考

它是怎么"看懂"网页结构的？ page-agent说用视觉模型分析页面截图+DOM结构来判断哪个元素是按钮、哪个是输入框。但这两个信息源怎么融合的——是先看截图确定视觉位置再映射到DOM，还是先解析DOM再视觉确认？如果DOM里一个按钮的位置和截图里不一致（比如被CSS transform偏移了），Agent信哪个？

为什么选浏览器端Agent而不是服务端？ 常规做法是Puppeteer/Playwright在服务端跑，page-agent非要在浏览器里跑JavaScript Agent。是为了绕过反爬检测（服务端无头浏览器容易被识别），还是有别的设计考虑？GitHub文档没解释。

常见疑问

Q1：处理复杂中文网页时容易点错按钮，怎么办？

纯靠AI识别页面元素确实不稳定。用浏览器开发者工具找到关键按钮的CSS选择器或data属性，写入任务描述（如"点击class为submit-btn的按钮"）。反复操作的网站可以写一个元素映射配置文件。

Q2：会不会误操作提交敏感信息或删除数据？

会。三条防护：第一，在测试环境或独立浏览器Profile中运行，隔离生产数据；第二，涉及提交、删除的操作，先加"操作前截图确认"指令；第三，不要让它访问有支付、财务功能的网站。目前page-agent没有内置确认拦截机制。

Q3：和传统Selenium/Playwright脚本有什么区别？

Selenium需要写代码定义每一步，元素定位、等待时间都要手动处理。page-agent用自然语言描述任务，它自己分析页面结构、决定操作顺序、处理异常重试。前者适合固定流程的自动化测试，后者适合一次性或频繁变化的网页操作任务。

下一步

• page-agent GitHub：https://github.com/alibaba/page-agent
• 想了解Agent编排？看《Databricks Omnigent多Agent编排实战》

本文数据来源于互联网公开信息（GitHub alibaba/page-agent），仅供行业趋势参考。