OpenClaw进阶篇：浏览器自动化——让AI帮你操作网页

OpenClaw进阶篇浏览器自动化——让AI帮你操作网页前言上篇我们写了自定义Skill发现核心是Prompt模板。但Skill只是告诉AI怎么做真正执行还需要Tool。今天讲一个强大的Toolbrowser。它让AI能像人一样操作浏览器——点击、输入、截图、执行JS。一、browser工具是什么OpenClaw的browser工具提供了三种连接模式1. 内置浏览器默认OpenClaw自带Playwright浏览器AI可以直接调用功能说明示例navigate打开网页访问百度、知乎snapshot获取页面快照了解当前页面状态screenshot截图保留证据click点击元素登录、搜索、提交type输入文字填表单、发评论evaluate执行JS提取数据、计算select下拉选择选择日期、分类hover悬停显示隐藏菜单特点开箱即用适合大多数场景。2. CDP模式Chrome DevTools Protocol连接你已有的Chrome浏览器通过调试端口控制// 启动Chrome时加上调试端口// macOS:/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome--remote-debugging-port9222// Windows:C:\Program Files\Google\Chrome\Application\chrome.exe--remote-debugging-port9222// Linux:google-chrome--remote-debugging-port9222然后在OpenClaw配置中指定browser:remoteUrl:http://localhost:9222优势保持登录状态Cookie、Session持久化可以用已有浏览器不额外占用资源支持多个标签页3. 浏览器扩展插件模式安装OpenClaw的Chrome扩展可以控制已打开的标签页获取浏览器历史、书签在用户当前浏览上下文中执行适合需要「接管用户当前页面」的场景。4. 远程浏览器服务通过CDP协议连接远程服务器上的浏览器browser:node:your-remote-server# 指定远程节点# 或通过CDP URLcdpUrl:ws://your-server:9222适合服务器环境或需要更高隔离性的场景。核心能力让AI像人一样操作网页。选择建议个人使用、日常任务 → 内置浏览器需要保持登录态 → CDP模式需要接管用户当前页 → 扩展插件服务器批量任务 → 远程浏览器二、先看个例子我们用浏览器自动化的思路改造之前的热榜查询// 不再依赖外部API直接爬取constresultawaitbrowser.navigate(https://weibo.com/hot)// 获取快照了解页面结构constpageawaitbrowser.snapshot()// 提取热搜标题consttitlesawaitbrowser.evaluate((){return[...document.querySelectorAll(.hot-item .title)].map(elel.innerText).slice(0,10)})// 输出结果console.log(titles)这就是浏览器自动化的威力——不依赖API直接操作网页。三、实战自动获取微博热搜3.1 两种方式的对比获取微博热搜有两种方式方式优点缺点API调用速度快、代码简单、无反爬问题需要依赖第三方服务、可能有频率限制浏览器自动化数据完整、可获取任意页面、无需API Key速度较慢、需要处理反爬、占用资源各自适用场景定时任务、批量获取 → 用API省资源获取详细内容、分析页面 → 用浏览器更灵活3.2 用浏览器自动化的场景什么时候适合用browser工具API不支持的数据比如你想获取热搜的详细讨论、评论数等需要登录才能看到比如知乎的关注者列表网页结构复杂API返回的数据格式不够用本节示例演示如何用browser获取微博热搜作为browser工具的入门案例3.3 编写Skill---name:weibo_hot_browserdescription:获取微博热搜榜单了解最新热点话题浏览器方式---# 微博热搜查询browser版## 什么时候触发-用户问微博热搜-用户说今天有什么热点-用户说帮我看看微博## 如何执行### 第1步访问微博热搜使用 browser.navigate 打开 text https://s.weibo.com/top/summary第2步等待页面加载页面是动态渲染的需要等待热搜榜加载完成。使用browser.snapshot查看当前页面状态。如果页面还没加载完成继续等待或刷新。第3步提取数据使用browser.evaluate执行JS获取热搜列表constitemsdocument.querySelectorAll(.c-table tbody tr)return[...items].slice(0,15).map(item{constrankitem.querySelector(.td-01).innerTextconsttitleitem.querySelector(.td-02 a).innerTextconsthotitem.querySelector(.td-02 span)?.innerText||return${rank}.${title}${hot}})第4步格式化输出 微博热搜榜 1. xxx热度过万 2. xxx热度8000 ... 数据来源微博 | 时间xxx注意事项微博有反爬机制可能需要登录如果访问失败尝试直接访问移动版https://m.weibo.cn返回结果要包含排名、标题、热度3.4 测试用户帮我看看微博热搜 AI → browser.navigate(https://s.weibo.com/top/summary) → browser.snapshot() → browser.evaluate(...) → 格式化输出四、进阶多步骤自动化browser工具的真正威力在于多步骤串联。4.1 案例自动登录知乎---name:zhihu_logindescription:自动登录知乎需要提供账号密码---# 知乎自动登录## 触发场景用户说帮我登录知乎、登录我的知乎账号## 执行步骤### 第1步打开知乎登录页javascript await browser.navigate(https://www.zhihu.com/signin) await browser.snapshot()第2步输入用户名awaitbrowser.click([nameusername])awaitbrowser.type([nameusername],你的手机号)第3步点击获取验证码awaitbrowser.click(.SignFlow-tab)awaitbrowser.click(.SignFlow-sendInput-button)第4步等待用户输入验证码AI应该提示用户验证码已发送到手机请在30秒内输入。第5步完成登录// 用户手动输入验证码后awaitbrowser.click(.SignFlow-submitButton)awaitbrowser.snapshot()// 验证是否登录成功注意这个Skill需要用户配合输入验证码不能自动跳过验证码这是安全机制登录状态会保持直到退出或过期五、进阶数据提取与保存浏览器自动化最强大的场景之一提取网页数据并保存。5.1 案例定期抓取B站热门视频---name:bilibili_trenddescription:获取B站热门视频排行榜---# B站热门榜查询## 触发场景-用户问B站热门-用户说今天B站什么视频火-用户说帮我看看哔哩哔哩排行榜## 执行步骤### 第1步访问B站排行榜javascript await browser.navigate(https://www.bilibili.com/v/popular/rank/all) await browser.snapshot()第2步等待内容加载B站是SPA单页应用需要等待视频列表渲染。检查是否有多于0个视频元素如果有则继续。第3步提取数据constvideosawaitbrowser.evaluate((){return[...document.querySelectorAll(.video-item)].slice(0,20).map(item{consttitleitem.querySelector(.title).innerTextconstauthoritem.querySelector(.author).innerTextconstplayitem.querySelector(.play).innerTextconstlikeitem.querySelector(.like).innerTextreturn{title,author,play,like}})})第4步格式化输出 B站热门榜 {videos[0].title} UP主{videos[0].author} | 播放{videos[0].play} | 点赞{videos[0].like} {videos[1].title} UP主{videos[1].author} | 播放{videos[1].play} | 点赞{videos[1].like} ...展示前10第5步保存数据可选如果用户要求每天定时发送可以将数据保存到文件或数据库。// 保存为JSONconstfsrequire(fs)constdata{date:newDate().toISOString(),platform:bilibili,videos:videos}fs.writeFileSync(/tmp/bilibili-trend.json,JSON.stringify(data,null,2))注意事项B站有反爬限制频繁访问可能需要登录排行榜每2小时更新一次视频标题可能包含emoji需要清理六、调试技巧6.1 查看页面快照// 获取当前页面所有可交互元素constsnapshotawaitbrowser.snapshot()console.log(JSON.stringify(snapshot,null,2))输出会包含当前URL页面标题所有可点击的按钮、链接所有输入框所有图片用于验证截图6.2 截图debug// 在关键步骤截图awaitbrowser.screenshot({path:/tmp/step1.png})// 出现问题时截图try{awaitbrowser.click(.login-button)}catch(e){awaitbrowser.screenshot({path:/tmp/error.png})throwe}6.3 等待技巧// 等待元素出现最多等10秒awaitbrowser.waitForSelector(.hot-list,{timeout:10000})// 等待页面加载完成awaitbrowser.waitForLoadState(networkidle)// 等待某个条件awaitbrowser.waitForFunction((){returndocument.querySelectorAll(.item).length0})七、常见问题Q1: 页面加载慢怎么办// 增加超时时间awaitbrowser.navigate(https://example.com,{waitUntil:networkidle,// 等待网络空闲timeout:30000// 30秒超时})Q2: 元素找不到// 先用snapshot看页面结构constpageawaitbrowser.snapshot()// 检查选择器是否正确// 注意很多网站动态生成class可能需要用其他选择器awaitbrowser.click(text登录)// 用文本选择器awaitbrowser.click([aria-label搜索])// 用aria属性Q3: 被反爬了怎么办// 设置User-Agentawaitbrowser.extra.setExtraHTTPHeaders({User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64) ...})// 或者用stealth模式// 注意频繁访问仍然可能被限制Q4: 登录状态如何保持// 保存浏览器上下文awaitbrowser.contexts[0].storageState({path:/tmp/zhihu-state.json})// 下次使用时恢复awaitbrowser.newContext({storageState:/tmp/zhihu-state.json})八、总结今天我们学会了✅ browser工具是什么操作浏览器的瑞士军刀✅ 如何用navigate snapshot evaluate组合抓取数据✅ 编写微博热搜、B站热门等Skill✅ 多步骤自动化登录、填表、提交✅ 调试技巧snapshot、screenshot、wait更多内容如果你对AI开发、Agent实战感兴趣欢迎关注公众号【码头码农】每日AI热点解读实战项目复盘技术成长心得