browser-use WebUI + DeepSeek 基于AI的UI自动化解决方案
一、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.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
启动乐成如下所示：
https://i-blog.csdnimg.cn/direct/358a7c681af14a0d90cb58ac4b8180f7.png
欣赏器访问 http://127.0.0.1:7788/，看到如下界面就乐成了
https://i-blog.csdnimg.cn/direct/9fa5444d70f24c6d96a313b22fc0df7c.png
6、设置
1.设置 Agent
注意，这里的 Use Vision，默认是选中状态，如果利用的 DeepSeek 不能勾选，因为 DeepSeek 不支持视觉输入，注意这里许多人踩坑，肯定要注意。
https://i-blog.csdnimg.cn/direct/cac74c8590a547e5b8be31041b4830db.png
2.设置要用的大模型
比方，下面我用的是 deepseek。
https://i-blog.csdnimg.cn/direct/2ea11239992f4a5aa69d8a857ca63b98.png
3.关于欣赏器的一些设置
https://i-blog.csdnimg.cn/direct/18eada77607c4b018ebb203b0d053ef0.png
四、DeepSeek 的API获取
DeepSeek ：https://platform.deepseek.com/api_keys
https://i-blog.csdnimg.cn/direct/922f8b46f5d04116949d1708ec80548f.png
五、界面Demo 演示
输入要实行的任务就可以点击 Run Agent 了
https://i-blog.csdnimg.cn/direct/3339c4959cca43d5920e434f579b0570.png
以下是运行时的项目日记输出，记载了实行步骤
https://i-blog.csdnimg.cn/direct/a22a8563a9994633a9e86fd2e959aa69.png
实行的过程中也会打开欣赏器和跳转到目的网站，按照区块一样对页面元素做标注。
https://i-blog.csdnimg.cn/direct/3a4b9f3e83ca4814b6b359def4ee4ed1.png
在 Recodings 下会记载实行过程和反馈效果，还可以回看的。
https://i-blog.csdnimg.cn/direct/f3f0d5056b194c0b8e5ca617a5865ed4.png
六、代码示例
1.创建Agent
from langchain_openai import ChatOpenAI
from browser_use import Agent
import 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 asyncio
import os
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from pydantic import SecretStr
from 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())
运行效果如下：
https://i-blog.csdnimg.cn/direct/0ec2413a194f45a18db56dc01c528ee0.png
七、实例展示
一、爬取基金数据
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、导航到指定网址
https://i-blog.csdnimg.cn/direct/a1dd97c3584f4026ad60392fafd9e248.png
2、点击基金排行
https://i-blog.csdnimg.cn/direct/f0ac0cc3a90b4a29b6b2f043b7531c88.png
3、提取top 10的基金数据
DEBUG --act Execution time: 0.00 seconds
INFO
页:
[1]