文章目录前言一、AI操控浏览器其实就两大门派1. 截图坐标纯靠眼神儿办事2. 文本树编号靠暗号精准定位二、好好的webFetch不用为啥非要搞browser use1. 需要登录的页面它进不去2. SPA应用它拿到的是空壳3. 多步交互它根本玩不转三、核心揭秘文本树到底是怎么来的1. 源头浏览器自带的“无障碍树”2. 怎么把这棵树读出来3. ref编号AI和浏览器的“接头暗号”四、完整流程走一遍AI是怎么查机票的五、视觉方案文本树搞不定的时候怎么办1. 什么时候得用视觉2. 视觉方案的那些坑六、Agent集成技巧别让浏览器工具拖垮性能1. 子agent隔离专人干专事2. 懒启动缓存别没事就开浏览器3. 权限分级不能啥都让AI干七、省钱大法怎么把token开销打下来只留最新快照旧的全扔掉八、市面上的产品都咋做的简单盘一盘1. x-code-cli2. Gemini CLI3. Claude Code4. Codex CLI九、边界和槽点它也不是万能的1. 页面写得烂它也认不出来2. 人机验证是过不去的坎3. 移动端支持不行十、最后唠两句P.S. 目前国内还是很缺AI人才的希望更多人能真正加入到AI行业共同促进行业进步增强我国的AI竞争力。想要系统学习AI知识的朋友可以看看我精心打磨的教程 http://blog.csdn.net/jiangjunshow教程通俗易懂高中生都能看懂还有各种段子风趣幽默从深度学习基础原理到各领域实战应用都有讲解我22年的AI积累全在里面了。注意教程仅限真正想入门AI的朋友否则看看零散的博文就够了。前言做AI Agent的朋友最近肯定常听见browser use这个词。说白了就是让AI像真人一样点开浏览器点点按钮填填表听起来挺高科技实际上原理说穿了一点都不神秘。今天咱们就掰开揉碎了唠顺便吐槽吐槽这里面的坑和有意思的地方。一、AI操控浏览器其实就两大门派别看各家产品吹得天花乱坠本质上AI操作浏览器就两种路子没有第三种。1. 截图坐标纯靠眼神儿办事这个路子特别好理解给页面拍张照发给大模型大模型看完说“点那个坐标(x,y)的地方”然后自动化工具照着点就行。听起来很直观对吧缺点也很明显。首先得用多模态模型纯文本模型干不了这活成本直接上去了。但有些场景还真就得用它比如canvas做的游戏、图表还有纯渲染的页面连DOM都没有文本树直接空了不靠眼神真不行。像Anthropic的Computer Use、OpenAI的Operator走的就是这个纯视觉路线。2. 文本树编号靠暗号精准定位这就是现在主流方案了也是咱们今天重点唠的。简单说就是把网页转成一棵带编号的文本树AI选编号工具按编号找真实元素操作。不用视觉能力纯文本模型也能玩成本低还稳定属于性价比拉满的方案。现在Gemini CLI、Claude Code这些主流工具默认都是这个路子视觉只当补充。二、好好的webFetch不用为啥非要搞browser use很多人会问Agent不是都有webFetch吗抓网页内容不就完了搞这么复杂干啥这话对也不对。webFetch本质上就是发个HTTP请求属于“一次性拿完就走”跟你直接curl一个网址没啥本质区别。碰到复杂场景直接歇菜。1. 需要登录的页面它进不去webFetch没cookie没session就像你没带工牌想进公司大楼保安直接给你拦在门外。后台页面、会员内容它啥也拿不着。2. SPA应用它拿到的是空壳现在前端基本都是Vue、React写的SPA页面初始HTML就一个空div内容全靠JS渲染出来。webFetch拿完一看好家伙就一个空盒子里面啥货都没有跟你点外卖收到个空餐盒似的气不气人。3. 多步交互它根本玩不转查个机票得选出发地、目的地、日期再点搜索翻个帖子得翻页、点详情。这些操作都得保持页面状态webFetch抓一次就完事了根本走不完流程。而browser use呢它直接启动一个真实的浏览器跟你手动开Chrome一模一样该登录登录该点按钮点按钮该渲染渲染完全模拟人的操作。当然也不是啥场景都要用它。就看个静态文章webFetch完全够用又快又省钱。非得用浏览器去读静态文章就像你开卡车去买瓶矿泉水纯属大材小用费油钱。而且不用你自己判断该用哪个大模型自己会看工具描述选。当然这也看模型聪不聪明笨模型可能放着近路不走绕远路那也没办法。三、核心揭秘文本树到底是怎么来的很多人好奇网页那么多代码、样式、图片怎么就变成一段简洁的文本树了其实这东西不是新技术浏览器早就有了。1. 源头浏览器自带的“无障碍树”每个浏览器内核里都维护着一棵无障碍树是给屏幕阅读器、语音控制这些辅助功能用的都存在十几年了比AI Agent资格老多了。它根据DOM、CSS样式、ARIA属性生成只保留语义信息这个元素是按钮还是输入框叫什么名字能不能点状态是啥。说白了就是浏览器早就把网页“翻译”成了程序能读懂的结构以前是给残障人士辅助工具用的现在被AI拿来直接用了属于经典的“技术跨界再就业”。比如一个button提交/button在无障碍树里就是角色是按钮名字叫“提交”可以交互。不管你CSS写得花里胡哨它的语义都是按钮。2. 怎么把这棵树读出来读这棵树得用浏览器自动化工具现在主流用的是Playwright微软开源的东西靠谱得很。前端同学写E2E测试肯定熟现在它成了AI操控浏览器的底层发动机。当然LLM不能直接调用Playwright中间得有个翻译官就是playwright/mcp这个包把Playwright的能力包装成MCP工具LLM就能直接调用了。整个流程其实很简单LLM说“给我拍个页面快照”MCP服务端喊Playwright干活Playwright通过CDP协议跟浏览器要完整无障碍树浏览器返回一大坨JSON数据Playwright加工一下删掉看不见的、没用的节点给可交互元素编上号转成YAML格式最后把简洁的YAML文本还给LLM为啥不直接用DOM因为DOM太啰嗦了。一个页面几千个节点大半都是装样式的div、小图标、隐藏元素全是没用的废话。无障碍树直接把垃圾信息过滤掉全是干货信息密度直接拉满。几百KB的HTML处理完就剩几十个节点的YAMLLLM看着也省心省token就是省钱啊朋友们。3. ref编号AI和浏览器的“接头暗号”文本树里每个可交互元素都有个[refeXX]的编号比如e8是出发地输入框e20是搜索按钮。AI想点哪个直接报编号就行。这个编号不是AI瞎编的是生成快照的时候Playwright自动分配的就像餐厅给你发的取餐号一一对应。而且只要元素没变多次快照编号基本不变挺稳定。当然也有失效的时候。比如你点了搜索页面刷新了元素全换了旧编号就作废了得重新拿快照。就像餐厅换了一批菜原来的取餐号自然就没用了。AI点e20的时候Playwright内部有个映射表直接找到对应的DOM元素执行点击。要是元素没了就会报错说编号找不到得重新拍快照属于正常现象。四、完整流程走一遍AI是怎么查机票的说这么多干的咱们拿查机票举个例子看看整个流程是怎么跑通的。就比如你说“帮我查北京到上海最便宜的三个航班”LLM一看这活webFetch干不了得用浏览器就委派给browser子agent子agent静默启动Chrome打开去哪儿网首页调用快照工具拿到首页的文本树知道了输入框和按钮的编号调用填表工具在对应编号里填好北京、上海、日期调用点击工具点搜索按钮页面跳转后自动返回新的快照里面全是航班信息LLM从里面挑出最便宜的三个把结果返回给你整个过程行云流水你都看不见浏览器窗口后台默默就干完了。而且每次操作完自动返回新快照不用AI再手动调一次属于一步到位。五、视觉方案文本树搞不定的时候怎么办文本树虽好但也不是万能的。有些场景它真玩不转就得靠截图视觉方案来补。1. 什么时候得用视觉主要两类场景canvas、WebGL渲染的内容游戏、图表、视频播放器这些根本没有DOM无障碍树是空的文本树直接罢工靠外观区分的元素比如“点那个黄色的按钮”、“看看红色的报错”文本树里没颜色信息定位不了简单说正常网页用文本树稳又便宜花里胡哨的渲染内容才上视觉。两者是搭配干活不是二选一。2. 视觉方案的那些坑首先不是所有模型都支持视觉纯文本模型就没这能力得看模型ID判断。而且不同厂商接口还不一样。比如Anthropic家的API支持直接在工具返回里放图片很方便。其他家兼容OpenAI格式的直接放图片会变成一长串base64模型根本看不懂还容易把上下文撑爆。怎么办呢就得先找个视觉模型把截图翻译成文字描述再把文字发给主模型。相当于找个翻译官先看一眼图再把内容念给主模型听。当然这样精度就差点坐标是近似值属于凑合用的方案。选翻译模型也讲究优先挑便宜的、免费的能省则省毕竟创业公司每一分钱都得花在刀刃上。六、Agent集成技巧别让浏览器工具拖垮性能browser use的工具有二十多个全塞给主agent可不是明智之举这里面大有学问。1. 子agent隔离专人干专事很多人图省事把所有工具都堆主agent里结果问题一大堆系统提示词变巨长前缀缓存直接失效钱哗哗地涨大部分任务根本用不上浏览器纯纯浪费token正确做法是单独整个browser子agent工具全放它那。主agent觉得需要用浏览器了就把任务委派给子agent子agent干完只返回最终结果中间过程主agent不用管。就像老板不自己跑客户专门雇个销售销售搞定了回来汇报就行老板不用跟着跑断腿省下来的精力干更重要的事。2. 懒启动缓存别没事就开浏览器浏览器也不是程序一启动就打开那样纯纯浪费资源。都是第一次用的时候才启动启动完就缓存下来后面再用直接复用不用反复开开关关。就像你不会一上班就把打印机打开真要打印的时候再开开完就一直用着省电还省时间。要是浏览器意外关了或者崩了缓存自动清掉下次用再重新启动很智能。3. 权限分级不能啥都让AI干安全这根弦不能松。浏览器权限可大可小全放开了容易出事。一般分三档完全不让用的比如直接执行Node代码的工具能读写你本地文件太危险直接不注册每次都要问的比如在页面里执行JS能读cookie和本地存储涉及隐私每次调用都得用户确认直接放行的普通的跳转、点击、截图、快照没啥风险启用浏览器就默认授权了毕竟AI干活可以不能让它拿着你账号到处瞎逛安全第一。七、省钱大法怎么把token开销打下来用browser use最心疼的就是token多步任务跑下来token账单蹭蹭涨。这里面有个核心省钱技巧亲测有效。只留最新快照旧的全扔掉多步操作会反复调用快照历史对话里会堆一大堆旧快照。这些旧快照对下一步操作一点用都没有但每轮请求都得带着纯纯浪费钱。就像你聊天只需要看最新一条消息就行前面的历史记录全是冗余信息但系统偏要每次都全量发一遍这不坑钱吗。解决办法很简单每轮请求发出去之前把旧的快照、截图返回值全替换成一行占位提示只留最新的一份。别小看这一招十步的任务能省百分之七八十的浏览器相关token属于立竿见影的省钱技巧。Gemini CLI也是这么干的英雄所见略同。另外补充一句截图的token消耗是按分辨率算的跟文件大小没关系。压成JPEG只是传得快不省token。想省截图token就得控制视口大小别搞全页长截图那玩意巨费钱。八、市面上的产品都咋做的简单盘一盘说了这么多技术细节咱们也看看市面上主流产品都是怎么实现的各有啥特点。1. x-code-cli就是咱们今天主要参考的实现用的是playwright/mcp主打文本树方案视觉能力按模型自动开启。非Anthropic的模型用caption方式转文字描述好处是纯文本模型也能用浏览器跨供应商支持做得好。2. Gemini CLI谷歌自家的东西内置了browser_agent底层用chrome-devtools-mcp加puppeteer-core。也是文本树为主截图分析是单独调用视觉模型图不进主对话历史省token。还支持好几种会话模式玩法多。3. Claude CodeAnthropic家的路子比较野有Chrome扩展方案能直接复用你本地Chrome的登录状态cookie、OAuth都能用相当于借你的浏览器干活。另外还有桌面级的computer use纯视觉方案不过只支持macOS。4. Codex CLIRust写的通用MCP框架本身不带浏览器功能你自己配MCP服务端就行。灵活性拉满就是啥都得自己折腾适合动手能力强的朋友。九、边界和槽点它也不是万能的吹了这么多也得说说browser use的局限别以为有了它就能让AI帮你干所有上网的活。1. 页面写得烂它也认不出来文本树方案全靠页面语义撑着。要是前端图省事全用div写按钮又不加ARIA属性那无障碍树里就只有普通节点AI根本不知道这是个能点的按钮。所以说写页面用语义化标签不光是政治正确现在还关系到AI能不能看懂你家网站以后说不定还影响SEO前端同学可得上点心。2. 人机验证是过不去的坎碰到图片验证码、滑块验证、短信验证码AI直接抓瞎必须人工介入。还有Cloudflare这类反爬机制也很容易把自动化浏览器拦下来。这就像你去小区串门AI能自己开门坐电梯到了门禁刷脸那一步还是得你本人来。毕竟安全机制本来就是防机器的AI也是机器防的就是它。3. 移动端支持不行现在只支持桌面端三大浏览器内核移动端真实浏览器不支持只能模拟视口和UA凑合用。原生App里的WebView更是碰不着移动端场景还是受限。十、最后唠两句总的来说browser use不是什么黑科技本质上是把浏览器十几年前就有的无障碍能力和成熟的自动化测试工具通过MCP协议跟大模型接在了一起。思路很巧妙用最低的成本实现了最通用的浏览器操控能力比纯视觉方案性价比高太多所以才成了现在的主流。当然它也不是银弹有自己的适用场景和边界。静态内容用webFetch复杂交互才上browser use把钱花在刀刃上才是合格的AI工程师。以后AI操控浏览器肯定会越来越成熟说不定哪天咱们真就能动动嘴让AI把所有网页操作都干了。就是不知道到时候前端测试工程师会不会失业哈哈。P.S. 目前国内还是很缺AI人才的希望更多人能真正加入到AI行业共同促进行业进步增强我国的AI竞争力。想要系统学习AI知识的朋友可以看看我精心打磨的教程 http://blog.csdn.net/jiangjunshow教程通俗易懂高中生都能看懂还有各种段子风趣幽默从深度学习基础原理到各领域实战应用都有讲解我22年的AI积累全在里面了。注意教程仅限真正想入门AI的朋友否则看看零散的博文就够了