Hermes Agent 浏览器自动化教程：4 步从打开网页到提取数据的完整指南

Hermes Agent 浏览器自动化教程4 步从打开网页到提取数据的完整指南【免费下载链接】hermes-agentThe agent that grows with you项目地址: https://gitcode.com/GitHub_Trending/he/hermes-agent如果你需要让程序打开网页、点击链接、填写搜索框并拿回结构化数据不必手写选择器也不必维护 Playwright 脚本。Hermes Agent 的浏览器自动化模块让 agent 通过几个 API 调用完成导航、输入和数据提取本地模式零成本运行也可随时切到云端浏览器。适合想快速验证抓取思路的新手以及要把网页操作接入 agent 流程的开发者。浏览器自动化的四个核心能力Hermes Agent 把网页交互拆成四组工具每组对应一类问题你可以按需调用不需要全部掌握。1. 页面导航与元素定位这一步解决我打开一个页面后怎么知道能点什么、填什么的问题。browser_navigate负责打开地址browser_snapshot返回当前页面的交互元素每个元素带一个e1、e2这样的引用标识。后续所有点击和输入都用这个引用不用写 CSS 选择器。from tools.browser_tool import browser_navigate, browser_snapshot browser_navigate(https://shop.example.com/item/42, task_idprice_check) snapshot browser_snapshot(task_idprice_check)这两行先打开商品页再取一份元素清单快照默认只列可交互元素加fullTrue可以拿到完整页面内容。2. 输入与按键模拟表单场景的关键是先定位再输入最后提交。browser_type在输入框写入内容并自动清空原有值browser_key模拟按键如回车browser_click点击元素browser_scroll上下滚动页面。from tools.browser_tool import browser_type, browser_key browser_type(e5, Hermes 教程, task_idprice_check) browser_key(Enter, task_idprice_check)这两行在快照里编号为e5的搜索框输入关键词然后按回车提交。3. 视觉分析与资源收集当页面没有文本选择器、或者目标是一块图表时DOM 快照帮不上忙。browser_vision把截图交给视觉模型回答具体问题browser_get_images批量取回页面所有图片的 URL 和 alt 文本browser_screenshot单独拿截图。from tools.browser_tool import browser_vision, browser_get_images answer browser_vision(页面上有哪些数据图表, task_idprice_check) images browser_get_images(task_idprice_check)第一行让模型看图说话第二行拿回全部图片资源列表返回的是{images: [{url: ..., alt: ...}]}结构。4. 控制台监控与 JS 执行有些数据只在 DOM 里而不在快照里或者页面本身有脚本报错。browser_console不带参数时读取控制台输出和错误传入expression参数时执行一段自定义 JS返回值直接给到你。from tools.browser_tool import browser_console errors browser_console(task_idprice_check) price browser_console(task_idprice_check, expressiondocument.querySelector(.price).innerText)第一行检查页面是否有 JS 报错第二行直接从 DOM 里抠出价格文本。三种后端模式凭据在就自动启用浏览器跑在哪里由后端决定系统会自动检测可用凭据并选择你通常不用手动切换。模式成本什么时候用本地 headless Chromium免费、零配置本地开发、测试、频繁操作云 Browserbase付费需 API Key生产环境需要隐身与代理云 Browser UseNous 订阅需要内置反检测的生产场景云端模式只需设置环境变量例如 Browserbaseexport BROWSERBASE_API_KEY你的key export BROWSERBASE_PROJECT_ID你的项目ID设置完成后所有browser_*调用会自动走云端会话本地和云端的调用代码完全一样。后端注册逻辑见源码目录agent/browser_provider.py与agent/browser_registry.py想接自己的云浏览器可以照着BrowserProvider接口实现。4 步跑通第一个任务抓商品页价格下面用一个完整场景把整条流程走一遍打开商品页 → 取快照 → 用 JS 提取价格 → 关闭会话。第 1 步一次性安装本地浏览器。npm install -g agent-browser agent-browser install # Debian/Ubuntu/Docker 加 --with-deps这步下载 headless Chromium装好之后不再需要管浏览器本身。第 2 步导航到目标页面并为任务指定 task_id。from tools.browser_tool import browser_navigate browser_navigate(https://shop.example.com/item/42, task_idprice_check)task_id是会话隔离的钥匙同一个 task_id 的所有调用共享同一个浏览器会话不同任务互不干扰命名建议带上业务含义如price_check而不是task1。第 3 步取快照确认页面结构。snapshot browser_snapshot(task_idprice_check) print(snapshot)输出里能看到类似e8 a加入购物车/a的条目。先打印看一眼再决定下一步操作能避免大量元素找不到的报错。第 4 步提取数据并关闭会话。price browser_console(task_idprice_check, expressiondocument.querySelector(.price).innerText) browser_close(task_idprice_check)价格拿到后显式关闭会话释放资源不关也行——不活动超过 300 秒可用BROWSER_INACTIVITY_TIMEOUT调整的会话会被自动回收。桌面版界面里可以看到每个会话的来源与状态排查哪个任务还占着浏览器时很直观。更多典型用法输入、过程、产出自动化搜索表单。输入是表单地址和一组字段值过程是 navigate → snapshot 确认输入框编号 → 逐个browser_type→browser_key(Enter)提交产出是提交后的页面快照你可以用成功 in snapshot这类简单判断验证结果。注意字段编号必须来自当前任务的快照跨任务复用编号必然出错。收集页面图片资源。输入是一个图片画廊页过程只需一次browser_get_images产出是全部图片的 URL 与 alt 文本列表直接喂给下游的下载或建库脚本不需要逐个解析img标签。调试页面报错。输入是行为异常的页面过程是browser_console不带参数取一次输出产出是 JS 错误列表。如果快照看起来缺东西先看这里——很多元素不存在其实是前端脚本报错后根本没渲染出来。踩坑与排错现象报 element not foundeX 引用失效。原因快照是某一时刻的页面状态页面跳转、重渲染或懒加载后旧编号就作废了也可能是取快照前就执行了点击。 处理报错后立刻重新browser_snapshot再操作内容丰富的页面用fullTrue取完整元素列表确认编号确实存在。现象多步任务进行到中途会话断开、调用报连接错误。原因默认 300 秒不活动超时两步之间如果夹了耗时的模型推理或人工等待会话可能已被回收。 处理调大BROWSER_INACTIVITY_TIMEOUT或者在重试前先检查快照是否还能取到——取不到就说明会话没了重新 navigate 即可同一 task_id 会自动重建会话。现象目标网站弹出验证页或直接拒绝访问。原因本地 headless Chromium 指纹特征明显高频请求容易触发反爬。 处理切到云端模式并开启高级隐身与代理如BROWSERBASE_ADVANCED_STEALTHtrue同时降低请求频率、拉开操作间隔。长期跑生产任务建议直接用云模式本地模式留给开发调试。下一步把上面 4 步流程里的商品页换成你关心的任意新闻页跑一遍 snapshot 看看标题列表能不能取到。取不到的元素先怀疑编号过期重新取快照再试——这一招能解决大多数新手遇到的报错。【免费下载链接】hermes-agentThe agent that grows with you项目地址: https://gitcode.com/GitHub_Trending/he/hermes-agent创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考