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

 

 
一、 Browser-Use简介Browser-Use是一个开源可以操控浏览器的Python库，使用者能够通过LLM与浏览器自动化操作结合起来。这个库支持自然语言描述自动化测试任务或者定义AI AGENT（智能体）任务，通过使用它可以操作浏览器来执行特定操作，如访问网页、单击按钮、提取网页信息等。Browser-Use具备以下核心特点。(1) 视觉与HTML内容解析：Browser-Use具备高级解析能力，能够自动识别并提取网页中的视觉元素和HTML结构，为AI智能体提供详尽的数据输入，从而实现精准的网页内容处理。(2) 多标签页自动化管理：面对需要同时操作多个网页标签的复杂任务，Browser-Use能够高效地管理这些标签页，确保AI智能体能够无缝切换，提高任务处理的效率。(3) 记录和重复执行特定操作：Browser-Use能够记录AI智能体执行点击操作时的Xpath路径，使得使用者能够根据需要复现特定的操作，增强了自动化流程的可重复性和稳定性。(4) 自定义操作：Browser-Use不仅提供了一系列内置的自动化操作，还允许使用者注册自定义操作，如文件保存、数据库推送、通知发送以及用户输入获取等，极大地丰富了AI智能体的功能。(5) 自我纠正机制：在自动化网页任务的过程中，AI智能体可能会遇到意外情况。Browser-Use通过内置的自我纠正机制，使AI智能体能够在检测到错误时重新尝试或调整策略，从而提升任务的成功率。(6) 并行执行：为了进一步提升自动化任务的效率，Browser-Use支持并行执行多个AI智能体。这些智能体可以共享浏览器实例，但每个智能体都维护独立的上下文环境，确保了任务执行的独立性和互不干扰。二、 Browser-Use应用案例 这里以Browser-Use打开百度，让其返回今日天气为例。让大家掌握如何使用Browser-Use操控浏览器完成测试任务。(1) 安装相关依赖库，进入命令行控制台，输入如下命令。

1. pip install langchain-openai    #安装langchain-openai库
2. pip install browser-use         #安装browser-use库
3. playwright install              #安装playwright

复制代码

 
(2) 智能体任务代码。

1. from browser_use import Agent
2. from langchain_openai import ChatOpenAI
3. import asyncio
5. # 初始化模型
6. llm = ChatOpenAI(
7.     base_url = "https://api.deepseek.com",
8.     model = "deepseek-chat",
9.     api_key = "YOUR_DeepSeek_API_KEY"
10. )
12. async def main():
13. # 使用模型创建智能体
14.     agent = Agent(
15.       task = "打开百度，返回今日天气信息",
16.       llm = llm,
17.       use_vision = False
18.     )
19.     result = await agent.run()
20.     print(result)
22. asyncio.run(main())

复制代码

  实操时请替换“api_key”参数值，否则将无法正常运行。(3) 执行代码。将会看到Browser-Use自动打开浏览器访问百度，输入“今日天气”关键词，搜索今日天气情况。找到今日天气情况后，提取天气相关信息并输出。Browser-Use在执行过程中对操作页面上所有元素进行识别、索引标示，如下图所示，就是Browser-Use执行过程中操作截图。

  在执行日志中给出该测试任务的执行步骤，包括“Eval”、“Memory”、“Next Goal”、“Action”、“Result”等信息，从这些执行步骤清晰的看到智能体是如何根据测试任务来规划解决任务、具体执行了那些操作、根据观察执行后结果来评估执行效果以及后续的规划等。下图就是Browser-Use操作日志。上图很明显对应下图的“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（控制器）在实际执行时，输入“今日天气”会出现关键词匹配下拉列表，如图6-19所示。因此日志信息为“Something new appeared after action 1 / 2”（动作1/2后出现新内容）。

 

  经过笔者的讲解，相信大家一定理解其他步骤的含义，不再赘述。需要特别说明的是在“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).”为最终智能体输出的结果。

  Browser-Use不仅支持DeepSeek、OPENAI、ANTHROPIC的商用模型也支持部署在Ollama环境下的开源模型。但是，有时尽管同一个提示词在应用不同模型时会出现不同的结果，建议使用逻辑和推理效果好的模型。三、 Browser-Use web-ui项目简介 Web UI项目，如下图所示。它基于Gradio构建，支持大多数Browser-Use功能。该用户界面设计友好，用户可以轻松与浏览器代理进行交互。支持多种大型语言模型，如DeepSeek、Google、OpenAI、Anthropic、Ollama等。用户可以使用自己的浏览器来使用它，无需重新登录网站或处理其他身份验证问题。还支持高清屏幕录制。用户可以选择在AI任务之间保持浏览器窗口打开，从而查看AI交互的完整历史记录和状态。

  使用“web-ui”需按照如下操作步骤来执行。(1) 下载该项目，并解压。 (2) 进入该项目，将“.env.example”文件重命名为“.env”。填“DEEPSEEK_ENDPOINT”和“DEEPSEEK_API_KEY”环境变量值。如下所示，配置DeepSeek相关内容。

 添加描述(3) 安装相关依赖库，命令行控制台，进入项目根目录，输入如下命令。

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

复制代码

 
(4) 命令行控制台，输入如下命令。

1. 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”页设置，如下所示。

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

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

  将会看到Web UI自动打开浏览器访问百度，执行Browser-Use的操作过程，不再赘述。操作过程截图，如下所示。

 因为实际仍然运行Browser-Use，所以操作日志与在IDE中执行结果基本一致，不再赘述。Web UI运行日志，如图所示。

  运行结束后，将会在“Results”页的“Final Result”中显示最终结果，也就是今日天气信息，不再赘述。
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！