浏览器自动化

技能文档

---
name: browser-skill
title: 浏览器自动化
category: 开发工具
description: 控制真实浏览器进行网页导航、页面可视分析和元素交互。当需要访问网页、填写表单、点击按钮、截图、抓取动态页面数据或测试 Web 应用时触发。触发词：浏览器、网页访问、页面交互、动态抓取
---

## 概述

浏览器自动化技能可控制一个真实的无头 Chrome 浏览器实例，适用于以下场景：

- 导航到指定网站
- 通过语义快照「看到」页面结构
- 与页面元素交互（点击、输入、填充、滚动）
- 处理标准 HTTP 请求无法获取的动态内容（JavaScript 渲染）

## 技能工作流

### 步骤1：打开页面

使用 `open` 命令导航到目标网址：

```
open <url>
```

### 步骤2：检查页面

使用 `snapshot -i` 获取页面中所有可交互元素及其 ID 引用（如 `@e1`）：

```
snapshot -i
```

### 步骤3：交互操作

根据快照中的 ID 引用执行交互：

```
click @e1
fill @e1 "搜索内容"
press @e1 Enter
```

## 命令参考

| 命令 | 参数 | 说明 |
|:---|:---|:---|
| `open` | `<url>` | 导航到指定网址 |
| `back` | - | 浏览器后退 |
| `forward` | - | 浏览器前进 |
| `reload` | - | 刷新当前页面 |
| `snapshot` | `['-i']` | 获取页面可交互元素的语义列表（`@e` 引用） |
| `click` | `<ref>\|<selector>` | 点击元素（如 `@e1`） |
| `dblclick` | `<ref>\|<selector>` | 双击元素 |
| `fill` | `<ref>\|<selector> <text>` | 清空并填充输入框 |
| `type` | `<ref>\|<selector> <text>` | 模拟自然输入（适用于自动补全场景） |
| `press` | `<ref>\|<selector> <key>` | 按下指定按键（如 `Enter`、`ArrowDown`） |
| `hover` | `<ref>\|<selector>` | 悬停在元素上 |
| `scroll` | `[dx, dy]` | 滚动视口（默认向下） |
| `click_coords` | `<x> <y>` | 点击指定坐标位置 |

## 使用提示

- 每次交互前先执行 `snapshot -i` 获取最新的 `@e` 引用
- `@e` 引用是**临时的**，页面导航或动态更新后可能发生变化
- 标准表单使用 `fill`；需要模拟逐键输入的场景（如搜索建议）使用 `type`

使用说明

# 浏览器自动化

控制真实浏览器进行网页导航、元素交互和动态内容抓取。

## 使用

```text
打开 https://example.com 并截取页面快照
```

```text
访问登录页面，填写用户名和密码并点击登录按钮
```

## 工作原理

通过无头 Chrome 实例加载真实网页，使用语义快照识别页面元素，再通过元素引用执行点击、输入、滚动等交互操作。适用于标准 HTTP 请求无法处理的 JavaScript 动态页面。

如何安装此技能？

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