145 lines
4.0 KiB
Markdown
Executable File
145 lines
4.0 KiB
Markdown
Executable File
# Browser Use
|
||
|
||
> 相关：[[测试策略金字塔]]、[[Playwright]]、[[Computer_Use]]、[[MCP]]
|
||
|
||
## 定义
|
||
|
||
**Browser Use**是一个Python框架，让AI可以自主操作浏览器，支持DOM和截图双模式。
|
||
|
||
**核心思想**：AI自主决策循环，支持DOM和截图双模，Token消耗极低。
|
||
|
||
## 核心特征
|
||
|
||
### 1. Python框架
|
||
- 基于Playwright
|
||
- AI自主决策循环
|
||
- 易于集成到Python项目
|
||
|
||
### 2. 双模式支持
|
||
- DOM模式：结构化DOM快照
|
||
- 截图模式：视觉理解
|
||
- 可以混合使用
|
||
|
||
### 3. 极低Token消耗
|
||
- CLI模式~75 tok/步
|
||
- 比其他方案低很多
|
||
- 成本敏感项目首选
|
||
|
||
## 原理
|
||
|
||
```
|
||
AI决策
|
||
↓
|
||
Browser Use框架
|
||
↓
|
||
Playwright操作浏览器
|
||
↓
|
||
获取DOM/截图
|
||
↓
|
||
AI分析结果
|
||
↓
|
||
下一步操作
|
||
```
|
||
|
||
## 与其他方案对比
|
||
|
||
| 维度 | Browser Use | Playwright MCP | Chrome DevTools MCP | Computer Use |
|
||
|------|-------------|----------------|---------------------|--------------|
|
||
| 原理 | Python框架 + Playwright，AI自主决策循环 | 通过Playwright访问浏览器Accessibility Tree | 通过Chrome DevTools Protocol直接与浏览器引擎通信 | AI截取屏幕截图 → 视觉识别元素 → 输出坐标/按键操作 |
|
||
| 抽象层 | DOM + 截图 视觉 + 结构化混合 | Accessibility Tree 结构化DOM快照 | CDP Protocol DevTools协议原生 | 截图 + 坐标 OS级视觉理解 |
|
||
| 速度 | 中 ~1.5s/步 | 快 ~0.9s/步 | 中 ~1.2s/步 | 慢 0.8-2s/步 |
|
||
| Token消耗 | 极低 CLI模式 ~75 tok/步 | 高 截图+结构全传 | 中 按需取数据 | 高 截图编码开销大 |
|
||
| JS重页面 | 中 — 视觉兜底 | 中 — DOM可读 | 中 — CDP可取 | 高 — 视觉理解 |
|
||
| 跨应用操作 | 仅浏览器 | 仅浏览器 | 仅浏览器 | 全桌面 |
|
||
|
||
## 使用示例
|
||
|
||
### 基本使用
|
||
```python
|
||
from browser_use import Agent
|
||
|
||
agent = Agent(
|
||
task="Go to Reddit, search for 'r/LocalLLaMA' and click on the first post",
|
||
llm=llm
|
||
)
|
||
|
||
result = await agent.run()
|
||
print(result)
|
||
```
|
||
|
||
### 原始指令
|
||
```python
|
||
agent = Agent(
|
||
task="""
|
||
1. 打开 /login 页面
|
||
2. 输入用户名 test@example.com
|
||
3. 输入密码 123456
|
||
4. 点击登录按钮
|
||
5. 验证跳转到 /dashboard
|
||
6. 验证页面显示 "Welcome"
|
||
""",
|
||
llm=llm
|
||
)
|
||
```
|
||
|
||
### AI探索后生成的Playwright脚本雏形
|
||
```typescript
|
||
test('login flow', async ({ page }) => {
|
||
await page.goto('/login');
|
||
await page.fill('[name="email"]', 'test@example.com');
|
||
await page.fill('[name="password"]', '123456');
|
||
await page.click('button[type="submit"]');
|
||
await expect(page).toHaveURL('/dashboard');
|
||
await expect(page.locator('text=Welcome')).toBeVisible();
|
||
});
|
||
```
|
||
|
||
## E2E测试生成三步法
|
||
|
||
### Step 1: Browser Use探索
|
||
- AI自主遍历页面，记录操作轨迹、选择器、页面状态
|
||
- 输出Playwright脚本雏形
|
||
- 消耗Token
|
||
|
||
### Step 2: Playwright E2E固化
|
||
- 将探索结果转为Playwright测试脚本
|
||
- 加入CI，零Token可重复运行
|
||
|
||
### Step 3: 截图视觉兜底
|
||
- Playwright覆盖不到的视觉场景（布局、动效、图表）
|
||
- 重回截图判断
|
||
|
||
## 适用场景
|
||
|
||
- **Token成本敏感**：极低Token消耗
|
||
- **复杂网页自动化**：需要视觉理解
|
||
- **E2E测试探索**：快速生成测试脚本雏形
|
||
- **网页数据抓取**：自动化数据提取
|
||
|
||
## 优势
|
||
|
||
- **Token消耗极低**：CLI模式~75 tok/步
|
||
- **AI自主决策**：无需手动编写脚本
|
||
- **支持视觉理解**：可以处理复杂视觉场景
|
||
- **易于集成**：Python框架，易于集成到项目
|
||
|
||
## 挑战
|
||
|
||
- **仅限浏览器**：不能操作其他应用
|
||
- **依赖Python**：需要Python生态
|
||
- **学习成本**：需要了解框架使用
|
||
|
||
## 最佳实践
|
||
|
||
1. **Token成本敏感首选**：极低Token消耗
|
||
2. **先用Browser Use探索**：快速生成测试脚本雏形
|
||
3. **人工审查后固化**：优化选择器，加入CI/CD
|
||
4. **关键页面截图验证**：视觉回归测试
|
||
|
||
## 相关概念
|
||
|
||
- [[测试策略金字塔]]：Browser Use是E2E测试的工具
|
||
- [[Playwright]]：Browser Use基于Playwright
|
||
- [[Computer_Use]]：Browser Use和Computer Use的对比
|
||
- [[MCP]]：Browser Use和MCP的对比
|