浏览器自动化

技能文档

---
name: liu-lan-qi-zi-dong-hua
description: 无头浏览器自动化工具，为AI Agent优化的网页操作能力，支持无障碍树快照与引用提取，精准网页元素交互。当用户需要进行网页自动化操作、网页数据抓取、表单自动填写、网页截图、UI自动化测试或需要与网页进行程序化交互时触发。触发词：浏览器自动化、网页爬虫、无头浏览器、Playwright、网页截图、表单填写、网页操作、UI测试、网页抓取。
title: 浏览器自动化
category: 开发工具
---

# 浏览器自动化

为 AI Agent 优化的无头浏览器自动化工具。

## 核心能力

### 页面导航
- 打开指定 URL
- 前进/后退/刷新
- 等待页面加载完成
- 处理重定向与弹窗

### 元素交互
- 点击元素（单击/双击/右键）
- 文本输入与清空
- 下拉框选择
- 复选框/单选框操作
- 文件上传
- 拖拽操作

### 数据提取
- 获取页面文本内容
- 提取元素属性
- 截取页面/元素截图
- 获取页面 HTML 源码
- 执行 JavaScript 代码

### 无障碍树
- 获取页面无障碍树快照
- 基于角色的元素定位
- 语义化元素引用
- 结构化页面分析

## 工作流程

### 1. 启动浏览器
```
启动 Chromium 无头浏览器
配置视口大小、User-Agent
设置超时与重试策略
```

### 2. 页面操作
```
导航到目标页面
等待关键元素加载
执行交互操作
处理动态加载内容
```

### 3. 数据获取
```
截取无障碍树快照
提取目标数据
处理分页/滚动加载
输出结构化结果
```

## 使用场景

### 网页数据抓取
- 动态渲染页面数据提取
- SPA 应用内容获取
- 需要登录的数据采集

### 自动化测试
- UI 功能验证
- 跨浏览器兼容性测试
- 性能基准测试

### 表单自动化
- 批量表单填写
- 定时数据提交
- 多步骤流程自动化

### 页面监控
- 定期截图对比
- 内容变更检测
- 可用性监控

## 输出格式

### 页面快照
```json
{
  "url": "https://example.com",
  "title": "页面标题",
  "screenshot": "screenshot.png",
  "accessibilityTree": { ... },
  "extractedData": { ... }
}
```

### 操作日志
```
[NAVIGATE] https://example.com → 200 OK (1.2s)
[CLICK] button#submit → success
[INPUT] input#name → "张三"
[EXTRACT] table.data → 15 rows extracted
```

## 注意事项

- 遵守目标网站的 robots.txt 和使用条款
- 合理控制请求频率，避免对目标服务器造成压力
- 敏感操作（登录、支付等）需谨慎处理
- 部分网站有反爬机制，可能需要调整策略
- 截图功能默认全页面，可指定元素区域

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。