Browser-Use在UI自动化测试中的应用

测试者家园

已于 2025-06-19 06:47:58 修改

阅读量644

点赞数 14

分类专栏：智能化测试 Python 自动化测试文章标签：自动化测试智能化测试软件测试人工智能 AI自动化测试框架 Browser-Use 质量效能

于 2025-06-19 06:46:19 首次发布

本文链接：https://blog.csdn.net/tony2yy/article/details/148753445

版权

Python 同时被 3 个专栏收录

60 篇文章

订阅专栏

智能化测试

54 篇文章

订阅专栏

自动化测试

18 篇文章

订阅专栏

#『AI先锋杯·14天征文挑战第一期』#

1. Browser-Use简介

Browser-Use是一个开源可以操控浏览器的Python库，使用者能够通过LLM与浏览器自动化操作结合起来。这个库支持自然语言描述自动化测试任务或者定义AI AGENT（智能体）任务，通过使用它可以操作浏览器来执行特定操作，如访问网页、单击按钮、提取网页信息等。

Browser-Use具备以下核心特点。

视觉与HTML内容解析：Browser-Use具备高级解析能力，能够自动识别并提取网页中的视觉元素和HTML结构，为AI智能体提供详尽的数据输入，从而实现精准的网页内容处理。
多标签页自动化管理：面对需要同时操作多个网页标签的复杂任务，Browser-Use能够高效地管理这些标签页，确保AI智能体能够无缝切换，提高任务处理的效率。
记录和重复执行特定操作：Browser-Use能够记录AI智能体执行点击操作时的Xpath路径，使得使用者能够根据需要复现特定的操作，增强了自动化流程的可重复性和稳定性。
自定义操作：Browser-Use不仅提供了一系列内置的自动化操作，还允许使用者注册自定义操作，如文件保存、数据库推送、通知发送以及用户输入获取等，极大地丰富了AI智能体的功能。
自我纠正机制：在自动化网页任务的过程中，AI智能体可能会遇到意外情况。Browser-Use通过内置的自我纠正机制，使AI智能体能够在检测到错误时重新尝试或调整策略，从而提升任务的成功率。
并行执行：为了进一步提升自动化任务的效率，Browser-Use支持并行执行多个AI智能体。这些智能体可以共享浏览器实例，但每个智能体都维护独立的上下文环境，确保了任务执行的独立性和互不干扰。

2 Browser-Use应用案例

这里以Browser-Use打开百度，让其返回今日天气为例。让大家掌握如何使用Browser-Use操控浏览器完成测试任务。

(1）安装相关依赖库，进入命令行控制台，输入如下命令。

pip install langchain-openai    #安装langchain-openai库

pip install browser-use         #安装browser-use库

playwright install              #安装playwright

（2）智能体任务代码。

from browser_use import Agent
from langchain_openai import ChatOpenAI
import asyncio

# 初始化模型
llm = ChatOpenAI(
    base_url = "https://api.deepseek.com",
    model = "deepseek-chat",
    api_key = "YOUR_DeepSeek_API_KEY"
)

async def main():
# 使用模型创建智能体
    agent = Agent(
      task = "打开百度，返回今日天气信息",
      llm = llm,
      use_vision = False
    )
    result = await agent.run()
    print(result)

asyncio.run(main())

实操时请替换“api_key”参数值，否则将无法正常运行。

（3）执行代码。将会看到Browser-Use自动打开浏览器访问百度，输入“今日天气”关键

词，搜索今日天气情况。找到今日天气情况后，提取天气相关信息并输出。Browser-Use在执行过程中对操作页面上所有元素进行识别、索引标示，如图1，就是Browser-Use执行过程中操作截图。

图1 Browser-Use执行过程中操作截图

在执行日志中给出该测试任务的执行步骤，包括“Eval”、“Memory”、“Next Goal”、“Action”、“Result”等信息，从这些执行步骤清晰的看到智能体是如何根据测试任务来规划解决任务、具体执行了那些操作、根据观察执行后结果来评估执行效果以及后续的规划等。

图1很明显对应图2的“Step 2”，智能体评估上一步骤“Success - Successfully navigated to Baidu.”（成功导航到百度）、智能体回顾任务“Need to search for today's weather information.”（需要搜索今天的天气信息。）、智能体规划下一步目标“Input the search query for today's weather and retrieve the information.”（输入今天天气的搜索查询并检索信息。）、具体包括2个规划执行步骤，即“Action 1/2: {"input_text":{"index":12,"text":"今日天气"}}”（在索引标示为12的元素对象执行输入“今日天气”操作）和“Action 2/2: {"click_element":{"index":13}}”（在索引标示为13的元素对象执行单击操作），索引标示为“12”的位置对应关键词输入文本框，而索引标示为“13”的位置对应“百度一下”按钮。Controller（控制器）在实际执行时，输入“今日天气”会出现关键词匹配下拉列表，如图3所示。因此日志信息为“Something new appeared after action 1 / 2”（动作1/2后出现新内容）。

图2 Browser-Use操作日志

图3 关键词匹配下拉列表

经过笔者的讲解，相信大家一定理解其他步骤的含义，不再赘述。需要特别说明的是在“Step 4”中“Extracted page content: 北京12:11更新8°多云南风2级0~9°C90……”为智能体提取到的有关今日天气内容。“Step 5”中“Result: Today's weather in Beijing is 8°C, cloudy, with a south wind of 2级. The temperature ranges from 0°C to 9°C, and the air quality is 90, which is良 (good).”为最终智能体输出的结果。图4是结果输出相关日志。

图4 结果输出相关日志

Browser-Use不仅支持DeepSeek、OPENAI、ANTHROPIC的商用模型也支持部署在Ollama环境下的开源模型。但是，有时尽管同一个提示词在应用不同模型时会出现不同的结果，建议使用逻辑和推理效果好的模型。

3 Browser-Use web-ui项目简介

Web UI项目，如图5所示。它基于Gradio构建，支持大多数Browser-Use功能。该用户界面设计友好，用户可以轻松与浏览器代理进行交互。支持多种大型语言模型，如DeepSeek、Google、OpenAI、Anthropic、Ollama等。用户可以使用自己的浏览器来使用它，无需重新登录网站或处理其他身份验证问题。还支持高清屏幕录制。用户可以选择在AI任务之间保持浏览器窗口打开，从而查看AI交互的完整历史记录和状态。

图5 Web UI项目

使用“web-ui”需按照如下操作步骤来执行。

（1）下载该项目，并解压。

（2）进入该项目，将“.env.example”文件重命名为“.env”。填“DEEPSEEK_ENDPOINT”

和“DEEPSEEK_API_KEY”环境变量值。如图6，配置DeepSeek相关内容。

图6 配置DeepSeek相关内容

（3）安装相关依赖库，命令行控制台，进入项目根目录，输入如下命令。

pip install browser-use          #安装browser-use库
playwright install               #安装playwright
pip install -r requirements.txt  #安装依赖库

（4）命令行控制台，输入如下命令。

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

（5）浏览器输入“http://127.0.0.1:7788”访问本地运行的Web UI。单击“Agent Settings”页，“Agent Type”选择“org”，取消“Use Vision”复选框。“Agent Settings”页设置，如图7所示。

图7 “Agent Settings”页设置

（6）单击“LLM Configuration”页，“LLM Provider”选择“deepseek”，“Model Name”输入“deepseek-chat”。如果您已经在“.env”文件设置过“Base URL”和“API Key”，不需填写任何内容，否则需填写。“LLM Configuration”页设置，如图8所示。

图8 “LLM Configuration”页设置

（7）单击“Run Agent”页，“Task Description”输入“打开百度，返回今日天气信息”，如果在测试一些需要登录的应用时，可以在“Additional Information”添加附加信息，如用户名和密码信息。单击“Run Agent”按钮。“Run Agent”页设置，如图9所示。