大数跨境

【Agent工坊】浏览器自动化三件套完全指南

【Agent工坊】浏览器自动化三件套完全指南 硅链AI
2026-05-15
10
导读:用 Hermes Agent 的浏览器工具链,5 分钟搭建自动化网页信息采集系统,无需安装 Playwright 或 Selenium。附 GitHub/The Verge/HN 实战案例和 7 个踩
使用Hermes Agent浏览器工具链,5分钟构建网页采集系统,无需安装Playwright或Selenium,零依赖开箱即用。

01.
为何需要浏览器三件套

当使用Hermes Agent进行内容监控、竞品分析或数据采集时,常遇以下问题:
web_extract
对多个站点不适用。
典型情况包括:
  • GitHub Releases详情页:`web_extract`返回`Client error '432'`,无法打开
  • The Verge文章页:`web_extract`返回0字符,正文空白
  • OpenAI/Anthropic官方博客:Cloudflare拦截导致`web_extract`失败
  • Hacker News首页:`web_extract`仅获取标题,无法提取评论区
官方推荐方案是浏览器三件套——
browser_navigate
browser_snapshot
browser_console
。三者底层基于Playwright CDP协议但已完整封装,无需安装浏览器驱动。
本文详解三工具实战用法,附完整代码、输出示例及7条避坑指南。

02.
工具速览与选择决策树

工具
作用
关键参数
返回内容
`browser_navigate`
打开URL并加载完整页面
`url`(必填)
页面结构摘要
`browser_snapshot`
获取页面无障碍树结构快照
无必填参数
DOM结构骨架
`browser_console`
执行JS表达式
`expression`(必填)
表达式返回值
选择决策树:
需提取网页正文? ├── 普通网页 → 优先用web_extract(更快省token) │   └── 失败 → 用browser_console提取 ├── GitHub页面 → 直接用browser_console(web_extract必失败) ├── The Verge/媒体站 → 用browser_console └── Cloudflare拦截 → Web Archive + browser_console  需分析页面结构? └── 用browser_snapshot(仅调试时使用) 

03.
实战1:提取GitHub Release正文(含完整输出)

GitHub releases页(如
https://github.com/NousResearch/hermes-agent/releases/tag/v2026.4.16
)用
web_extract
返回432错误。使用浏览器三件套可绕过且无需GitHub Token。


第一步:navigate打开页面
Hermes Agent中直接调用:
browser_navigate(url="https://github.com/NousResearch/hermes-agent/releases") 
返回页面结构摘要以确认加载。注意:GitHub为SPA混合渲染,navigate后JS可能未执行完,snapshot返回的常为页面骨架。


第二步:console提取正文(核心步骤)
跳过snapshot,用console定位正文容器:
browser_console(expression="document.querySelector('.markdown-body')?.innerText || document.querySelector('article')?.innerText || document.body.innerText.substring(0, 5000)") 
表达式含三级智能降级:
  1. `.markdown-body`
  2. `<article>`标签
  3. `body.innerText.substring(0, 5000)`
.markdown-body
:GitHub正文专用容器,命中率最高
:部分站点用article标签包裹正文
body.innerText.substring(0, 5000)
:兜底方案,截取5000字符防token爆炸
实际返回示例:
Hermes Agent v2026.4.16 ========================  ## What's New 🚀  - **Browser Console Tool**: New `browser_console` tool for executing   JavaScript in loaded pages. Supports Promises for async extraction. - **Patch v2**: Fuzzy matching now uses 9 strategies instead of 3.   Minor whitespace differences no longer break replacements. - **Terminal PTY**: Fixed SIGTERM handling in pseudo-terminal mode.   Interactive CLIs (Codex, Claude Code) are now stable.  ## Bug Fixes 🐛  - `read_file` offset parameter: Fixed off-by-one error when offset > 1 - `process.wait`: No longer hangs when process exits during poll cycle - `web_search`: Added bocha as native backend option for Chinese queries  ## Breaking Changes ⚠️  - `browser_snapshot` now returns accessibility tree by default instead   of raw HTML. Use `browser_console` for content extraction. 
⚠️ 避坑1:navigate后勿急snapshot。GitHub页面动态内容多(React水合),snapshot返回的无障碍树通常不含Markdown正文。正确路径:navigate → 直接console → CSS选择器精准提取。除非需确认DOM结构,否则生产流程应跳过snapshot。
⚠️ 避坑2:`.markdown-body`仅适用于GitHub文件页和Release页。Pull Request或Issue页正文位于`.comment-body`或`.js-comment-body`容器。建议先用snapshot确认正确CSS选择器,再执行console表达式。快速验证方案:`browser_console(expression="document.querySelectorAll('[class*=comment]').length")`统计评论容器数量。

04.
实战2:提取The Verge文章正文(含完整工作流)

The Verge的AI专栏是关键信源,但
web_extract
返回0字符。浏览器三件套可稳定获取全文,包含评论区内容。


完整四步流程
# 步骤1:打开AI专栏首页 browser_navigate(url="https://www.theverge.com/ai-artificial-intelligence")  # 步骤2:首页提取最新文章列表 browser_console(expression="Array.from(document.querySelectorAll('[data-analytics-link] h3, .duet--article--headline a')).slice(0, 5).map(el => ({title: el.innerText?.trim(), href: el.href || el.closest('a')?.href}))")  # 返回示例: # [ #   {"title": "OpenAI quietly launched a new moderation tool", "href": "https://www.theverge.com/2026/5/14/..."}, #   {"title": "Anthropic's Claude can now browse the web", "href": "https://www.theverge.com/2026/5/14/..."}, #   ... # ]  # 步骤3:进入目标文章 browser_navigate(url="https://www.theverge.com/2026/5/14/openai-quietly-launched-moderation-tool")  # 步骤4:console提取正文 browser_console(expression="document.querySelector('.duet--article--article-body-component')?.innerText || document.querySelector('[class*=article-body]')?.innerText || document.body.innerText.substring(0, 10000)") 


提取结果示例
OpenAI quietly launched a new moderation tool that could reshape how AI companies handle content safety. The tool, called "Guardian," was rolled out to enterprise customers last week without a formal announcement.  According to an internal document obtained by The Verge, Guardian uses a multi-layered approach...  "We believe safety should be invisible but effective," said OpenAI's head of trust and safety.  Industry analysts see this as a direct response to... 
⚠️ 避坑3:The Verge站内搜索`https://www.theverge.com/search?q=关键词`对新文章常返回空结果(索引延迟)。AI专栏首页`https://www.theverge.com/ai-artificial-intelligence`的"LATEST IN AI"区块实时更新。正确入口:优先从专栏首页提取,搜索失败时用`browser_console`从DOM直接抓标题列表。
⚠️ 避坑4:The Verge正文容器class名随改版变化(截至2026年5月为`.duet--article--article-body-component`)。若失效,立即snapshot分析新结构。备选方案:用`browser_console(expression="Array.from(document.querySelectorAll('main p')).slice(0,30).map(p=>p.innerText).join('\n\n')")`提取全部段落文本。

05.
实战3:绕过Cloudflare拦截(OpenAI/Anthropic/Medium)

部分核心信源被Cloudflare严格保护:
站点
拦截类型
影响
`openai.com/index/*`
URL级Cloudflare挑战
所有子路径均被拦截
`anthropic.com/engineering/*`
同上
`/news/`返回404,`/engineering/`被拦截
`medium.com/*`
双重拦截(Cloudflare+付费墙)
Web Archive快照不稳定


解决方案:Web Archive快照
# ❌ 直接访问触发Cloudflare browser_navigate(url="https://openai.com/index/why-we-no-longer-evaluate-swe-bench-verified")  # ✅ 使用Web Archive快照 browser_navigate(url="https://web.archive.org/web/20260514/https://openai.com/index/why-we-no-longer-evaluate-swe-bench-verified") 
URL格式需严格正确:
https://web.archive.org/web/[YYYYMMDD]/[完整协议+URL]
。缺少
https://
前缀或日期格式错误均导致404。
⚠️ 避坑5:Web Archive非万能。对Medium付费墙文章或`archive.ph`快照,常返回"Hrm"错误。此时跳转至终极方案——HN评论API:
# 通过HN Algolia获取文章objectID curl -s "https://hn.algolia.com/api/v1/search?query=关键词&tags=story&hitsPerPage=5" # 用objectID拉取完整评论 curl -s "https://hn.algolia.com/api/v1/items/44569445" 

06.
实战4:构建自动化监控流水线(完整代码)

组合三工具实现无人值守监控。以下为扫描HN热榜的分钟级流水线:
# === 内容监控流水线(Hermes Agent Cron任务) ===  # 步骤1:打开HN首页 browser_navigate(url="https://news.ycombinator.com/")  # 步骤2:提取热榜前15条 browser_console(expression="Array.from(document.querySelectorAll('.titleline > a')).slice(0, 15).map(a => ({title: a.innerText, url: a.href}))")  # 返回示例: # [ #   {"title": "Show HN: I built an AI agent that manages my calendar", "url": "https://..."}, #   {"title": "Claude Code can now deploy to production", "url": "https://..."}, #   {"title": "Hermes Agent v2026.5.14 released with browser tools", "url": "https://..."}, #   ... # ]  # 步骤3:Hermes对话中自然语言筛选 # "提取含AI/Agent/Claude/Hermes/LLM的条目,过滤广告"  # 步骤4:对每条目提取正文 browser_navigate(url="具体文章URL") browser_console(expression="document.body.innerText.substring(0, 5000)") # 记录至草稿文件  # 步骤5:生成汇总报告 # 写入content/draft-YYYYMMDD-HHMM-ai-fengxiang-xxx.md 


流水线核心参数:
参数
推荐值
说明
扫描间隔
15分钟
HN热榜每30分钟大轮换
热榜截取数
前15条
覆盖80% AI相关内容
正文截断长度
5000字符
足够判断是否深度提取
关键词匹配
AI/Agent/LLM/Claude/GPT
全小写匹配,大小写不敏感
⚠️ 避坑6:HN首页SSR渲染标题列表,无需等待JS。但browser_snapshot返回稀疏结构,应跳过snapshot直接browser_console提取。注意:`.titleline > a`仅获取标题,需完整信息时用:
browser_console(expression="Array.from(document.querySelectorAll('.athing')).slice(0,10).map(row => { const title = row.querySelector('.titleline > a'); const meta = row.nextElementSibling; return { title: title?.innerText, url: title?.href, points: meta?.querySelector('.score')?.innerText, comments: meta?.querySelectorAll('a')[meta?.querySelectorAll('a').length-1]?.innerText }; })") 
⚠️ 避坑7:长console表达式(>400字符)可能被截断。解决方案:拆分多次console调用——先取标题列表,再取元数据,在Hermes对话中手动合并。

07.
选择器速查表(持续更新)

站点
目标内容
推荐选择器
兜底方案
GitHub README/Release
正文
`.markdown-body`
`article` → `body.innerText`
GitHub Issue/PR
评论正文
`.comment-body`
`.js-comment-body`
The Verge文章
正文
`.duet--article--article-body-component`
`main p`拼接
The Verge首页
标题列表
`[data-analytics-link] h3`
`.duet--article--headline a`
HN首页
热榜标题
`.titleline > a`
`.athing .title a`
HN评论页
评论正文
`.comment`
`.commtext`
Reddit帖子
正文
`[slot="text-body"]`
`shreddit-post` shadow DOM
通用博客站
正文
`article`
`.post-content` → `body.innerText`
任何站点(兜底)
全部文字
`document.body.innerText.substring(0, 5000)`

08.
性能优化与Token节省

  1. console表达式控制在200字符内:过长JS累积消耗token
  2. innerText截断至5000-10000字符:避免全文提取浪费token
  3. 避免连续snapshot+console:snapshot返回文本也计token,仅调试时使用
  4. 普通站点优先用web_extract:
  5. SPA页面用Promise延迟提取:避免sleep占用轮次
web_extract
走内部文本提取pipeline,比浏览器快3-5倍且token消耗更低。浏览器工具链是降级方案。
sleep(5)
替换为console内Promise轮询:
new Promise(r => {   const check = () => {     const el = document.querySelector('.content-loaded');     if(el?.innerText?.length > 100) r(el.innerText.substring(0, 5000));     else setTimeout(check, 1500);   };   check(); }) 

09.
方案对比

方案
上手难度
稳定性
依赖
适用场景
Hermes browser三件套
⭐ 极低
⭐⭐⭐⭐ 高
对话式内容采集
`web_extract`
⭐ 极低
⭐⭐⭐ 中
普通网页快速提取
Playwright独立脚本
⭐⭐⭐ 中
⭐⭐⭐⭐⭐ 极高
Node.js+浏览器
复杂自动化测试
Selenium
⭐⭐⭐⭐ 高
⭐⭐⭐ 中
Python+驱动
传统Web自动化
`curl`+正则
⭐⭐ 低
⭐⭐ 低
curl
简单JSON API
对日常需求(行业新闻监控、竞品分析),浏览器三件套性价比最高——无需额外基础设施,直接在对话中使用。

10.
常见问题FAQ

Q1:browser_console返回`undefined`?
A:99%情况为CSS选择器错误。解决流程:① 用browser_snapshot查看DOM结构;② 定位正文容器class名;③ 更新console表达式;④ 兜底用`document.body.innerText.substring(0, 3000)`
Q2:navigate后需等待多久?
A:navigate自动等待`load`事件(5-15秒),但SPA框架页面正文可能未渲染完。需在console表达式内用Promise轮询(见性能优化第5条)。
Q3:能同时打开多标签页?
A:不支持。三件套为单标签页模式,navigate替换当前页面。需监控多页面时,在多个对话中操作或顺序执行。
Q4:能模拟点击/滚动/填表?
A:
browser_navigate
仅打开URL。交互操作通过
browser_console
执行JS模拟:
document.querySelector('.load-more').click(); window.scrollTo(0, document.body.scrollHeight); document.querySelector('input[name="search"]').value = '关键词'; 
复杂交互建议用Playwright独立脚本。
Q5:提取内容如何保存?
A:用
write_file
工具写入Markdown:
write_file(path="/opt/hermes-home/projects/ai-neican/research/hn-20260514.md", content="[正文]") 
Cron任务文件自动输出至
projects/ai-neican/content/
目录。

11.
核心规则

  1. navigate开门,console取货——snapshot仅调试用,不用于生产内容提取
  2. 选择器不对时snapshot——一次snapshot胜过10次盲目调整
  3. 普通网页优先web_extract,失败再用浏览器三件套——浏览器是降级方案
  4. Cloudflare拦截走Web Archive,失败则用HN评论API——永不死磕

【声明】内容源于网络
0
0
硅链AI
深圳硅链AI 专为企业管理咨询行业赋能,旨在通过尖端AI技术,为企业提供AI营销获客系统,AI智能客服系统,AI数字创始人IP打造系统,AI高效办公培训系统,AI全方位技术系统等为企业解决各种经营痛点。立即联系硅链AI开启早受益的赋能之旅。
内容 45
粉丝 0
硅链AI 深圳市硅基领航科技有限公司 深圳硅链AI 专为企业管理咨询行业赋能,旨在通过尖端AI技术,为企业提供AI营销获客系统,AI智能客服系统,AI数字创始人IP打造系统,AI高效办公培训系统,AI全方位技术系统等为企业解决各种经营痛点。立即联系硅链AI开启早受益的赋能之旅。
总阅读1.6k
粉丝0
内容45