browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案

news/2025/3/20 20:59:59/
aidu_pl">

browser-use WebUI

  • 一、browser-use是什么
    • Browser-use采用的技术栈为：
  • 二、browser-use webui 主要功能
    • 使用场景
  • 三、使用教程
    • 1.python 安装
    • 2、把项目clone下来
    • 3、安装依赖
    • 4、配置环境
    • 5、启动
    • 6、配置
      • 1.配置 Agent
      • 2.配置要用的大模型
      • 3.关于浏览器的一些设置
    • 四、DeepSeek 的API获取
    • 五、界面Demo 演示
    • 六、代码示例
      • 1.创建Agent
    • 七、实例展示
      • 一、爬取基金数据
      • 二、效果展示
        • 1、导航到指定网址
        • 2、点击基金排行
        • 3、提取top 10的基金数据
      • 三、总结

一、browser-use是什么

Browser Use 是一款开源Python库，专为大语言模型设计的智能浏览器工具，目的是让 AI 能够像人类一样自然地浏览和操作网页。它支持多标签页管理、视觉识别、内容提取，并能记录和重复执行特定动作。Browser Use 还支持开发者自定义动作，如保存数据到数据库，文件等。支持多种主流的大型语言模型，如 DeepSeek，GPT-4 和 Claude等，并支持同时运行多个任务，具备自我修正功能，从而提高任务执行的准确性和效率。

官网：https://browser-use.com/

项目网址 ：https://github.com/browser-use/browser-use

Browser-use采用的技术栈为：

  • 1、Observation：页面解析层，采用DOM解析+截图辅助的非视觉+视觉方案。
    • DOM解析（HTML + XPath）：Browser-use通过底层框架（如Playwright）获取当前页面的完整HTML结构，并提取文本、元素属性等关键信息。
    • 截图辅助：在某些情况下（如验证码识别、动态图形验证），纯HTML解析可能无法直接获取信息，此时系统会自动或按需生成页面截图，并将截图作为辅助输入传递给视觉模型
  • 2、Thought：核心决策层，分析Observation提供的页面信息并生成操作指令。
  • 3、Action：指令执行层，微软开发的Playwright作为浏览器控制框架直接与浏览器交互完成自动化任务。Playwright作为新一代高性能UI自动化测试框架，提供低延迟、高稳定性的浏览器控制能力，支持快速页面加载和元素操作。

二、browser-use webui 主要功能

提供了全新的网页界面，简单好用，方便操作。
支持更多大语言模型，比如 Gemini、OpenAI、Azure 等，哦，还有最近爆火的国产大模型 DeepSeek，未来还会加更多。
支持用自己的浏览器，不用再反复登录，还能录屏。
定制了更智能的 Agent，通过优化后的提示让浏览器使用更高效。

使用场景

  • 自动化任务：适合重复高频的浏览器操作任务，如表单填写，信息检索，文件下载
  • 数据收集：适合爬取网络上的数据，如爬虫自动化测试：适合WEB UI
  • 自动化测试，结合pytest轻松实现web自动化

三、使用教程

python__26">1.python 安装

python 官网： https://www.python.org/downloads/版本必须在 3.11 以上。

2、把项目clone下来

git clone https://github.com/browser-use/web-ui.git
cd web-ui

3、安装依赖

pip install browser-use
playwright install
pip install -r requirements.txt

4、配置环境

基于 .env.example 复制一个 .env 文件，并在 .env 文件中修改以下信息

# 路径 Chrome 浏览器路径（检查下自己的路径），例如
# Mac OS "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
# Windows "C:\Program Files\Google\Chrome\Application\chrome.exe"
CHROME_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"# 浏览器的用户数据路径，例如
# Mac OS "/Users/<YourUsername>/Library/Application Support/Google/Chrome"
# Windows "C:\Users\<YourUsername>\AppData\Local\Google\Chrome\User Data"
CHROME_USER_DATA="/Users/<YourUsername>/Library/Application Support/Google/Chrome"# 还有一些大模型的 API Key 也要改
...

5、启动

执行如下命令启动

python webui.py --ip 127.0.0.1 --port 7788

启动成功如下所示：
在这里插入图片描述
浏览器访问 http://127.0.0.1:7788/，看到如下界面就成功了
在这里插入图片描述

6、配置

1.配置 Agent

注意，这里的 Use Vision，默认是选中状态，如果使用的 DeepSeek 不能勾选，因为 DeepSeek 不支持视觉输入，注意这里很多人踩坑，一定要注意。
在这里插入图片描述

2.配置要用的大模型

例如，下面我用的是 deepseek。
在这里插入图片描述

3.关于浏览器的一些设置

在这里插入图片描述

四、DeepSeek 的API获取

DeepSeek ：https://platform.deepseek.com/api_keys
在这里插入图片描述

五、界面Demo 演示

输入要执行的任务就可以点击 Run Agent 了
在这里插入图片描述
以下是运行时的项目日志输出，记录了执行步骤
在这里插入图片描述
执行的过程中也会打开浏览器和跳转到目标网站，按照区块一样对页面元素做标注。
在这里插入图片描述
在 Recodings 下会记录执行过程和反馈结果，还可以回看的。
在这里插入图片描述

六、代码示例

1.创建Agent

python">from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncioasync def main():agent = Agent(task="Go to Reddit, search for 'browser-use' in the search bar, click on the first post and return the first comment.",llm=ChatOpenAI(model="gpt-4o"),)result = await agent.run()print(result)asyncio.run(main())

如果没有openai-key的可以使用其他模型，下面以DeepSeek为例：

该文件在 browser-use/examples/deepseek.py

python">import asyncio
import osfrom dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from pydantic import SecretStrfrom browser_use import Agent# dotenv
load_dotenv()api_key = os.getenv('DEEPSEEK_API_KEY', 'sk-xxxxxx')
if not api_key:raise ValueError('DEEPSEEK_API_KEY is not set')async def run_search():agent = Agent(task=("1. 在搜索框中输入抖音并搜索"'2. 点击搜索结果中的第一个链接''3. 关闭扫码登录'	'3. 返回第一个视频的内容'),llm=ChatOpenAI(base_url='https://api.deepseek.com/v1',model='deepseek-chat',api_key=SecretStr(api_key),),use_vision=False,)await agent.run()if __name__ == '__main__':asyncio.run(run_search())

运行结果如下：
在这里插入图片描述

七、实例展示

一、爬取基金数据

python">llm = ChatOpenAI(model='deepseek-chat',api_key='*************',base_url='https://api.deepseek.com',temperature=0
)asyncdefmain():agent = Agent(task="""1、导航到网址:https://fund.eastmoney.com/2、点击基金排行3、返回排行前10的基金数据，以json格式返回""",llm=llm,use_vision=False,)result = await agent.run()print(result.final_result())asyncio.run(main())

二、效果展示

1、导航到指定网址

在这里插入图片描述

2、点击基金排行

在这里插入图片描述

3、提取top 10的基金数据
DEBUG    [browser_use] --act Execution time: 0.00 seconds
INFO     [controller] 📄  Extracted from page
: ```json
{
"top_10_funds": [{"rank": 1,"fund_code": "018124","fund_name": "永赢先进制造智选混合发起A","date": "03-07","unit_net_value": "2.1654","cumulative_net_value": "2.1654","daily_growth_rate": "2.21%","1_week": "9.15%","1_month": "17.58%","3_months": "64.06%","6_months": "191.13%","1_year": "115.94%","since_inception": "116.54%","handling_fee": "0.15%"},{"rank": 2,"fund_code": "018125","fund_name": "永赢先进制造智选混合发起C","date": "03-07","unit_net_value": "2.1501","cumulative_net_value": "2.1501","daily_growth_rate": "2.21%","1_week": "9.15%","1_month": "17.54%","3_months": "63.89%","6_months": "190.55%","1_year": "115.07%","since_inception": "115.01%","handling_fee": "0.00%"},{"rank": 3,"fund_code": "016530","fund_name": "鹏华碳中和主题混合A","date": "03-07","unit_net_value": "1.7881","cumulative_net_value": "1.7881","daily_growth_rate": "3.00%","1_week": "10.23%","1_month": "22.92%","3_months": "68.07%","6_months": "178.39%","1_year": "104.00%","since_inception": "78.81%","handling_fee": "0.15%"},{"rank": 4,"fund_code": "016531","fund_name": "鹏华碳中和主题混合C","date": "03-07","unit_net_value": "1.7685","cumulative_net_value": "1.7685","daily_growth_rate": "3.00%","1_week": "10.21%","1_month": "22.86%","3_months": "67.81%","6_months": "177.59%","1_year": "102.79%","since_inception": "76.85%","handling_fee": "0.00%"},{"rank": 5,"fund_code": "001970","fund_name": "泰信鑫选灵活配置混合A","date": "03-07","unit_net_value": "1.3310","cumulative_net_value": "1.3310","daily_growth_rate": "-1.04%","1_week": "7.25%","1_month": "4.80%","3_months": "31.00%","6_months": "125.59%","1_year": "95.45%","since_inception": "33.10%","handling_fee": "0.15%"},{"rank": 6,"fund_code": "002580","fund_name": "泰信鑫选灵活配置混合C","date": "03-07","unit_net_value": "1.3220","cumulative_net_value": "1.3220","daily_growth_rate": "-0.97%","1_week": "7.31%","1_month": "4.84%","3_months": "31.15%","6_months": "125.60%","1_year": "95.27%","since_inception": "31.67%","handling_fee": "0.00%"},{"rank": 7,"fund_code": "016295","fund_name": "新华利率债债券E","date": "03-07","unit_net_value": "1.7977","cumulative_net_value": "1.9906","daily_growth_rate": "-0.13%","1_week": "-0.06%","1_month": "-0.66%","3_months": "0.85%","6_months": "94.13%","1_year": "92.89%","since_inception": "99.00%","handling_fee": "0.00%"},{"rank": 8,"fund_code": "019457","fund_name": "平安先进制造主题股票发起A","date": "03-07","unit_net_value": "1.7593","cumulative_net_value": "1.7593","daily_growth_rate": "1.78%","1_week": "10.41%","1_month": "23.92%","3_months": "57.40%","6_months": "134.29%","1_year": "90.71%","since_inception": "75.93%","handling_fee": "0.15%"},{"rank": 9,"fund_code": "019458","fund_name": "平安先进制造主题股票发起C","date": "03-07","unit_net_value": "1.7452","cumulative_net_value": "1.7452","daily_growth_rate": "1.78%","1_week": "10.40%","1_month": "23.87%","3_months": "57.17%","6_months": "133.60%","1_year": "89.59%","since_inception": "74.52%","handling_fee": "0.00%"},{"rank": 10,"fund_code": "007713","fund_name": "华富科技动能混合A","date": "03-07","unit_net_value": "1.4600","cumulative_net_value": "1.5100","daily_growth_rate": "1.47%","1_week": "8.19%","1_month": "18.94%","3_months": "47.07%","6_months": "135.41%","1_year": "89.14%","since_inception": "51.93%","handling_fee": "0.15%"}]
}

二、结合pytest实现页面自动化测试
异步执行需要安装插件pytest-asyncio

python">pip install pytest-asyncio

python">@pytest.mark.asyncio
@pytest.mark.parametrize("username,password,expected", [("kevin@xxxx.com", "a123456", "kevin"),("kevin@xxxx.com", "123456", "账号密码输入错误")])
asyncdeftest_login(username, password, expected):agent = Agent(task=f"""1、导航到网址:https://xxxxxxx.com2、输入用户名:{username}, 密码:{password}3、点击登录按钮4、验证是否登录成功,登录成功返回{expected}""",llm=llm,use_vision=False,)result = await agent.run()assert expected in str(result.final_result())

三、总结

Browser Use 深度集成大语言模型（LLM），通过语义理解与视觉决策链实现零硬编码自动化，彻底颠覆传统脚本开发模式。AI 自动解析页面结构、动态生成操作路径，无需人工编写 XPath/CSS 定位器，开发效率提升 5 倍以上，尤其擅长处理动态验证、反爬策略及多步骤交互场景，成为金融数据抓取、跨平台测试的新一代智能引擎。


http://www.ppmy.cn/news/1580676.html

相关文章

【实战ES】实战 Elasticsearch：快速上手与深度实践-8.2.1AWS OpenSearch无服务器方案

【实战ES】实战 Elasticsearch：快速上手与深度实践-8.2.1AWS OpenSearch无服务器方案

&#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 &#x1f449; 点击关注不迷路 文章大纲 8.2.1AWS OpenSearch 无服务器方案深度解析与实践指南1. Serverless架构的核心价值与行业趋势1.1 传统Elasticsearch集群的运维挑战1.2 Serverless技术演进路线技术特性对比…
阅读更多...
如何用Python和Selenium实现表单的自动填充与提交？

如何用Python和Selenium实现表单的自动填充与提交？

在今天的数字化时代&#xff0c;自动化工具可以极大地提高工作效率。很多人可能会觉得填表单是个繁琐的任务&#xff0c;不过你知道吗&#xff1f;用Python和Selenium可以轻松解决这一问题&#xff01;本文将带你走进如何利用这两个强大的工具&#xff0c;实现表单的自动填充和…
阅读更多...
深入理解 C# 反射 的使用

深入理解 C# 反射 的使用

总目录 前言 反射是.NET框架中一个强大的特性&#xff0c;允许程序在运行时检查和操作类型信息。通过反射&#xff0c;开发者可以动态地创建对象、调用方法、访问属性等&#xff0c;为程序提供了极大的灵活性。本文将详细讲解C#反射的使用方法及其应用场景。 一、什么是反射&a…
阅读更多...
高效创作利器：Windows上快速搭建Stable Diffusion 3.5并实现远程访问

高效创作利器：Windows上快速搭建Stable Diffusion 3.5并实现远程访问

文章目录 前言1. 本地部署ComfyUI2. 下载 Stable Diffusion3.5 模型3. 演示文生图4. 公网使用Stable Diffusion 3.5 大模型4.1 创建远程连接公网地址 5. 固定远程访问公网地址 前言 对于追求极致效率和作品质量的创作者来说&#xff0c;本地部署 AI 模型并实现远程访问已经从梦…
阅读更多...
在Spring Boot项目中接入DeepSeek深度求索，感觉笨笨的呢

在Spring Boot项目中接入DeepSeek深度求索，感觉笨笨的呢

文章目录 引言1. 什么是DeepSeek&#xff1f;2. 准备工作2.1 注册DeepSeek账号 3.实战演示3.1 application增加DS配置3.2 编写service3.3 编写controller3.4 编写前端界面chat.html3.5 测试 总结 引言 在当今快速发展的数据驱动时代&#xff0c;企业越来越重视数据的价值。为了…
阅读更多...
C#通过SignalR直接返回流式响应内容

C#通过SignalR直接返回流式响应内容

1、背景 实现流式响应基本上分为两大技术方案&#xff1a;&#xff08;1&#xff09;基于HTTP的Stream处理&#xff1b;&#xff08;2&#xff09;基于socket的连接。前者的实现方式有&#xff1a;《C#通过API接口返回流式响应内容—SSE方式》和《C#通过API接口返回流式响应内…
阅读更多...
【PCB工艺】基础：电子元器件

【PCB工艺】基础：电子元器件

电子原理图&#xff08;Schematic Diagram&#xff09;是电路设计的基础&#xff0c;理解电子元器件和集成电路&#xff08;IC&#xff09;的作用&#xff0c;是画好原理图的关键。 本专栏将系统讲解 电子元器件分类、常见 IC、电路设计技巧&#xff0c;帮助你快速掌握电子电路…
阅读更多...
STM32之I2C硬件外设

STM32之I2C硬件外设

注意&#xff1a;硬件I2C的引脚是固定的 SDA和SCL都是复用到外部引脚。 SDA发送时数据寄存器的数据在数据移位寄存器空闲的状态下进入数据移位寄存器&#xff0c;此时会置状态寄存器的TXE为1&#xff0c;表示发送寄存器为空&#xff0c;然后往数据控制寄存器中一位一位的移送数…
阅读更多...
最新文章

Copyright @ 2022~2023