网站导航
> 技术文档 > browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui

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

网友: 技术文档 2025-07-30 12:39:38

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自动化

三、使用教程

1.python 安装

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

2、把项目clone下来

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

3、安装依赖

pip install browser-useplaywright installpip 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//Library/Application Support/Google/Chrome\"# Windows \"C:\\Users\\\\AppData\\Local\\Google\\Chrome\\User Data\"CHROME_USER_DATA=\"/Users//Library/Application Support/Google/Chrome\"# 还有一些大模型的 API Key 也要改...

5、启动

执行如下命令启动

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

启动成功如下所示：
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui
浏览器访问 http://127.0.0.1:7788/，看到如下界面就成功了
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui

6、配置

1.配置 Agent

注意，这里的 Use Vision，默认是选中状态，如果使用的 DeepSeek 不能勾选，因为 DeepSeek 不支持视觉输入，注意这里很多人踩坑，一定要注意。
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui

2.配置要用的大模型

例如，下面我用的是 deepseek。
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui

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

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

四、DeepSeek 的API获取

DeepSeek ：https://platform.deepseek.com/api_keys
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui

五、界面Demo 演示

输入要执行的任务就可以点击 Run Agent 了
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui
以下是运行时的项目日志输出，记录了执行步骤
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui
执行的过程中也会打开浏览器和跳转到目标网站，按照区块一样对页面元素做标注。
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui
在 Recodings 下会记录执行过程和反馈结果，还可以回看的。
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui

六、代码示例

1.创建Agent

from langchain_openai import ChatOpenAIfrom browser_use import Agentimport asyncio async 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

import asyncioimport os from dotenv import load_dotenvfrom langchain_openai import ChatOpenAIfrom pydantic import SecretStr from browser_use import Agent # dotenvload_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())

运行结果如下：
browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案_browser use webui

七、实例展示

一、爬取基金数据

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、导航到指定网址

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

2、点击基金排行

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

3、提取top 10的基金数据
DEBUG [browser_use] --act Execution time: 0.00 secondsINFO [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

pip install pytest-asyncio
@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.com 2、输入用户名:{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 倍以上，尤其擅长处理动态验证、反爬策略及多步骤交互场景，成为金融数据抓取、跨平台测试的新一代智能引擎。

Error:resultnotfoundinresponse.

网络标签：

相关问题