跳转到内容
AI 技能学习站

浏览器操作 (browse)

浏览器操作（browse）

Section titled “浏览器操作（browse）”

概述

Section titled “概述”

browse 让 AI 使用浏览器进行自动化操作。它的核心是：通过浏览器完成网页交互、自动化测试、信息抓取等任务。

作为程序员，你可能遇到过：

  • “我需要自动化测试这个 UI”——手动测试太麻烦
  • “我想抓取这个网站的内容”——但不想写爬虫
  • “我需要截这个页面的图”——但不会自动化

browse 就是解决这些的。

核心能力

Section titled “核心能力”

1. 网页浏览

Section titled “1. 网页浏览”
Terminal window
# 访问网页
browse https://example.com


# 获取页面内容
browse --content https://example.com

2. 元素交互

Section titled “2. 元素交互”
Terminal window
# 点击按钮
click "#submit-btn"


# 填写表单
fill "#username", "myuser"
fill "#password", "mypass"


# 选择下拉框
select "#country", "CN"

3. 截图

Section titled “3. 截图”
Terminal window
# 截图
screenshot


# 元素截图
screenshot "#modal"

4. 信息提取

Section titled “4. 信息提取”
Terminal window
# 提取文本
extract text from ".article-title"


# 提取链接
extract links from "nav a"


# 提取表格
extract table from ".data-table"

使用场景

Section titled “使用场景”

场景 1：自动化测试

Section titled “场景 1：自动化测试”
你想测试用户注册流程：


1. 打开注册页
   browse https://example.com/register


2. 填写表单
   fill "#email", "test@example.com"
   fill "#password", "Password123!"


3. 点击注册
   click "#register-btn"


4. 验证结果
   wait for ".success-message"

场景 2：数据抓取

Section titled “场景 2：数据抓取”
你想抓取新闻列表：


1. 打开新闻页
   browse https://news.example.com


2. 提取标题
   extract text from ".news-title"


3. 提取链接
   extract links from ".news-item a"


4. 提取内容
   extract text from ".news-content"

场景 3：界面验证

Section titled “场景 3：界面验证”
你想验证页面 UI：


1. 打开页面
   browse https://example.com


2. 截图
   screenshot


3. 检查元素
   exists "#modal"
   visible ".sidebar"


4. 检查样式
   get css "#button", "background-color"

常用命令

Section titled “常用命令”

基本操作

Section titled “基本操作”
Terminal window
# 打开页面
open https://example.com


# 刷新
refresh


# 返回
back


# 前进
forward


# 等待
wait 3 seconds
wait for ".content"

交互操作

Section titled “交互操作”
Terminal window
# 点击
click "#button"
click ".menu-item:first"


# 输入
type "search query"
fill "#input", "value"


# 选择
select "#dropdown", "option-value"
check "#checkbox"
uncheck "#checkbox"


# 滚动
scroll down
scroll to bottom
scroll to "#element"

提取操作

Section titled “提取操作”
Terminal window
# 提取文本
get text
get text from ".title"


# 提取属性
get href from "a"
get src from "img"


# 提取 HTML
get html
get html from ".container"

实践案例

Section titled “实践案例”

案例 1：电商下单流程

Section titled “案例 1：电商下单流程”
1. 打开商品页
   browse https://shop.example.com/product/123


2. 添加到购物车
   click ".add-to-cart"


3. 打开购物车
   click ".cart-icon"


4. 点击结算
   click ".checkout"


5. 填写信息
   fill "#name", "张三"
   fill "#phone", "13800138000"
   fill "#address", "北京市..."


6. 选择支付
   select "#payment", "alipay"


7. 确认订单
   click ".confirm-order"


8. 验证结果
   wait for ".order-success"

案例 2：网站监控

Section titled “案例 2：网站监控”
1. 打开目标网站
   browse https://example.com


2. 检查关键元素
   exists ".login-button"
   exists "#user-avatar"


3. 截图记录
   screenshot "homepage.png"


4. 检查响应时间
   measure load time

注意事项

Section titled “注意事项”

1. 等待时间

Section titled “1. 等待时间”
Terminal window
# 动态内容需要等待
wait for ".dynamic-content"


# 不要假设页面立即加载完成

2. iframe

Section titled “2. iframe”
Terminal window
# 进入 iframe
switch to frame "iframe-name"


# 退出 iframe
switch to default

3. 弹窗

Section titled “3. 弹窗”
Terminal window
# 处理 alert
accept alert
dismiss alert


# 处理确认框
accept confirm
dismiss confirm

速查卡片

Section titled “速查卡片”

核心能力

  • 网页浏览
  • 元素交互
  • 截图
  • 信息提取

使用场景

  • 自动化测试
  • 数据抓取
  • 界面验证
  • 监控

常用命令

  • open/click/fill
  • extract/screenshot
  • wait/switch

与其他技能

Section titled “与其他技能”
  • qa - QA 测试
  • audit - 代码质量审计
  • investigate - 问题调查

查看源文件: GitHub原始文件