OpenClaw 浏览器自动化实战：让 AI 模拟人类操作网页

选择建议：

• 个人使用、日常任务 → 内置浏览器
• 需要保持登录态 → CDP 模式
• 需要接管用户当前页 → 扩展插件
• 服务器批量任务 → 远程浏览器

快速上手：不依赖 API 的数据抓取

我们用浏览器自动化的思路，改造之前的热榜查询，不再依赖外部 API，直接爬取：

// 访问微博热搜
const result = await browser.navigate('https://weibo.com/hot')

// 获取快照了解页面结构
const page = await browser.snapshot()

// 提取热搜标题
const titles = await browser.evaluate(() => {
  return [...document.querySelectorAll('.hot-item .title')].map(el => el.innerText).slice(0, 10)
})

console.log(titles)

这就是浏览器自动化的威力——不依赖 API，直接操作网页。

实战：自动获取微博热搜

方案对比

获取微博热搜主要有两种方式：

适用场景：

• 定时任务、批量获取 → 用 API（省资源）
• 获取详细内容、分析页面 → 用浏览器（更灵活）

编写 Skill

下面演示如何用 browser 获取微博热搜，作为入门案例。

---
name: weibo_hot_browser
description: 获取微博热搜榜单，了解最新热点话题（浏览器方式）
---
# 微博热搜查询（browser 版）

## 什么时候触发
- 用户问 "微博热搜"
- 用户说 "今天有什么热点"
- 用户说 "帮我看看微博"

## 如何执行

### 访问微博热搜
使用 `browser.navigate` 打开：
```text
https://s.weibo.com/top/summary

等待页面加载

页面是动态渲染的，需要等待热搜榜加载完成。使用 browser.snapshot 查看当前页面状态。如果页面还没加载完成，继续等待或刷新。

提取数据

使用 browser.evaluate 执行 JS 获取热搜列表：

const items = document.querySelectorAll('.c-table tbody tr')
return [...items].slice(0, 15).map(item => {
  const rank = item.querySelector('.td-01').innerText
  const title = item.querySelector('.td-02 a').innerText
  const hot = item.querySelector('.td-02 span')?.innerText || ''
  return `${rank}. ${title}${hot}`
})

格式化输出

🔥 微博热搜榜

1. xxx（热度过万）
2. xxx（热度 8000） ... 数据来源：微博 | 时间：xxx

注意事项：

• 微博有反爬机制，可能需要登录
• 如果访问失败，尝试直接访问移动版：https://m.weibo.cn
• 返回结果要包含排名、标题、热度

测试时，用户输入'帮我看看微博热搜'，AI 将依次执行导航、快照、JS 评估并输出结果。

## 进阶：多步骤自动化

browser 工具的真正威力在于**多步骤串联**。

### 案例：自动登录知乎

```yaml
---
name: zhihu_login
description: 自动登录知乎（需要提供账号密码）
---
# 知乎自动登录

## 触发场景
用户说 "帮我登录知乎"、"登录我的知乎账号"

## 执行步骤

### 打开知乎登录页
```javascript
await browser.navigate('https://www.zhihu.com/signin')
await browser.snapshot()

输入用户名

await browser.click('[name="username"]')
await browser.type('[name="username"]', '你的手机号')

点击获取验证码

await browser.click('.SignFlow-tab')
await browser.click('.SignFlow-sendInput-button')

等待用户输入验证码

AI 应提示用户：验证码已发送到手机，请在 30 秒内输入。

完成登录

// 用户手动输入验证码后
await browser.click('.SignFlow-submitButton')
await browser.snapshot()
// 验证是否登录成功

注意：

• 这个 Skill 需要用户配合（输入验证码）
• 不能自动跳过验证码，这是安全机制
• 登录状态会保持，直到退出或过期

进阶：数据提取与保存

浏览器自动化最强大的场景之一：提取网页数据并保存。

案例：定期抓取 B 站热门视频

---
name: bilibili_trend
description: 获取 B 站热门视频排行榜
---
# B 站热门榜查询

## 触发场景
- 用户问 "B 站热门"
- 用户说 "今天 B 站什么视频火"
- 用户说 "帮我看看哔哩哔哩排行榜"

## 执行步骤

### 访问 B 站排行榜
```javascript
await browser.navigate('https://www.bilibili.com/v/popular/rank/all')
await browser.snapshot()

等待内容加载

B 站是 SPA（单页应用），需要等待视频列表渲染。检查是否有多于 0 个视频元素，如果有则继续。

提取数据

const videos = await browser.evaluate(() => {
  return [...document.querySelectorAll('.video-item')].slice(0, 20).map(item => {
    const title = item.querySelector('.title').innerText
    const author = item.querySelector('.author').innerText
    const play = item.querySelector('.play').innerText
    const like = item.querySelector('.like').innerText
    return { title, author, play, like }
  })
})

格式化输出

📺 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）

保存数据（可选）

如果用户要求 "每天定时发送"，可以将数据保存到文件或数据库。

// 保存为 JSON
const fs = require('fs')
const data = {
  date: new Date().toISOString(),
  platform: 'bilibili',
  videos: videos
}
fs.writeFileSync('/tmp/bilibili-trend.json', JSON.stringify(data, null, 2))

注意事项：

• B 站有反爬限制，频繁访问可能需要登录
• 排行榜每 2 小时更新一次
• 视频标题可能包含 emoji，需要清理

调试技巧

查看页面快照

// 获取当前页面所有可交互元素
const snapshot = await browser.snapshot()
console.log(JSON.stringify(snapshot, null, 2))

输出会包含当前 URL、页面标题、所有可点击的按钮链接、输入框及图片信息。

截图 Debug

// 在关键步骤截图
await browser.screenshot({ path: '/tmp/step1.png' })

// 出现问题时截图
try {
  await browser.click('.login-button')
} catch (e) {
  await browser.screenshot({ path: '/tmp/error.png' })
  throw e
}

等待技巧

// 等待元素出现（最多等 10 秒）
await browser.waitForSelector('.hot-list', { timeout: 10000 })

// 等待页面加载完成
await browser.waitForLoadState('networkidle')

// 等待某个条件
await browser.waitForFunction(() => {
  return document.querySelectorAll('.item').length > 0
})

常见问题

Q1: 页面加载慢怎么办？ 增加超时时间：

await browser.navigate('https://example.com', {
  waitUntil: 'networkidle',
  timeout: 30000 // 30 秒超时
})

Q2: 元素找不到？ 先用 snapshot 看页面结构，检查选择器是否正确。很多网站动态生成 class，可能需要用其他选择器：

await browser.click('text=登录') // 用文本选择器
await browser.click('[aria-label="搜索"]') // 用 aria 属性

Q3: 被反爬了怎么办？ 设置 User-Agent 或使用 stealth 模式：

await browser.extra.setExtraHTTPHeaders({
  'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64) ...'
})

注意：频繁访问仍然可能被限制。

Q4: 登录状态如何保持？ 保存浏览器上下文：

// 保存
await browser.contexts[0].storageState({ path: '/tmp/zhihu-state.json' })
// 恢复
await browser.newContext({ storageState: '/tmp/zhihu-state.json' })

总结

今天我们掌握了：

• browser 工具的核心能力（操作浏览器的瑞士军刀）
• 如何使用 navigate + snapshot + evaluate 组合抓取数据
• 编写微博热搜、B 站热门等 Skill
• 多步骤自动化流程（登录、填表、提交）
• 调试技巧（snapshot、screenshot、wait）

浏览器自动化让 AI 具备了更强的现实世界交互能力，是构建复杂 Agent 的关键一环。