内容
# 自动浏览：AI 驱动的浏览器自动化
**自动浏览** 是连接您的 AI 代理与浏览器的最简单方式，使用自然语言。
[](https://youtu.be/VxJg3RRShoY)
🎥 [观看启动视频](https://youtu.be/VxJg3RRShoY)
## 快速开始
一个 AI 驱动的浏览器自动化代理，用于自动化浏览器任务和编写 Playwright 测试，实现与网页的自然语言交互。
## 示例
查看我们的 [TypeScript BDD 示例仓库](https://github.com/auto-browse/auto-browse-typescript-bdd-example)，了解使用 BDD 测试模式的 Auto Browse 的完整实现。
## 安装
```bash
npm install @auto-browse/auto-browse
```
## ⚠️ 重要：Playwright 版本要求
Auto Browse 需要 Playwright 版本 1.53.0 或更高。
### 所需版本
```bash
"@playwright/test": ">=1.53.0"
"playwright": ">=1.53.0"
```
### 安装
如果您遇到版本冲突，请使用旧的同级依赖标志：
```bash
npm install --legacy-peer-deps
```
## 快速设置
1. 在您的项目根目录中创建一个 `.env` 文件：
```env
# 对于 OpenAI（默认）
OPENAI_API_KEY=您的_openai_api_key_在此处
LLM_PROVIDER=openai # 可选
AUTOBROWSE_LLM_MODEL=gpt-4o-mini # 可选
# 或对于 Google AI
GOOGLE_API_KEY=您的_google_key_在此处
LLM_PROVIDER=google
AUTOBROWSE_LLM_MODEL=gemini-2.0-flash-lite
```
2. 开始自动化！
## 支持的 LLM 提供商
- **OpenAI** （默认）- GPT-4 和兼容模型
- **Google AI** - Gemini 模型
- **Azure OpenAI** - Azure 上的 GPT 模型
- **Anthropic** - Claude 模型
- **Google Vertex AI** - PaLM 和 Gemini 模型
- **Ollama** - 本地运行模型
## 用法
### 独立模式（无 Playwright 测试）
Auto Browse 还可以在 Playwright 测试上下文之外使用。以下是一个完整的表单自动化示例：
```typescript
import { auto } from "@auto-browse/auto-browse";
async function main() {
try {
// 导航到表单
await auto("前往 https://httpbin.org/forms/post");
// 拍摄快照以分析页面结构
await auto("拍摄快照");
// 填写表单
await auto('在客户姓名字段中输入 "John Doe"');
await auto('选择 "Large" 作为尺寸');
await auto('选择 "Mushroom" 作为配料');
await auto('选中 "cheese" 作为额外选项');
// 提交表单
await auto("点击 Order 按钮");
// 拍摄响应页面的快照
await auto("拍摄响应页面的快照");
} catch (error) {
console.error("错误：", error);
}
}
// 运行脚本
main().catch(console.error);
```
在独立模式下，Auto Browse 自动：
- 管理浏览器生命周期
- 创建和配置页面
- 处理清理
运行独立脚本：
```bash
npx ts-node your-script.ts
```
### Playwright 测试模式
```typescript
import { test, expect } from "@playwright/test";
import { auto } from "@auto-browse/auto-browse";
test("示例测试", async ({ page }) => {
await page.goto("https://example.com");
// 使用自然语言获取文本
const headerText = await auto("获取标题文本", { page });
// 使用自然语言在输入框中输入内容
await auto('在搜索框中输入 "Hello World"', { page });
// 使用自然语言点击元素
await auto("点击登录按钮", { page });
});
```
### 自动检测模式
该软件包会自动检测当前页面上下文，因此您可以跳过传递页面参数：
```typescript
import { test, expect } from "@playwright/test";
import { auto } from "@auto-browse/auto-browse";
test("简化示例", async ({ page }) => {
await page.goto("https://example.com");
// 无需传递页面参数
const headerText = await auto("获取标题文本");
await auto('在搜索框中输入 "Hello World"');
await auto("点击登录按钮");
});
```
### 使用 Playwright-BDD 的 BDD 模式
Auto Browse 与 [playwright-bdd](https://github.com/vitalets/playwright-bdd) 集成，用于行为驱动开发：
```gherkin
# features/homepage.feature
功能：Playwright 首页
场景：检查标题
给定导航到 https://playwright.dev
当点击链接 "Get started"
那么断言标题 "Installation"
```
```typescript
// 一个步骤定义处理所有操作
import { auto } from "@auto-browse/auto-browse";
import { Given, When as aistep, Then } from "./fixtures";
aistep(/^(.*)$/, async ({ page }, action: string) => {
await auto(action, { page });
});
```
### 关键操作
```typescript
// 导航
await auto("前往 https://example.com");
// 点击
await auto("点击提交按钮");
// 输入
await auto('在邮箱字段中输入 "username"');
// 验证
await auto("验证成功消息可见");
// 拍摄快照
await auto("拍摄快照");
```
## 核心功能
- **自然语言命令** - 使用普通英语编写自动化脚本
- **AI 驱动的智能** - 智能元素检测和交互
- **自动上下文检测** - 自动管理浏览器和页面上下文
- **多 LLM 支持** - 与 OpenAI、Google AI、Anthropic 等合作
- **Playwright 集成** - 与 Playwright 测试无缝集成
- **TypeScript 支持** - 完整的类型安全性和 IntelliSense
- **零配置** - 最小设置即可使用
## 文档
📚 [完整文档](https://typescript.docs.auto-browse.com/quickstart) - 完整的指南、示例和 API 参考
## 最佳实践
- **描述清晰**：`"在登录表单中点击提交按钮"` vs `"点击提交"`
- **使用引号括住值**： `'在姓名字段中输入 "John Doe"'`
- **拍摄快照**：`"拍摄快照"` 帮助 AI 了解页面上下文
## 贡献
欢迎贡献！请随时提交拉取请求。
感谢 Playwright 团队创建了 Playwright MCP 和 Playwright BDD。
## 许可证
MIT
MCP 市场