JavaScriptNode.jsAI
OpenClaw 视觉操作实战：AI 直接点按钮操作软件
介绍 OpenClaw 自动化操作工具，通过视觉快照系统实现无需 API 和选择器的界面操作。核心功能包括告别元素定位地狱、自适应界面变化及跨应用操作。实战部分涵盖环境安装、视觉模式启动、脚本编写及报表自动下载。支持桌面软件操作与定时任务，强调本地数据安全。新手需注意动态加载、弹窗处理及 API 额度控制等问题。旨在帮助用户从手动操作升级为 AI 监工，提升效率。
介绍 OpenClaw 自动化操作工具，通过视觉快照系统实现无需 API 和选择器的界面操作。核心功能包括告别元素定位地狱、自适应界面变化及跨应用操作。实战部分涵盖环境安装、视觉模式启动、脚本编写及报表自动下载。支持桌面软件操作与定时任务，强调本地数据安全。新手需注意动态加载、弹窗处理及 API 额度控制等问题。旨在帮助用户从手动操作升级为 AI 监工，提升效率。
你有没有遇到过这种情况：老板让你把 Excel 里的 1000 条客户信息，一条条复制到某个网页后台里。没有接口，没有导入功能，只有个破网页表单。你坐在那儿像个机器人一样，复制、粘贴、点提交，再复制、再粘贴，手指都快得腱鞘炎了。
或者你想自动抓取某个网站的数据，但那个网站反爬虫做得贼溜，API 接口层层加密，你写爬虫写到头发掉光，最后发现人家改版了，你的代码全废。
传统自动化工具比如 Selenium、Playwright，确实能解决这些问题。但说实话，写选择器（Selector）就像是在玩'大家来找茬'——你得精确找到那个按钮的 XPath 或 CSS 类名，网页一改版，全得重来。这就好比你教一个盲人找开关，必须精确到'门框右边第三块砖上方 15 厘米处'，稍微装修一下，他就找不着北了。
今天聊的 OpenClaw，走了一条完全不同的路子：它让 AI 像人一样'看'屏幕，用眼睛找按钮，而不是背坐标。
OpenClaw 这玩意儿，2025 年底刚冒出来那会儿叫 Clawdbot，后来改名叫 Moltbot，最后定名 OpenClaw。短短三个月，GitHub 上星星数冲破 21 万，比 Docker、Kubernetes 当年火得还快。
简单说，它是个住在你自己电脑里的 AI 管家。不同于 ChatGPT 那种'你问一句我答一句'的聊天机器人，OpenClaw 能直接动手干活——操作浏览器、读写文件、执行命令、控制各种软件。最狠的是，它支持'视觉操作'模式，不需要你提供 API 文档，也不需要写复杂的选择器，它直接看着屏幕操作，跟人类一样。
打个比方，传统 RPA（机器人流程自动化）工具像是一个严格按照说明书组装家具的工人，说明书上写'把螺丝 A 拧进孔 B'，万一孔 B 的位置变了，他就傻眼了。OpenClaw 则像是一个真的人，他看着图纸，发现孔位变了，照样能找到该拧螺丝的地方。
OpenClaw 的视觉操作靠的是一套叫Snapshot快照系统。这玩意儿的工作原理特别有意思：
当你让 OpenClaw 操作网页时，它不是去解析 HTML 代码找 id 或 class，而是直接对当前页面进行'视觉扫描'，把所有可交互的元素——按钮、输入框、链接——都编上号。比如发现页面有 20 个可点击的元素，它就会给它们标上 [1]、[2]、[3]…
然后 AI 大模型（比如 Claude 或 GPT）看着这个带编号的截图，理解页面结构，决定点哪个编号。比如它发现'提交'按钮旁边标着 [15]，就会下发指令：'点击元素 15'。
这种方式有几个巨大的好处：
以前用 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，只要按钮上写着'提交'，它就能认出来。
软件更新了，按钮从左边挪到右边？传统脚本直接崩。OpenClaw 的 AI 会重新截图，重新识别，照样能找到按钮。
不仅限于浏览器，OpenClaw 还能操作桌面应用。原理类似——通过屏幕截图+OCR 识别，找到'文件'菜单、'保存'按钮，然后模拟鼠标点击。
光说不练假把式。下面来个完整的实战：让 OpenClaw 自动帮你填写一个网页表单。假设我们要每天自动登录某个后台，下载昨天的销售数据。
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）。
OpenClaw 提供了一个浏览器控制模块。我们要启动一个特殊的 Chromium 实例，这个浏览器是独立的，跟你平时上网的浏览器完全隔离，保证安全：
# 启动 OpenClaw Gateway
openclaw gateway --browser
这会启动一个本地 HTTP 服务，通常是 http://localhost:8080，同时打开一个干净的 Chromium 浏览器窗口。
接下来写个简单的自动化流程。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 执行。
登录后，假设我们要点进'报表中心'，下载昨天的 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 的做法是：
配置方式类似，只是指令变成：
# 截图并识别桌面应用
openclaw desktop snapshot --app "ERP Client"
# 执行操作
openclaw desktop act --instruction "点击菜单栏的'文件'，然后选择'导出数据'"
这种方式甚至能操作远程桌面、虚拟机里的软件，只要能看到画面，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 很强大，但新手用视觉操作时也容易踩坑：
有些网页是懒加载的，一开始没那么多元素，滚动才出现。这时候直接截图，AI 可能找不到目标。解决方法是先让 AI 执行滚动：
openclaw browser act --instruction "向下滚动直到看到'加载更多'按钮"
遇到系统弹窗（比如下载确认框），浏览器层面的 Snapshot 可能捕捉不到。这时候需要用到桌面视觉模式，而不是浏览器模式。
视觉操作需要把截图发给 AI 模型分析，一张图可能几百 KB，频繁操作会很快消耗 API 额度。建议本地部署视觉模型，或者控制操作频率。
每次页面刷新，元素的编号 [12] 可能会变。别硬编码编号，要让 AI 每次都重新看页面找元素。
OpenClaw 的视觉操作模式，本质上改变了我们和软件交互的方式。以前，你要让电脑干活，得先学会它的语言——HTML、CSS、XPath、API 文档。现在，你可以用人类的语言指挥 AI，让 AI 去学软件的语言，帮你点按钮、填表单、抓数据。
这就像工业革命，以前你要自己纺纱织布，后来有了机器，你只需要操作机器。现在更进一步，你连机器都不用自己操作，告诉 AI'去织块布'，它就自己去踩缝纫机了。
当然，AI 现在还不够完美，偶尔会认错按钮，或者遇到复杂的验证码搞不定。但相比以前写几百行选择器代码，现在的工作量已经减少了 90%。剩下的 10%，你坐在旁边喝咖啡，看着 AI 干活，偶尔纠正一下它的错误，从'码农'升级成了'监工'。
如果你经常遇到那种'没有接口，只能手动点'的重复性工作，不妨试试 OpenClaw。反正代码是开源的，搭个环境试试不要钱。说不定试完之后，你会发现：原来那些枯燥的重复劳动，真的可以交给一个不知疲倦的数字长工来完成。
微信公众号「极客日志」，在微信中扫描左侧二维码关注。展示文案：极客日志 zeeklog
生成新的随机RSA私钥和公钥pem证书。 在线工具，RSA密钥对生成器在线工具，online
基于 Mermaid.js 实时预览流程图、时序图等图表，支持源码编辑与即时渲染。 在线工具，Mermaid 预览与可视化编辑在线工具，online
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online