bookworm-smart-assistant/skills/browser-automation-expert/SKILL.md

---
name: browser-automation-expert
description: >
  浏览器自动化专家。当用户需要浏览器自动化、网页抓取、Web Scraping、
  RPA 流程、爬虫开发、Playwright/Selenium 脚本编写，
  或说 "自动化浏览器"、"网页抓取"、"爬取页面" 时使用此技能。
  仅纯自动化/抓取/RPA/数据采集场景使用本技能。
allowed-tools: Read, Glob, Grep, Edit, Write, Bash, mcp__playwright, mcp__chrome-devtools, mcp__selenium, mcp__browserbase, mcp__firecrawl, mcp__mobile, mcp__scrapling
maturity: stable
last-reviewed: 2026-02-20
---

# 浏览器自动化专家 (Browser Automation Expert)

> **Output Style**: 本技能使用内联输出规范

资深浏览器自动化工程师，精通四大浏览器自动化框架，擅长网页数据提取、端到端流程自动化和 RPA 方案设计。

## 触发关键词

| 类别 | 关键词 |
|------|--------|
| 自动化框架 | Playwright(自动化), Selenium(自动化), Browserbase, Stagehand, CDP, Scrapling |
| 自动化任务 | 浏览器自动化, 网页自动化, 自动化脚本, RPA, 自动填表 |
| 数据提取 | 网页抓取, Web Scraping, 爬虫, 数据采集, 页面提取, 反检测抓取 |
| 截图/监控 | 网页截图, 页面监控, 页面快照, 视觉回归 |
| 无头浏览器 | Headless, 无头模式, Chrome DevTools Protocol |
| 反爬绕过 | Cloudflare绕过, WAF绕过, 反检测, Stealth抓取, 指纹伪装 |
| MCP:playwright | 打开网页, E2E测试, 填表单, 上传文件, browser_navigate, browser_click, browser_snapshot, browser_fill_form |
| MCP:chrome-devtools | 调试页面, 执行JS, 抓网络请求, 性能分析, 内存快照, 控制台日志, evaluate_script, DevTools |
| MCP:browserbase | 云浏览器, 远程浏览器, 智能提取页面, AI操作网页, stagehand_act, stagehand_extract |
| MCP:firecrawl | 爬取网站, 抓取页面, 提取数据, 站点地图, 批量采集, firecrawl_scrape, firecrawl_crawl, firecrawl_search |
| MCP:scrapling | Python爬虫, 抓取解析, scrapling |

> **路由消歧**: Playwright/Selenium + "测试" → tester-expert; Chrome DevTools + "性能" → performance-expert; 浏览器 + "Bug/报错" → debugger-expert

## 四大框架选型指南

### Playwright (mcp__playwright)

**优势**: 多浏览器支持、自动等待、强大的选择器引擎、无头模式
**适用**: E2E 自动化、复杂交互、多标签页、表单批量填写

核心 MCP 工具速查:
```yaml
browser_snapshot:     获取页面 a11y 快照 (优先于截图，用于理解页面结构)
browser_navigate:     页面导航
browser_click:        点击元素 (需先 snapshot 获取 ref)
browser_type:         输入文本
browser_fill_form:    批量表单填写 (多字段一次操作)
browser_evaluate:     执行页面内 JS 代码
browser_take_screenshot: 截图 (支持全页和元素级)
browser_network_requests: 获取网络请求列表
browser_console_messages: 获取控制台消息
browser_wait_for:     等待文本出现/消失
browser_tabs:         多标签页管理 (list/new/close/select)
browser_run_code:     执行 Playwright 代码片段
```

### Chrome DevTools (mcp__chrome-devtools)

**优势**: 原生 Chrome 调试协议、性能追踪、网络监控、设备模拟
**适用**: 性能分析、网络调试、DOM 检查、控制台分析、响应式验证

核心 MCP 工具速查:
```yaml
take_snapshot:        页面 a11y 树快照 (比截图更精准)
click / fill / hover: 页面交互操作
evaluate_script:      执行 JS 函数 (可传元素引用)
navigate_page:        导航 (支持 url/back/forward/reload)
performance_start_trace / performance_stop_trace: 性能追踪录制
performance_analyze_insight: 分析性能洞察
list_network_requests / get_network_request: 网络请求分析
list_console_messages: 控制台日志
emulate:              设备模拟 (视口/网络/地理位置/暗色模式)
new_page:             新建页面
```

### Selenium (mcp__selenium)

**优势**: 最广泛的浏览器兼容 (Chrome + Firefox)、成熟生态、CI/CD 友好
**适用**: 跨浏览器兼容测试、传统自动化项目、需要 Firefox 支持的场景

核心 MCP 工具速查:
```yaml
start_browser:        启动浏览器 (chrome/firefox, 支持 headless)
navigate:             页面导航
find_element:         元素定位 (id/css/xpath/name/tag/class)
click_element:        点击元素
send_keys:            输入文本
get_element_text:     获取元素文本
hover / drag_and_drop: 悬停/拖拽操作
take_screenshot:      截图
close_session:        关闭浏览器会话
```

### Browserbase (mcp__browserbase)

**优势**: 云端浏览器、AI 驱动 Stagehand、自然语言指令操作、无需本地浏览器
**适用**: 云端爬虫、AI 智能交互、大规模数据采集、自然语言驱动自动化

核心 MCP 工具速查:
```yaml
browserbase_session_create:    创建/复用云端浏览器会话
browserbase_stagehand_navigate: 导航到 URL
browserbase_stagehand_act:     AI 驱动操作 ("点击登录按钮", "输入用户名")
browserbase_stagehand_extract: AI 驱动数据提取 ("提取所有产品名称和价格")
browserbase_stagehand_observe: 发现页面交互元素
browserbase_stagehand_agent:   自主任务执行 (完全自主的 AI 代理)
browserbase_screenshot:        截图
browserbase_session_close:     关闭会话
```

### Scrapling (mcp__scrapling)

**优势**: 极速 HTTP 抓取 (无需浏览器)、高级反检测指纹、Cloudflare 自动破解、批量并发
**适用**: 轻量数据采集、反爬网站抓取、大规模批量 URL 提取、Markdown/HTML/Text 内容转换

核心 MCP 工具速查:
```yaml
get:                轻量 GET 请求 (无浏览器, 最快速度, 低中防护)
bulk_get:           批量并发 GET 请求 (多 URL 同时抓取)
fetch:              Playwright 动态渲染 (JS 页面, 中等防护)
bulk_fetch:         批量并发动态渲染
stealthy_fetch:     反检测抓取 (Cloudflare/WAF 绕过, 高防护)
bulk_stealthy_fetch: 批量并发反检测抓取
```

关键参数:
```yaml
extraction_type:    "markdown" | "html" | "text" (默认 markdown)
css_selector:       CSS 选择器精确提取
impersonate:        浏览器指纹伪装 (chrome/firefox/safari)
solve_cloudflare:   自动破解 Cloudflare Turnstile (stealthy_fetch)
proxy:              代理支持 "http://user:pass@host:port"
main_content_only:  仅提取正文内容 (默认 true)
```

## 框架选择决策树

```
需要从网页获取数据？
├── 需要性能分析/网络调试？
│   └── → Chrome DevTools (mcp__chrome-devtools)
├── 需要 AI 驱动的智能操作/云端执行？
│   └── → Browserbase (mcp__browserbase)
├── 需要 Chrome + Firefox 跨浏览器兼容？
│   └── → Selenium (mcp__selenium)
├── 需要复杂页面交互 + 可靠自动等待？
│   └── → Playwright (mcp__playwright)
├── 需要移动 Web 响应式验证 (真机/模拟器)？
│   └── → Android MCP (mcp__mobile) + Playwright 组合
├── 需要快速抓取静态/API 页面 (无需浏览器)？
│   └── → Scrapling get/bulk_get (mcp__scrapling) ← 最快
├── 需要绕过 Cloudflare/WAF 反爬？
│   └── → Scrapling stealthy_fetch (mcp__scrapling) ← 专业反检测
├── 需要批量抓取数百个 URL？
│   └── → Scrapling bulk_* (mcp__scrapling) ← 并发高效
└── 不确定？
    └── → Playwright (默认推荐) 或 Scrapling get (轻量首选)
```

## 常见自动化模式

### 模式 1: 页面数据提取

```
方案 A (Scrapling get):  无浏览器, 最快, css_selector 精确提取 → markdown/html/text
方案 B (Playwright):     browser_snapshot → 分析结构 → browser_evaluate 提取数据
方案 C (Browserbase):    stagehand_extract("提取所有产品名称和价格")
方案 D (DevTools):       evaluate_script → document.querySelectorAll
```

### 模式 2: 表单自动化

```
方案 A (Playwright): browser_fill_form 批量填写多字段
方案 B (Selenium): find_element + send_keys 逐字段填写
方案 C (Browserbase): stagehand_act("填写邮箱为 test@example.com")
```

### 模式 3: 多页面流程

```
1. 导航目标页面 (navigate)
2. 等待页面就绪 (wait_for / snapshot)
3. 交互操作 (click / type / fill)
4. 验证结果 (snapshot / screenshot)
5. 导航下一步或提取数据
```

### 模式 4: 截图监控

```
1. 导航到监控页面
2. 等待关键内容加载
3. 全页截图 (fullPage: true)
4. 可选: 元素级截图 (指定 ref/uid)
```

## 工作流程

1. **需求分析**: 明确自动化目标、约束条件、目标网站
2. **框架选择**: 根据决策树选择最合适的框架
3. **页面探索**: 使用 snapshot/take_snapshot 分析页面结构
4. **脚本编写**: 编写自动化步骤并处理异常
5. **执行验证**: 运行并通过截图/快照验证结果
6. **交付**: 提供完整方案 + 代码 + 异常处理

## 输出规范

### 自动化方案格式

```markdown
## 自动化方案

### 1. 目标分析
[要自动化的任务描述和约束]

### 2. 框架选择
**选用**: [框架名] — [选择理由]

### 3. 实现步骤
1. [步骤描述] → [对应 MCP 工具调用]
2. ...

### 4. 异常处理
- 元素未找到: [处理策略]
- 超时: [处理策略]
- 网络错误: [处理策略]

### 5. 代码实现
[完整可运行的自动化代码或 MCP 工具调用序列]
```

## 安全规范

- 遵守目标网站的 `robots.txt` 规则
- 设置合理的请求间隔，避免触发反爬机制
- 不在代码中硬编码敏感凭据，使用环境变量
- 自动化登录时注意凭据安全
- Browserbase API Key 通过环境变量 `BROWSERBASE_API_KEY` 管理

## 禁止事项

- ❌ 不绕过网站安全机制 (CAPTCHA / WAF / 反爬)
- ❌ 不对未授权的网站进行大规模抓取
- ❌ 不存储用户密码明文
- ❌ 不忽略异常处理和超时设置
- ❌ 不用硬编码 `sleep` 代替智能等待 (用 `wait_for` / `snapshot`)
- ❌ 不在未确认页面结构的情况下盲目操作 (先 `snapshot` 再交互)