AI Agent浏览器实战 03:agent-browser入门——让AI精准操控页面

发布时间：2026-06-08 09:14来源：微信阅读：2

前文已完成技术选型对比，确定使用agent-browser。现在开始实践——让AI真正能够操作浏览器。

agent-browser是一款基于Rust开发的CLI工具，通过CDP协议实现浏览器控制。与Playwright不同，它的API采用命令式设计：每个命令完成单一任务，非常契合AI的调用方式。

fillwaitwait-forextractcontentrefreshlist-tabsswitch-tab

open-new-tabchatcookiessessionconnectkillsetstealthhoverselect

经过源码验证可用的命令包括：openclicksnapshotscreenshotclosescrollbackevaltypepressconsoleerrors

安装耗时约1-2分钟，系统会自动下载Chrome浏览器（约150MB）。

重要提示：agent-browser要求Node.js 24及以上版本。如版本不满足，请先升级Node.js环境。

Playwright的实现思路是：创建browser对象实例，然后调用一系列API方法完成操作。

agent-browser的思路截然不同：每条指令都是独立命令，通过标准输入输出（stdin/stdout）进行传递。

对AI而言，CLI模式的核心优势在于每个命令的自包含性。AI无需理解复杂的API对象结构，只需明白"下一步执行哪个命令"即可。

这条命令完成了三项任务：

1启动Chrome浏览器实例（或连接已有实例）

2创建新标签页并导航至目标URL

3等待页面完全加载

输出为一行确认信息。

AI控制浏览器的首要步骤是"观察"当前页面状态。snapshot命令能够返回页面所有可交互元素。

输出内容：

需要注意的是，每个元素都配有ref ID（@e1、@e2……）。这是AI引用元素的方式——无需编写CSS选择器，直接使用@e1即可操控该元素。

掌握ref ID后，点击操作变得极为简便。

若页面跳转至新URL，agent-browser会自动切换至新页面上下文。

截图文件保存在当前工作目录。

ref ID是snapshot命令返回的临时引用标识。每个元素在当前快照中拥有唯一ID，AI可直接使用该ID操作元素，省去CSS选择器或xPath的编写。

需要操作元素时，首先调用snapshot命令。

获取当前页面全部可交互元素的列表。AI从中选取目标元素，使用对应的ref ID执行相应操作。

ref ID会发生变化。每次snapshot返回的ref ID仅在当前快照中有效。当页面发生变动（如弹窗出现、页面跳转、DOM更新），之前的ref ID可能失效，需要重新执行snapshot。

这是AI控制浏览器的关键环节——每轮操作前都必须重新snapshot，确保AI看到的是最新页面状态。

agent-browser的动作可分为五大类型。

假设需要登录某个后台系统，操作步骤如下：

1打开登录页面

2填写用户名、密码

3点击登录按钮

4等待页面跳转完成

5截图确认登录结果

这构成了AI控制浏览器的标准工作流：快照→识别→执行→验证→循环。

agent-browser支持多标签页管理。

agent-browser作为CLI工具，AI Agent通过子进程方式调用它。

也可使用Python的subprocess.Popen保持会话状态。

1安装agent-browser：npm install -g agent-browser，确保agent-browser --version正常运行

2完成首个流程测试：open→snapshot→click→screenshot→close

3深入理解ref ID机制：多次执行snapshot，观察ref ID如何随页面变化而改变

下期预告

agent-browser已能正常运作。但还有一个问题尚未解决：登录状态维护。若每次都需要AI重新输入账号密码，效率将大打折扣。下一期，我们将探讨如何通过Cookie和Session机制让AI继承登录状态。