当前位置：首页 > article >正文

基于Browser Use + Playwright 实现AI Agent操作Web UI自动化

article 2025/9/14 6:15:26

Browser Use是什么

Browser Use是一个开源项目官网：Browser Use - Enable AI to control your browser，专为大语言模型（LLM）设计的只能浏览器工具，能够让AI像人类一样自然的浏览和操作网页，支持多标签页管理，视觉识别，内容提取，并能记录和重复执行特定动作。

Browser Use 的技术原理

集成 LLM 模型：集成大型语言模型（LLM）理解和执行复杂的网页任务。
浏览器自动化：用自动化工具如 Playwright，模拟人类用户的浏览器操作。
异步编程：支持异步编程，让 AI 代理能非阻塞地执行网络请求和浏览器操作。
自定义动作注册：支持开发者用装饰器或 Pydantic 模型注册自定义动作，扩展 AI 代理的功能。
上下文管理：基于浏览器上下文（Browser Context）管理不同代理的独立会话，保持状态隔离。
XPath 和元素定位：用 XPath 和其他方法定位网页元素，实现精确的网页交互。

Playwright是什么

playwright是由微软开发的Web UI自动化测试工具，支持多种语言如Python，js，Java，其核心特性如下：

跨浏览器兼容性：支持Chromium、Firefox和WebKit。
灵活的运行模式：提供无头模式和有头模式，便于调试与持续集成。
智能的等待机制：减少了显式等待的必要性。
全面的API支持：能处理页面交互、网络请求以及文件上传下载等复杂操作。

快速开始

Browser-use 需要 Python 3.11 或更高版本。首先，通过 pip 安装该工具：

pip install browser-use

接下来，安装 Playwright，这是 Browser-use 的依赖项：

playwright install

还需要调用大语言模型的第三方库

pip install langchain_openai

本地环境增加.env文件用于保存大模型的KEY放到环境变量中，保证隐私

API_KEY = 'xxxxx'

WebUI自动化demo

from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio, os
from dotenv import load_dotenv
# 加载环境变量
load_dotenv()


async def main():# 初始化模型llm = ChatOpenAI(base_url="https://api.XXXX.cn/v1",  # 调用的LLM api地址model="XXXXX", # 调用的具体模型api_key=os.getenv('API_KEY')  # 取自.env中的key)
# 创建Agent并定义UI测试任务agent = Agent(task="""1. 访问百度首页（https://www.baidu.com/）2. 选择账号登录，账号：12345678907，密码：1233. 勾选阅读百度协议，点击登录4. 点击导航栏的“新闻”菜单5. 列出“热点要闻”板块中前五条新闻的标题和发布时间,用json格式返回结果，示例格式如下：[ { title: '新闻标题1', publish_time: '5月21日 13:20'}]""",llm=llm,use_vision=False  # 禁用视觉模式，依赖DOM解析)# 执行任务后输出结果result = await agent.run()print(result.final_result())

asyncio.run(main())

提示词总结

Browser Use中定义了提示词类，详情请看site-packages/browser_use/agent/system_prompt.md文件，该文件中有详细的系统提示词要求，比如给AI设定了身份，告知AI需要做什么，以什么格式返回。

输入格式以及内容

输入内容包括：

-任务

-之前的步骤

-当前网址

-打开的标签页

-交互元素

-[index]文本

索引：用于交互的数字标识符
类型：HTML元素类型（按钮、输入框等）
文本：元素描述示例： [33]提交表单
带[]数字索引的元素是可交互的
无[]的元素仅提供上下文

响应规则

响应格式：必须始终以有效JSON格式响应，格式如下： {"current_state": {"evaluation_previous_goal": "成功|失败|未知 - 分析当前元素和图片，检查之前的目标/动作是否按预期完成。说明是否出现意外情况", "memory": "描述已完成事项和需要记住的内容。必须具体说明操作次数和剩余数量。例如：已分析0/10个网站。继续处理abc和xyz", "next_goal": "下一步需要立即完成的目标描述"}, "action":[{"one_action_name": {//动作参数}}]}
动作规则：

可指定多个连续动作
每个动作只能包含一个动作名称
最多使用{{max_actions}}个动作常见动作序列：
表单填写：[{"input_text": {"index": 1, "text": "用户名"}}, {"input_text": {"index": 2, "text": "密码"}}, {"click_element": {"index": 3}}]
导航与提取：[{"go_to_url": {"url": "Example Domain"}}, {"extract_content": {"goal": "提取姓名"}}]
动作按顺序执行
页面状态变化后中断序列
仅在动作不改变页面时使用多动作
优先使用高效动作（如批量填写表单）

元素交互：

仅使用交互元素的索引
标记为"[]非交互文本"的元素不可操作

导航与错误处理：

无合适元素时使用替代功能
卡顿时尝试：

返回上一页
新建搜索
新开标签页

处理弹窗/cookie：接受或关闭
使用滚动查找目标元素
重新搜索时打开新标签页
出现验证码时尝试解决
页面未加载完成时使用等待动作

任务完成：

任务完全达成时使用done动作
达到max_steps限制时也需调用done：

成功完成所有要求设success为true
未完成则设success为false

对重复任务（如"每个"、"所有"）：

在memory中持续计数（已完成X次，剩余Y次）
仅在完成全部次数后使用done

视觉上下文：

使用图片理解页面布局
图片中的带标签边界框对应元素索引

表单填写：

填写输入框后若序列中断
可能出现自动建议/弹窗

长任务：

在memory中持续追踪状态和子结果

内容提取：

寻找信息时对特定页面调用extract_content
响应必须始终为符合格式的JSON

示例中文响应

{"current_state": {"evaluation_previous_goal": "成功 - 已正确跳转到登录页面", "memory": "已打开3个标签页，完成0/3个网站分析，需继续提取剩余网站数据", "next_goal": "在当前页面填写登录表单并提交"}, "action":[{"input_text": {"index": 1, "text": "用户名"}}, {"input_text": {"index": 2, "text": "密码"}}, {"click_element": {"index": 3}}]}