OpenClaw 浏览器自动化:让 AI 真正替你操作电脑

导语：

前面几期我们学了搜索、定时任务、知识图谱。今天这个技能更猛——让 AI 控制你的浏览器，自动填表、点击按钮、截图、抓取数据。你只需要告诉它"要什么"，它帮你做完。

一、痛点：AI 这么聪明，却连个表单都填不了？

常见困境

Copy

你：帮我填一下这个在线表格

AI：好的，请问表格的网址是什么？

你：https://docs.qq.com/form/...

AI：抱歉，我无法直接访问网页表单...

你：帮我抢这个商品

AI：抱歉，我没有控制浏览器的能力...

问题在哪？

大多数 AI 只能"读"网页，不能"操作"网页

填表、点击、登录这些操作必须人手动完成

重复性的网页操作耗时费力

二、浏览器自动化技能简介

核心能力

功能	说明
打开/关闭网页	控制浏览器访问任意网站
点击/填写	模拟人工操作网页元素
截图/PDF	保存网页为图片或 PDF
多标签页	同时管理多个网页标签
会话保存	保存登录状态，跳过重复登录

技术原理

Copy

AI 指令 → agent-browser → Chromium 浏览器 → 网页操作 → 结果返回

三、安装步骤

第一步：安装依赖

Copy

npm install -g agent-browser

第二步：安装浏览器

Copy

agent-browser install

第三步：验证安装

Copy

agent-browser open https://www.baidu.com

agent-browser screenshot baidu.png

四、基础操作

Copy

打开网页

agent-browser open https://www.example.com

截图

agent-browser screenshot page.png

agent-browser screenshot --full fullpage.png

生成 PDF

agent-browser pdf document.pdf

五、核心操作：快照与交互

AI 不能直接"看懂"网页，需要通过**快照（Snapshot）**获取页面结构：

Copy

agent-browser snapshot -i --json

返回 JSON 格式的页面元素，每个元素有引用编号（如 e1、e2），AI 通过编号操作元素：

json

{

"success": true,

"data": {

"snapshot": "页面内容...",

"refs": {

"e1": {"role": "heading", "name": "页面标题"},

"e2": {"role": "button", "name": "提交"},

"e3": {"role": "textbox", "name": "用户名"}

}

六、实战操作

操作	命令
点击	`agent-browser click @e2`

填写agent-browser fill @e3 "内容"获取文本agent-browser get text @e1 --json获取链接agent-browser get attr @e2 "href" --json等待元素agent-browser wait @e2等待文本agent-browser wait --text "提交成功"滚动agent-browser scroll down 500回车agent-browser press Enter

七、实战案例

案例 1：自动搜索

Copy

1. 打开百度

agent-browser open https://www.baidu.com

2. 获取页面结构

agent-browser snapshot -i --json

3. AI 发现搜索框是 e1，输入关键词

agent-browser fill @e1 "OpenClaw 教程"

4. 按回车搜索

agent-browser press Enter

5. 等待结果加载

agent-browser wait --load networkidle

6. 再次获取结构，提取结果

agent-browser snapshot -i --json

案例 2：自动填表

Copy

1. 打开表单

agent-browser open https://docs.qq.com/form/...

2. 填写

agent-browser fill @e3 "张三"

agent-browser fill @e4 "13800138000"

3. 提交

agent-browser click @e7

案例 3：定时抢票

Copy

1. 打开秒杀页面

agent-browser open https://maoshe.com/seckill

2. 等待抢购按钮出现

agent-browser wait --text "立即抢购"

3. 立即点击

agent-browser snapshot -i --json

agent-browser click @e5

4. 填写信息并提交

agent-browser fill @e3 "你的手机号"

agent-browser click @e7

⚠️ 注意：实际秒杀场景需要极快速度，建议配合脚本优化

案例 4：自动登录保持

Copy

首次登录后保存状态

agent-browser state save auth.json

下次直接加载，无需重复登录

agent-browser state load auth.json

agent-browser open https://example.com/dashboard

八、高级功能

功能	命令
新标签页	`agent-browser tab new https://example.com`
切换标签	`agent-browser tab 2`
屏蔽广告	`agent-browser network route "*/ads/" --abort`
Mock API	`agent-browser network route "*/api/" --body '{"x":1}'`
保存会话	`agent-browser state save auth.json`
加载会话	`agent-browser state load auth.json`
多会话	`agent-browser --session admin open site.com`

九、最佳实践

✅ 应该做的

先做快照

— 每次页面变化后重新快照

适当等待

— 用 --load networkidle 等待网络完成

保存状态

— 登录后保存 auth.json

调试模式

— 用 --headed 查看浏览器窗口

❌ 避免这样做

不要省略快照

— 直接猜测元素编号容易出错

不要操作太快

— 加上适当的 wait

不要忽视错误

— 快照失败说明页面还没加载完

十、与 Selenium 对比

方面	agent-browser	Selenium
安装难度	⭐ 简单	⭐⭐⭐ 复杂
AI 集成	✅ 原生支持	❌ 需要适配
学习曲线	较低	较高
会话管理	✅ 简单	⚠️ 需要代码

总结

场景	没用之前	用了之后
填表	手动一个个填	AI 自动完成
截图	手动截多个页面	一条命令搞定
抢票	人肉盯着屏幕	AI 帮你抢
登录	每天重复登录	保存状态一键登录

今天就试试：

安装 agent-browser

打开一个网页

截图保存

尝试填写一个表单

💡下期预告：我们将学习如何让 OpenClaw 连接 100+ 国内外服务——使用 API Gateway 技能，一个配置连接所有常用工具。

👇 互动时间

本文使用 OpenClaw + agent-browser 技能辅助创作

关注「私享斋」，获取更多科技技能实操干货 👆