mcpField
B
browser-automation

browser-automation

github.com/sophieguanongitProductivity2.9k installs
Repository

About browser-automation

browser-automation is an OpenClaw skill for controlling a browser through page navigation, interaction, and inspection. It reuses the current page by default and keeps login state in a dedicated user-data directory.

Key features

  1. 01Navigate and open pages
  2. 02Click, type, and fill forms
  3. 03Capture screenshots and read page content
  4. 04Wait for elements and navigation
  5. 05Run JavaScript and upload files
  6. 06Reuse pages and persist cookies

Use cases

  1. 01Open a website and inspect its contents
  2. 02Complete and submit web forms
  3. 03Capture a page or full-page screenshot
  4. 04Automate interactions in a logged-in session

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/sophieguanongit/openclaw-browser-automation --skill browser-automation

After installing, type/browser-automationin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

.gitignore
package.json
package-lock.json
README.md
index.js
TOOLS.md

Details

From the project README

浏览器自动化 Skill

让 OpenClaw 控制浏览器进行自动化操作！

特点

  • 复用页面：默认复用现有页面，不会每次都打开新窗口
  • 持久化 Cookie：使用独立的用户数据目录，登录状态持久保存
  • 完整操作：支持点击、填表、截图、执行 JS 等

功能

  • 导航到 URL
  • 点击元素
  • 填写表单
  • 截图
  • 获取页面内容
  • 等待元素
  • 执行 JavaScript

使用时机

当用户说：

  • "打开 xxx.com"
  • "点击登录按钮"
  • "帮我填写这个表单"
  • "截个图"
  • "网页上有什么内容"

可用函数

调用方式: cd C:/Users/admin/.openclaw/skills/browser-automation && node -e "const h=require('./index.js'); h.handleXXX({...}).then(console.log)"

页面操作
  • handleNavigate({url}) - 导航到 URL（复用现有页面）
  • handleNewPage({url}) - 打开新页面
  • handleScreenshot({selector?, fullPage?}) - 截图
  • handleGetContent({selector?}) - 获取页面内容
  • handleClose() - 关闭当前页面
交互操作
  • handleClick({selector}) - 点击元素
  • handleFill({selector, value, clear?}) - 填写表单
  • handleType({selector, text, delay?}) - 模拟打字
  • handleSelect({selector, value}) - 下拉选择
  • handleCheck({selector, checked?}) - 勾选/取消勾选
等待和获取
  • handleWait({selector, timeout?}) - 等待元素出现
  • handleWaitForNavigation({timeout?}) - 等待页面跳转
  • handleGetText({selector}) - 获取元素文本
  • handleGetValue({selector}) - 获取表单值
  • handleGetAttribute({selector, attribute}) - 获取属性
高级操作
  • handleEvaluate({script}) - 执行 JavaScript
  • handleUpload({selector, filePath}) - 上传文件
  • handlePress({key}) - 按键
  • handleHover({selector}) - 鼠标悬停
  • handleScroll({direction, amount?}) - 滚动页面
状态
  • handleStatus() - 获取当前浏览器状态
  • handleCloseBrowser() - 关闭浏览器（下次会重新启动）

选择器语法

支持 CSS 选择器和文本选择器：

  • CSS: #login-btn, .submit-button, input[name="email"]
  • 文本: text=登录, text=提交
  • 组合: button:has-text("提交")

示例

用户: 打开 github.com
Agent: [调用 handleNavigate({url: 'https://github.com'})] 已打开 GitHub...

用户: 点击登录
Agent: [调用 handleClick({selector: 'text=Sign in'})] 已点击登录...

用户: 填写邮箱 [email protected]
Agent: [调用 handleFill({selector: '#login_field', value: '[email protected]'})] 已填写邮箱...

用户: 截个图看看
Agent: [调用 handleScreenshot()] [返回截图]

Comments

Markdown supported