让AI像人类一样"逛"网页——点击、输入、截图无所不能
浏览器自动化(Browser Automation)是通过程序控制浏览器执行人类操作的技术——点击按钮、填写表单、滚动页面、截取屏幕。就像给AI配了一双"看得见的手",让它能操作任何网页。
SPA应用、AJAX加载的内容,普通HTTP请求抓不到,必须用真实浏览器
模拟真实用户行为,降低被识别为机器人的概率
截图对比UI变化,验证页面渲染是否正确
自动化测试用户完整操作流程
| 组件 | 作用 | 代表工具 |
|---|---|---|
| 浏览器引擎 | 实际渲染网页 | Chromium, Firefox, WebKit |
| 控制协议 | 程序与浏览器通信 | Chrome DevTools Protocol (CDP) |
| 自动化框架 | 提供高级API | Playwright, Puppeteer, Selenium |
能看到浏览器窗口,适合调试和演示
后台静默运行,节省资源,适合生产环境
browser工具,基于Playwright技术栈,让你无需配置环境即可使用浏览器自动化!
// OpenClaw browser工具的核心功能
{
"action": "snapshot", // 获取页面结构快照
"action": "click", // 点击元素
"action": "type", // 输入文本
"action": "navigate", // 页面导航
"action": "screenshot", // 页面截图
"action": "evaluate" // 执行JavaScript
}
// 步骤1:打开登录页面
await browser({ action: "open", url: "https://example.com/login" });
// 步骤2:获取页面快照
const snapshot = await browser({ action: "snapshot" });
// 步骤3:填写登录表单
await browser({
action: "act",
request: { kind: "fill", ref: "username-input", text: "username" }
});
// 步骤4:点击登录
await browser({
action: "act",
request: { kind: "click", ref: "login-button" }
});
// 步骤5:等待并获取数据
await browser({ action: "act", request: { kind: "wait", loadState: "networkidle" } });
const data = await browser({
action: "evaluate",
fn: "() => document.querySelector('.dashboard').innerText"
});