跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客我的书AI学习GitHub 精选镜像AI工具UI配色美学关于
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
JavaScriptNode.jsAI

OpenClaw 视觉操作实战:AI 直接点按钮操作软件

介绍 OpenClaw 自动化操作工具,通过视觉快照系统实现无需 API 和选择器的界面操作。核心功能包括告别元素定位地狱、自适应界面变化及跨应用操作。实战部分涵盖环境安装、视觉模式启动、脚本编写及报表自动下载。支持桌面软件操作与定时任务,强调本地数据安全。新手需注意动态加载、弹窗处理及 API 额度控制等问题。旨在帮助用户从手动操作升级为 AI 监工,提升效率。

不羁发布于 2026/4/5更新于 2026/10/25136 浏览
OpenClaw 视觉操作实战:AI 直接点按钮操作软件

前言

你有没有遇到过这种情况:老板让你把 Excel 里的 1000 条客户信息,一条条复制到某个网页后台里。没有接口,没有导入功能,只有个破网页表单。你坐在那儿像个机器人一样,复制、粘贴、点提交,再复制、再粘贴,手指都快得腱鞘炎了。

或者你想自动抓取某个网站的数据,但那个网站反爬虫做得贼溜,API 接口层层加密,你写爬虫写到头发掉光,最后发现人家改版了,你的代码全废。

传统自动化工具比如 Selenium、Playwright,确实能解决这些问题。但说实话,写选择器(Selector)就像是在玩'大家来找茬'——你得精确找到那个按钮的 XPath 或 CSS 类名,网页一改版,全得重来。这就好比你教一个盲人找开关,必须精确到'门框右边第三块砖上方 15 厘米处',稍微装修一下,他就找不着北了。

今天聊的 OpenClaw,走了一条完全不同的路子:它让 AI 像人一样'看'屏幕,用眼睛找按钮,而不是背坐标。

一、OpenClaw 是啥?你的数字长工

OpenClaw 这玩意儿,2025 年底刚冒出来那会儿叫 Clawdbot,后来改名叫 Moltbot,最后定名 OpenClaw。短短三个月,GitHub 上星星数冲破 21 万,比 Docker、Kubernetes 当年火得还快。

简单说,它是个住在你自己电脑里的 AI 管家。不同于 ChatGPT 那种'你问一句我答一句'的聊天机器人,OpenClaw 能直接动手干活——操作浏览器、读写文件、执行命令、控制各种软件。最狠的是,它支持'视觉操作'模式,不需要你提供 API 文档,也不需要写复杂的选择器,它直接看着屏幕操作,跟人类一样。

打个比方,传统 RPA(机器人流程自动化)工具像是一个严格按照说明书组装家具的工人,说明书上写'把螺丝 A 拧进孔 B',万一孔 B 的位置变了,他就傻眼了。OpenClaw 则像是一个真的人,他看着图纸,发现孔位变了,照样能找到该拧螺丝的地方。

二、视觉操作的核心:Snapshot 快照系统

OpenClaw 的视觉操作靠的是一套叫Snapshot快照系统。这玩意儿的工作原理特别有意思:

当你让 OpenClaw 操作网页时,它不是去解析 HTML 代码找 id 或 class,而是直接对当前页面进行'视觉扫描',把所有可交互的元素——按钮、输入框、链接——都编上号。比如发现页面有 20 个可点击的元素,它就会给它们标上 [1]、[2]、[3]…

然后 AI 大模型(比如 Claude 或 GPT)看着这个带编号的截图,理解页面结构,决定点哪个编号。比如它发现'提交'按钮旁边标着 [15],就会下发指令:'点击元素 15'。

这种方式有几个巨大的好处:

1. 告别元素定位地狱

以前用 Selenium,你得写这种代码:

# 传统方式:找元素找到怀疑人生
submit_button = driver.find_element(By.CSS_SELECTOR, "div.container > button.btn-primary:nth-child(3)")

稍微改个 class 名就报错。现在用 OpenClaw,AI 直接看,管你 class 叫 btn 还是 button-v2-new,只要按钮上写着'提交',它就能认出来。

2. 自适应界面变化

软件更新了,按钮从左边挪到右边?传统脚本直接崩。OpenClaw 的 AI 会重新截图,重新识别,照样能找到按钮。

3. 跨应用操作

不仅限于浏览器,OpenClaw 还能操作桌面应用。原理类似——通过屏幕截图+OCR 识别,找到'文件'菜单、'保存'按钮,然后模拟鼠标点击。

三、实战:手把手教你让 AI 自动填表

光说不练假把式。下面来个完整的实战:让 OpenClaw 自动帮你填写一个网页表单。假设我们要每天自动登录某个后台,下载昨天的销售数据。

步骤 1:安装与环境准备

OpenClaw 是开源的,基于 Node.js。首先你得有 Node.js 环境,然后用 npm 安装:

# 克隆仓库
git clone https://github.com/openclaw/openclaw.git
cd openclaw
# 安装依赖
npm install
# 安装浏览器自动化依赖(Playwright)
npx playwright install chromium

安装完成后,配置你的 AI 模型 API Key。OpenClaw 支持 OpenAI、Anthropic 的 API,也支持本地模型(比如 Ollama 跑的 Llama)。

步骤 2:启动视觉模式

OpenClaw 提供了一个浏览器控制模块。我们要启动一个特殊的 Chromium 实例,这个浏览器是独立的,跟你平时上网的浏览器完全隔离,保证安全:

# 启动 OpenClaw Gateway
openclaw gateway --browser

这会启动一个本地 HTTP 服务,通常是 http://localhost:8080,同时打开一个干净的 Chromium 浏览器窗口。

步骤 3:编写自动化脚本

接下来写个简单的自动化流程。OpenClaw 的命令行工具支持直接发送指令:

# 让浏览器导航到目标网站
openclaw browser navigate --url "https://example-admin.com/login"
# 等待页面加载完成,获取快照
openclaw browser snapshot --output login_page.json

这时候,OpenClaw 会返回一个 JSON,里面包含当前页面所有可交互元素的编号和描述。比如:

{"elements":[{"id":1,"type":"input","label":"用户名"},{"id":2,"type":"input","label":"密码"},{"id":3,"type":"button","text":"登录"}]}

然后你告诉 AI 要干嘛。OpenClaw 内置了 AI 理解层,你可以用自然语言:

# 让 AI 理解页面并执行登录(视觉模式)
openclaw browser act --instruction "在用户名框输入'admin',密码框输入'123456',然后点击登录按钮" --use-vision

背后的流程是:OpenClaw 截图→送给 AI 模型→AI 返回具体操作(如在元素 1 输入文字,点击元素 3)→OpenClaw 执行。

步骤 4:进阶:自动下载报表

登录后,假设我们要点进'报表中心',下载昨天的 Excel。继续:

# AI 会自动识别'报表中心'链接并点击
openclaw browser act --instruction "找到并点击'报表中心'或'Reports'链接" --use-vision
# 等待页面加载
sleep 2
# 选择日期(假设有个日期选择器)
openclaw browser act --instruction "在起始日期选择昨天的日期,格式 2026-03-03" --use-vision
# 点击下载按钮
openclaw browser act --instruction "点击下载 Excel 或 Export 按钮" --use-vision
# 等待下载完成,移动文件到指定目录
openclaw exec --command "mv ~/Downloads/yesterday_report.xlsx ~/data/daily/"

看到没?全程没写一行 CSS 选择器,全靠 AI'看'页面自己找按钮。这就像你雇了个实习生,你跟他说'去把那个红色的下载按钮点了',而不是给他写一份《按钮定位坐标说明书》。

四、不止浏览器:桌面软件也能点

OpenClaw 的视觉能力不仅限于网页。通过集成计算机视觉和 OCR,它还能操作桌面应用。

比如你有个老旧的 ERP 客户端,没有 API,只有个 Windows 界面。传统自动化得靠 PyAutoGUI 硬编码坐标,屏幕分辨率一变就完蛋。OpenClaw 的做法是:

  1. 截取屏幕快照
  2. OCR 识别文字和按钮位置
  3. AI 理解'文件'菜单在哪,'导出'按钮在哪
  4. 模拟鼠标点击和键盘输入

配置方式类似,只是指令变成:

# 截图并识别桌面应用
openclaw desktop snapshot --app "ERP Client"
# 执行操作
openclaw desktop act --instruction "点击菜单栏的'文件',然后选择'导出数据'"

这种方式甚至能操作远程桌面、虚拟机里的软件,只要能看到画面,AI 就能操作。

五、定时任务:让 AI 自己起床干活

最爽的是,OpenClaw 支持Heartbeat(心跳)机制。你可以设置定时任务,让 AI 在特定时间自动执行操作,完全不需要你盯着。

编辑 config/heartbeat.yml:

tasks:
- name: "每日数据抓取"
  schedule: "0 9 * * *"
  actions:
  - type: browser
    instruction: "登录后台,下载昨日销售报表"
  - type: command
    instruction: "分析报表数据,生成摘要"
  - type: notify
    instruction: "把摘要发到我的 Telegram"

这样,每天早上 9 点,你的电脑就像有个隐形的员工,自动开机(如果你设置了唤醒),打开浏览器,登录网站,下载文件,分析数据,最后给你发条消息汇报:'老板,昨天的销售额是 5 万,比前天涨了 10%。'

六、数据安全:你的隐私留在本地

很多人担心:让 AI 看我屏幕,数据会不会泄露?

OpenClaw 设计之初就强调本地优先(Local-First)。所有操作都在你自己的机器上完成,截图不会上传到云端,除非你用了第三方的 AI API(比如调用 Claude 分析图片)。但即使你调用了 API,你也可以选择本地模型,比如用 Ollama 跑个 Llama 3.2 Vision,完全离线运行。

另外,OpenClaw 的浏览器是独立的 Chromium 实例,跟你平时用的 Chrome 完全隔离。它看不到你的收藏夹、密码、Cookie。你可以在隔离环境里登录工作账号,而你的个人浏览记录完全不受影响。

七、避坑指南:新手常踩的雷

虽然 OpenClaw 很强大,但新手用视觉操作时也容易踩坑:

1. 动态加载的坑

有些网页是懒加载的,一开始没那么多元素,滚动才出现。这时候直接截图,AI 可能找不到目标。解决方法是先让 AI 执行滚动:

openclaw browser act --instruction "向下滚动直到看到'加载更多'按钮"
2. 弹窗处理

遇到系统弹窗(比如下载确认框),浏览器层面的 Snapshot 可能捕捉不到。这时候需要用到桌面视觉模式,而不是浏览器模式。

3. API 额度控制

视觉操作需要把截图发给 AI 模型分析,一张图可能几百 KB,频繁操作会很快消耗 API 额度。建议本地部署视觉模型,或者控制操作频率。

4. 元素编号会变

每次页面刷新,元素的编号 [12] 可能会变。别硬编码编号,要让 AI 每次都重新看页面找元素。

八、总结:从'码农'到'监工'

OpenClaw 的视觉操作模式,本质上改变了我们和软件交互的方式。以前,你要让电脑干活,得先学会它的语言——HTML、CSS、XPath、API 文档。现在,你可以用人类的语言指挥 AI,让 AI 去学软件的语言,帮你点按钮、填表单、抓数据。

这就像工业革命,以前你要自己纺纱织布,后来有了机器,你只需要操作机器。现在更进一步,你连机器都不用自己操作,告诉 AI'去织块布',它就自己去踩缝纫机了。

当然,AI 现在还不够完美,偶尔会认错按钮,或者遇到复杂的验证码搞不定。但相比以前写几百行选择器代码,现在的工作量已经减少了 90%。剩下的 10%,你坐在旁边喝咖啡,看着 AI 干活,偶尔纠正一下它的错误,从'码农'升级成了'监工'。

如果你经常遇到那种'没有接口,只能手动点'的重复性工作,不妨试试 OpenClaw。反正代码是开源的,搭个环境试试不要钱。说不定试完之后,你会发现:原来那些枯燥的重复劳动,真的可以交给一个不知疲倦的数字长工来完成。

目录

  1. 前言
  2. 一、OpenClaw 是啥?你的数字长工
  3. 二、视觉操作的核心:Snapshot 快照系统
  4. 1. 告别元素定位地狱
  5. 传统方式:找元素找到怀疑人生
  6. 2. 自适应界面变化
  7. 3. 跨应用操作
  8. 三、实战:手把手教你让 AI 自动填表
  9. 步骤 1:安装与环境准备
  10. 克隆仓库
  11. 安装依赖
  12. 安装浏览器自动化依赖(Playwright)
  13. 步骤 2:启动视觉模式
  14. 启动 OpenClaw Gateway
  15. 步骤 3:编写自动化脚本
  16. 让浏览器导航到目标网站
  17. 等待页面加载完成,获取快照
  18. 让 AI 理解页面并执行登录(视觉模式)
  19. 步骤 4:进阶:自动下载报表
  20. AI 会自动识别'报表中心'链接并点击
  21. 等待页面加载
  22. 选择日期(假设有个日期选择器)
  23. 点击下载按钮
  24. 等待下载完成,移动文件到指定目录
  25. 四、不止浏览器:桌面软件也能点
  26. 截图并识别桌面应用
  27. 执行操作
  28. 五、定时任务:让 AI 自己起床干活
  29. 六、数据安全:你的隐私留在本地
  30. 七、避坑指南:新手常踩的雷
  31. 1. 动态加载的坑
  32. 2. 弹窗处理
  33. 3. API 额度控制
  34. 4. 元素编号会变
  35. 八、总结:从“码农”到“监工”

更多推荐文章

查看全部
  • 基于FPGA与MATLAB的超声多普勒频移解调应用
  • 家庭机器人落地难点分析:技术、成本与隐私
  • OpenClaw 实战部署:从服务器配置到 AI 员工养成指南
  • 县域烟花禁燃监管 GIS 实践:基于 Java 与高德地图的销售点盘点
  • 蜜罐技术原理、分类及 Hfish 部署实战
  • MySQL 约束机制详解:非空、主键与外键的实际作用
  • 阿里云配置 Zabbix 邮件发送
  • Qwen1.5-1.8B-GPTQ-Int4 结合 Chainlit 实现思维导图自动生成演示
  • 基于 YOLOv13 的无人机航拍电动自行车违规载人检测系统实战
  • C++ 实现基于 JSON 和 HTTP 协议的 Web 计算器服务器
  • Arduino BLDC 电机串口远程控制的工业巡检机器人方案
  • OpenClaw 本地部署与飞书集成实战
  • Clawdbot 接入飞书机器人的配置记录
  • 基于 Spring Cloud 的分布式智能推荐系统架构与实践
  • Dify 与 MySQL 深度融合:基于 MCP 协议的数据交互实践
  • 免费版 Trae 编辑器实测:排队机制与潜在风险
  • AMD 显卡加速 Whisper 语音识别:从环境配置到性能优化实战
  • Dify 与 MySQL 深度融合:基于 MCP 协议的数据交互实践
  • SpringBoot 多级缓存实战:Redis 与 Caffeine 结合优化 API 性能
  • 生产环境部署 Java 11:关键注意事项与许可变更

相关免费在线工具

  • RSA密钥对生成器

    生成新的随机RSA私钥和公钥pem证书。 在线工具,RSA密钥对生成器在线工具,online

  • Mermaid 预览与可视化编辑

    基于 Mermaid.js 实时预览流程图、时序图等图表,支持源码编辑与即时渲染。 在线工具,Mermaid 预览与可视化编辑在线工具,online

  • 随机西班牙地址生成器

    随机生成西班牙地址(支持马德里、加泰罗尼亚、安达卢西亚、瓦伦西亚筛选),支持数量快捷选择、显示全部与下载。 在线工具,随机西班牙地址生成器在线工具,online

  • Keycode 信息

    查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具,Keycode 信息在线工具,online

  • Escape 与 Native 编解码

    JavaScript 字符串转义/反转义;Java 风格 \uXXXX(Native2Ascii)编码与解码。 在线工具,Escape 与 Native 编解码在线工具,online

  • JavaScript / HTML 格式化

    使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具,JavaScript / HTML 格式化在线工具,online