Browser Use 完全指南：让 AI 接管你的浏览器，实现真正的网页自动化

Browser Use 完全指南：让 AI 接管你的浏览器，实现真正的网页自动化

本文由 无忆研习社 原创首发，转载请注明出处。全网最详细的 Browser Use 教程，从零开始手把手教你搭建属于自己的浏览器智能体。

前言：为什么传统网页自动化已经过时了？

做过爬虫或者网页自动化的朋友，一定经历过这样的痛苦：

花了整整一周时间，用 Selenium 写好的自动化脚本，刚跑了两天，网站一改版，XPath 全变了，脚本直接报废。然后又得重新分析网页结构，重新写选择器，重新调试——这种无限循环的维护工作，让人崩溃。

更头疼的是，现在很多网站都有各种反爬机制，动态加载、验证码、行为检测……传统的"写死路径"的自动化方式，在这个时代已经越来越力不从心。

但如果告诉你，现在有一种新的解决方案：让 AI 像人类一样"看懂"网页，然后自主决定怎么操作——这还是网页自动化吗？

没错，这就是今天 无忆研习社 要给大家详细介绍的开源项目：Browser Use。

这个项目在 GitHub 上已经斩获了超过 75000 颗 Star，成为当前最火爆的浏览器自动化解决方案之一。它的核心理念很简单：不再依赖 XPath 或 CSS 选择器，而是让 AI 用"眼睛"看网页，用"大脑"做决策。

听起来是不是很科幻？别急，接下来我会从原理到实操，一步步带你玩转这个神器。

一、Browser Use 是什么？

1.1 一句话定义

Browser Use 是一个开源的 Python 库，它能够让大语言模型（LLM）直接控制浏览器，像真人一样完成各种网页操作任务。

用更通俗的话说：它给 AI 装上了"眼睛"和"双手"。

• 眼睛：通过视觉大模型（Vision Model）识别网页内容
• 双手：通过 Playwright 执行点击、输入、滚动等操作

1.2 与传统方案的本质区别

让我们用一张对比表来理解 Browser Use 的革命性：

看到区别了吗？传统方案是"告诉计算机怎么做"，而 Browser Use 是"告诉 AI 要做什么"。这是质的飞跃。

1.3 核心组件架构

从技术架构来看，Browser Use 主要由以下几个核心组件构成：

┌─────────────────────────────────────────────────────┐
│ 用户任务描述 │
│ "帮我查明天去上海的高铁票" │
└─────────────────────┬───────────────────────────────┘
│
▼
┌─────────────────────────────────────────────────────┐
│ Agent（智能体） │
│ 负责理解任务、规划步骤、调用工具、做出决策 │
└─────────────────────┬───────────────────────────────┘
│
┌───────────┼───────────┐
│ │ │
▼ ▼ ▼
┌─────────────┐ ┌───────────┐ ┌─────────────┐
│ LLM 大模型 │ │ Controller│ │ Browser │
│ (GPT/Claude │ │ 控制器 │ │ 浏览器 │
│ /Gemini) │ │ │ │ (Playwright)│
└─────────────┘ └───────────┘ └─────────────┘

简单解释一下每个组件的作用：

• Agent（智能体）：整个系统的大脑，负责理解用户意图、规划执行步骤、协调各组件工作
• LLM（大语言模型）：提供理解和推理能力，是 AI 的"智商"来源
• Controller（控制器）：负责将 AI 的决策转化为具体的浏览器操作指令
• Browser（浏览器）：通过 Playwright 驱动的真实浏览器实例

二、技术原理深度剖析

理解了 Browser Use 是什么，接下来我们深入探讨它的技术原理。这部分内容稍微有点硬核，但对于真正想掌握这个工具的朋友来说非常重要。

2.1 视觉理解：AI 是如何"看懂"网页的？

这是 Browser Use 最核心的技术突破。传统的网页自动化工具是通过解析 HTML 代码来理解页面结构的，而 Browser Use 则是通过截图 + 视觉大模型的方式来理解页面。

具体流程如下：

第一步：页面截图

当 Agent 需要了解当前页面内容时，会先对浏览器进行截图，得到一张完整的页面图片。

第二步：图像分析

将截图发送给视觉大模型（如 GPT-4o、Claude 4.5、Gemini 3 Pro 等），让模型"看"这张图，并提取出关键信息：

• 页面上有哪些可交互元素（按钮、输入框、链接等）
• 每个元素的位置坐标
• 每个元素的功能描述
• 页面的整体语义信息

第三步：结构化输出

视觉大模型会返回一个结构化的描述，类似于：

{
"elements": [
{
"type": "input",
"label": "用户名",
"position": {"x": 450, "y": 200},
"description": "用于输入登录用户名的文本框"
},
{
"type": "button",
"label": "登录",
"position": {"x": 450, "y": 300},
"description": "点击后提交登录表单"
}
]
}

这种方式的优势在于：不管网页底层 HTML 怎么变，只要视觉上元素还在那个位置、还是那个样子，AI 就能识别并操作它。

2.2 决策机制：AI 是如何规划行动的？

有了"看"的能力，还需要"思考"的能力。Browser Use 的决策机制依赖于 LLM 的推理能力。

任务分解

当你给出一个复杂任务，比如"帮我在 12306 上查询明天北京到上海的高铁票"，Agent 会先进行任务分解：

1. 打开 12306 网站
2. 找到车票查询入口
3. 选择出发城市：北京
4. 选择到达城市：上海
5. 选择日期：明天
6. 点击查询按钮
7. 等待结果加载
8. 提取并整理车次信息

循环执行

然后 Agent 会进入一个"观察-思考-行动"的循环：

while 任务未完成:
1. 观察：截图当前页面，用视觉模型理解
2. 思考：根据任务目标和当前状态，决定下一步行动
3. 行动：执行具体操作（点击、输入、滚动等）
4. 验证：检查操作结果，更新任务状态

这种机制让 AI 能够处理各种意外情况。比如遇到弹窗广告，AI 能识别出"这是个广告弹窗，需要关闭它才能继续"，然后自主找到关闭按钮点击。

2.3 Playwright：浏览器操作的底层引擎

Playwright 是微软开源的一个浏览器自动化框架，相比 Selenium，它有几个显著优势：

• 更快：直接使用 DevTools 协议，无需 WebDriver 中间层
• 更稳：自动等待元素加载，减少因时序问题导致的失败
• 更强：原生支持 Chromium、Firefox、WebKit 三大内核
• 更新：活跃维护，对新特性支持更好

Browser Use 选择 Playwright 作为底层引擎，就是看中了它的稳定性和功能完备性。

在 Browser Use 中，Playwright 主要负责：

• 启动和管理浏览器实例
• 执行具体的操作指令（点击、输入、滚动、截图等）
• 处理页面导航和加载状态
• 管理 Cookie 和登录状态

三、环境准备与安装配置

理论讲完了，现在进入实操环节。无忆研习社 将带你一步步搭建 Browser Use 的运行环境。

3.1 系统要求

在开始之前，请确保你的系统满足以下要求：

• 操作系统：Windows 10/11、macOS 10.15+、Ubuntu 18.04+
• Python 版本：3.11 或更高版本（推荐 3.11，兼容性最好）
• 内存：建议 8GB 以上（运行视觉模型比较吃内存）
• 网络：需要能访问 LLM API（如 OpenAI、Anthropic、Google 等）

3.2 Python 环境配置

如果你的系统还没有安装 Python 3.11，请先安装。这里推荐使用 pyenv 来管理 Python 版本：

macOS/Linux 安装 pyenv：

# 安装 pyenv
curl https://pyenv.run | bash

# 添加到环境变量（以 zsh 为例）
echo 'export PYENV_ROOT="$HOME/.pyenv"' >> ~/.zshrc
echo 'command -v pyenv >/dev/null || export PATH="$PYENV_ROOT/bin:$PATH"' >> ~/.zshrc
echo 'eval "$(pyenv init -)"' >> ~/.zshrc

# 重新加载配置
source ~/.zshrc

# 安装 Python 3.11
pyenv install 3.11
pyenv global 3.11

Windows 用户：

直接从 Python 官网下载 3.11 版本安装包即可：https://www.python.org/downloads/

验证安装成功：

python --version
# 应该显示 Python 3.11.x

3.3 创建虚拟环境

强烈建议为 Browser Use 项目创建独立的虚拟环境，避免与其他项目产生依赖冲突：

# 创建项目目录
mkdir browser-use-demo
cd browser-use-demo

# 创建虚拟环境
python -m venv venv

# 激活虚拟环境
# macOS/Linux:
source venv/bin/activate
# Windows:
.\venv\Scripts\activate

# 确认虚拟环境已激活（命令行前面会显示 (venv)）

3.4 安装 Browser Use

现在可以安装 Browser Use 了：

# 安装 browser-use 核心包
pip install browser-use

# 安装 Playwright 浏览器
playwright install

# 如果需要使用 OpenAI 的模型
pip install langchain-openai

# 如果需要使用 Anthropic 的模型
pip install langchain-anthropic

# 如果需要使用 Google 的模型
pip install langchain-google-genai

安装过程中 Playwright 会自动下载 Chromium、Firefox、WebKit 三个浏览器，可能需要几分钟时间，请耐心等待。

3.5 配置 API 密钥

Browser Use 需要调用 LLM API，所以你需要准备至少一个模型的 API 密钥。

以 OpenAI 为例，创建一个 .env 文件来存放密钥：

# 在项目根目录创建 .env 文件
touch .env

编辑 .env 文件，添加你的 API 密钥：

# OpenAI API 密钥
OPENAI_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxxxx

# 或者 Anthropic API 密钥
ANTHROPIC_API_KEY=sk-ant-xxxxxxxxxxxxxxxx

# 或者 Google AI API 密钥
GOOGLE_API_KEY=AIzaxxxxxxxxxxxxxxxxxxxxxxxx

然后安装 python-dotenv 来加载环境变量：

pip install python-dotenv

3.6 验证安装

创建一个测试脚本 test_install.py：

import asyncio
from dotenv import load_dotenv
from browser_use import Agent
from langchain_openai import ChatOpenAI

# 加载环境变量
load_dotenv()

async def main():
# 创建 Agent
agent = Agent(
task="打开百度首页，告诉我今天的日期",
llm=ChatOpenAI(model="gpt-4o")
)

# 运行任务
result = await agent.run()
print(f"任务结果：{result}")

# 运行
asyncio.run(main())

执行测试脚本：

python test_install.py

如果一切正常，你会看到浏览器自动打开，访问百度，然后在控制台输出今天的日期。恭喜你，Browser Use 已经成功安装！

四、快速上手：第一个自动化任务

环境配置好了，接下来让我们写几个实际的自动化任务来感受一下 Browser Use 的强大。

4.1 基础示例：网页信息提取

先从最简单的任务开始——打开一个网页，提取特定信息：

import asyncio
from dotenv import load_dotenv
from browser_use import Agent
from langchain_openai import ChatOpenAI

load_dotenv()

async def extract_weather():
"""提取天气信息"""
agent = Agent(
task="""
请完成以下任务：
1. 打开天气网站 weather.com
2. 搜索"北京"的天气
3. 告诉我北京今天的天气情况，包括温度、天气状况、空气质量
""",
llm=ChatOpenAI(model="gpt-4o")
)

result = await agent.run()
print("天气信息：")
print(result)

asyncio.run(extract_weather())

4.2 进阶示例：表单自动填写

这是 Browser Use 最实用的场景之一——自动填写各种表单：

import asyncio
from dotenv import load_dotenv
from browser_use import Agent
from langchain_openai import ChatOpenAI

load_dotenv()

# 定义个人信息（实际使用时替换成自己的信息）
PERSONAL_INFO = """
姓名：张三
邮箱：zhangsan@example.com
电话：13800138000
工作经历：
- 2020-2023 某科技公司 软件工程师
- 2023-至今 某互联网公司 高级工程师
教育背景：
- 2016-2020 某大学 计算机科学与技术专业 本科
"""

async def auto_fill_form():
"""自动填写求职申请表"""
agent = Agent(
task=f"""
请根据以下个人信息，填写页面上的求职申请表：

{PERSONAL_INFO}

注意事项：
1. 仔细识别每个输入框对应的字段
2. 如果遇到下拉菜单，选择最匹配的选项
3. 如果遇到必填字段但没有对应信息，请标记出来
4. 填写完成后告诉我哪些字段已成功填写
""",
llm=ChatOpenAI(model="gpt-4o")
)

result = await agent.run()
print("填写结果：")
print(result)

asyncio.run(auto_fill_form())

4.3 复杂示例：多步骤工作流

下面是一个更复杂的例子——自动搜索和对比商品价格：

import asyncio
from dotenv import load_dotenv
from browser_use import Agent
from langchain_openai import ChatOpenAI

load_dotenv()

async def compare_prices():
"""对比不同平台的商品价格"""
agent = Agent(
task="""
我想买一个 iPhone 15 Pro 256GB 的手机，请帮我完成以下任务：

1. 首先打开京东，搜索 "iPhone 15 Pro 256GB"，记录下价格
2. 然后打开天猫，搜索同样的产品，记录下价格
3. 最后对比两个平台的价格，告诉我哪个更便宜，便宜多少

注意：
- 请记录官方旗舰店的价格
- 如果有多个价格（如原价、促销价），都记录下来
- 最终给出你的购买建议
""",
llm=ChatOpenAI(model="gpt-4o"),
max_steps=30 # 复杂任务可能需要更多步骤
)

result = await agent.run()
print("价格对比结果：")
print(result)

asyncio.run(compare_prices())

五、核心 API 详解

掌握了基础用法后，让我们深入了解 Browser Use 的核心 API，这样你才能更灵活地定制自己的自动化任务。

5.1 Agent 类详解

Agent 是 Browser Use 的核心类，它的完整参数如下：

from browser_use import Agent
from langchain_openai import ChatOpenAI

agent = Agent(
# 必填参数
task="你要执行的任务描述",
llm=ChatOpenAI(model="gpt-4o"), # 使用的语言模型

# 可选参数
browser=None, # 自定义浏览器实例，默认自动创建
controller=None, # 自定义控制器
max_steps=100, # 最大执行步骤数，防止无限循环
use_vision=True, # 是否使用视觉模型，默认开启
save_conversation_path=None, # 保存对话记录的路径
max_failures=5, # 最大连续失败次数
retry_delay=10, # 重试间隔（秒）
)

关键参数说明：

• task：任务描述越详细越好，可以包含多个步骤、注意事项、预期结果等
• llm：支持 OpenAI、Anthropic、Google 等多种模型
• max_steps：复杂任务需要调大这个值，简单任务可以调小以节省 Token
• use_vision：关闭后只使用 DOM 解析，速度更快但准确性下降

5.2 自定义浏览器配置

如果你需要更精细地控制浏览器行为，可以自定义 Browser 实例：

from browser_use import Agent, Browser, BrowserConfig
from langchain_openai import ChatOpenAI

# 创建浏览器配置
browser_config = BrowserConfig(
headless=False, # 是否无头模式，False 可以看到浏览器界面
disable_security=False, # 是否禁用安全特性
extra_chromium_args=[
'--disable-blink-features=AutomationControlled', # 隐藏自动化特征
],
chrome_instance_path=None, # 使用系统安装的 Chrome
wss_url=None, # 远程浏览器 WebSocket 地址
proxy=None, # 代理设置，格式如 "http://user:pass@host:port"
)

# 创建浏览器实例
browser = Browser(config=browser_config)

# 使用自定义浏览器创建 Agent
agent = Agent(
task="你的任务",
llm=ChatOpenAI(model="gpt-4o"),
browser=browser
)

5.3 持久化登录状态

很多任务需要先登录才能操作，Browser Use 支持保存和复用登录状态：

from browser_use import Agent, Browser, BrowserConfig, BrowserContextConfig
from langchain_openai import ChatOpenAI

# 配置浏览器上下文，指定用户数据目录
context_config = BrowserContextConfig(
save_storage_state="./browser_state.json", # 保存状态到文件
# 或者
storage_state="./browser_state.json", # 从文件加载状态
)

browser_config = BrowserConfig(
new_context_config=context_config
)

browser = Browser(config=browser_config)

# 第一次运行：登录并保存状态
agent = Agent(
task="登录 GitHub 账号（用户名：xxx，密码：xxx）",
llm=ChatOpenAI(model="gpt-4o"),
browser=browser
)
await agent.run()

# 后续运行：自动加载登录状态，无需重复登录

5.4 添加自定义工具

Browser Use 支持添加自定义工具来扩展 Agent 的能力：

from browser_use import Agent, Controller
from browser_use.controller.service import ControllerService
from langchain_openai import ChatOpenAI
from pydantic import BaseModel

# 定义工具的输入参数
class SaveDataInput(BaseModel):
filename: str
content: str

# 创建自定义控制器
controller = Controller()

# 注册自定义工具
@controller.action("保存数据到本地文件", param_model=SaveDataInput)
async def save_data(params: SaveDataInput):
"""将抓取的数据保存到本地文件"""
with open(params.filename, 'w', encoding='utf-8') as f:
f.write(params.content)
return f"数据已保存到 {params.filename}"

# 使用自定义控制器
agent = Agent(
task="搜索最新科技新闻，并保存到 news.txt 文件",
llm=ChatOpenAI(model="gpt-4o"),
controller=controller
)

六、实战案例：五个真实应用场景

光说不练假把式，无忆研习社 为大家准备了五个真实的应用场景案例，拿来就能用。

6.1 案例一：自动监控商品价格

电商比价、抢购提醒，这是最常见的需求：

import asyncio
import json
from datetime import datetime
from dotenv import load_dotenv
from browser_use import Agent
from langchain_openai import ChatOpenAI

load_dotenv()

# 配置要监控的商品
PRODUCTS = [
{
"name": "iPhone 15 Pro",
"url": "https://item.jd.com/xxxxxxx.html",
"target_price": 7000 # 目标价格，低于此价格则提醒
},
{
"name": "MacBook Pro 14",
"url": "https://item.jd.com/xxxxxxx.html",
"target_price": 12000
}
]

async def check_single_product(product):
"""检查单个商品价格"""
agent = Agent(
task=f"""
请访问这个商品页面：{product['url']}

找到商品的当前价格（包括促销价、优惠券后价格等），
并以 JSON 格式返回：
{{
"current_price": 实际价格数字,
"original_price": 原价数字,
"has_coupon": 是否有优惠券,
"coupon_discount": 优惠券金额
}}
""",
llm=ChatOpenAI(model="gpt-4o"),
max_steps=15
)

result = await agent.run()
return result

async def monitor_prices():
"""监控所有商品价格"""
results = []

for product in PRODUCTS:
print(f"正在检查：{product['name']}")

try:
price_info = await check_single_product(product)

# 解析价格信息
# 这里需要根据实际返回格式解析
results.append({
"name": product['name'],
"price_info": price_info,
"target_price": product['target_price'],
"check_time": datetime.now().isoformat()
})

except Exception as e:
print(f"检查 {product['name']} 时出错：{e}")

# 保存结果
with open('price_monitor.json', 'w', encoding='utf-8') as f:
json.dump(results, f, ensure_ascii=False, indent=2)

print("价格监控完成，结果已保存到 price_monitor.json")
return results

# 运行监控
asyncio.run(monitor_prices())

6.2 案例二：批量下载文件

从网站批量下载资源文件：

import asyncio
import os
from dotenv import load_dotenv
from browser_use import Agent, Controller
from langchain_openai import ChatOpenAI
from pydantic import BaseModel

load_dotenv()

class DownloadInfo(BaseModel):
url: str
filename: str

controller = Controller()

@controller.action("记录下载链接", param_model=DownloadInfo)
async def record_download(params: DownloadInfo):
"""记录需要下载的文件链接"""
with open('download_list.txt', 'a', encoding='utf-8') as f:
f.write(f"{params.url}|{params.filename}\n")
return f"已记录：{params.filename}"

async def collect_downloads():
"""收集下载链接"""
ag