Update from Sync Service

AI工程/概念/Browser_Use.md

@@ -0,0 +1,144 @@
+# 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的对比