browser-use

本文集文档发布于灏天文库

3.1 基础功能

文档摘要

3.1 基础功能 第三章：功能特性详解 - 3.1 基础功能 在深入探索 browser-use 代理网站访问器的强大功能之前，我们首先需要理解其核心基石：基础功能。本章节将详细剖析 browser-use 的 3.1 基础功能，旨在为用户构建坚实的使用基础，并充分理解其在网页自动化和智能信息处理方面的核心能力。这些基础功能构成了 browser-use 高级特性的基石，理解并掌握它们对于高效利用 browser-use 至关重要。 3.1.1 核心架构与工作流程 browser-use 的基础功能围绕着其核心架构展开，该架构旨在桥接语言模型（LLM）的理解能力与真实浏览器的执行能力。

3.1 基础功能

第三章：功能特性详解 - 3.1 基础功能

在深入探索 browser-use 代理网站访问器的强大功能之前，我们首先需要理解其核心基石：基础功能。本章节将详细剖析 browser-use 的 3.1 基础功能，旨在为用户构建坚实的使用基础，并充分理解其在网页自动化和智能信息处理方面的核心能力。这些基础功能构成了 browser-use 高级特性的基石，理解并掌握它们对于高效利用 browser-use 至关重要。

3.1.1 核心架构与工作流程

browser-use 的基础功能围绕着其核心架构展开，该架构旨在桥接语言模型（LLM）的理解能力与真实浏览器的执行能力。为了更好地理解其工作原理，我们首先通过一个 Graph TD 图来可视化 browser-use 的核心工作流程：

流程详解：

  1. 用户任务 (Task)：整个流程的起点是用户的指令或任务描述。这可以是一个自然语言描述，例如“打开 https://cn.vuejs.org/guide/essentials/computed，获取页面里所有的 h2 标签文本及所有的 a 标签文本（以及它的 href）”。

  2. LLM 解析 (Parsing)：接收到用户任务后，browser-use 将任务描述传递给预先配置的语言模型（LLM），例如 GPT-4o。LLM 的职责是理解用户意图，并将自然语言任务分解为一系列可执行的步骤和指令。这个阶段，LLM 可能会识别出需要执行的浏览器操作类型（如导航到 URL、查找元素、提取文本等）。

  3. Agent 决策/规划 (Decision/Planning)：Agent 作为 browser-use 的核心组件，负责接收 LLM 的解析结果，并根据预设的逻辑和工具进行决策和规划。Agent 会根据任务的复杂程度，决定执行哪些浏览器动作，以及何时提取页面信息。如果任务较为复杂，Agent 可能会进行多步规划，逐步完成任务。在更高级的应用中，Agent 甚至可以利用 Planner 模型进行更深层次的规划和任务分解，但基础功能层面，我们主要关注其执行 LLM 指令的能力。

  4. 浏览器动作 (Browser Action)：Agent 根据决策结果，生成具体的浏览器操作指令。这些指令可以是导航到指定的 URL、点击页面元素、输入文本、滚动页面等等。browser-use 对这些常见的网页交互场景进行了友好的抽象，使得开发者无需直接操作底层的浏览器 API。

  5. Playwright 调用 (Playwright Call)：browser-use 的核心浏览器自动化能力由 Playwright 提供。Playwright 是一个强大的浏览器自动化库，支持 Chromium, Firefox 和 WebKit 等主流浏览器。Agent 生成的浏览器动作指令会被转化为 Playwright 的 API 调用，从而驱动浏览器执行相应的操作。

  6. 浏览器实例 (Browser Instance)：Playwright 负责启动和管理浏览器实例。browser-use 默认使用无头浏览器 (headless browser) 进行操作，这意味着浏览器在后台运行，没有图形界面，从而提高了执行效率和资源利用率。当然，browser-use 也支持配置为有头模式 (headed mode)，方便开发者在开发和调试阶段观察浏览器操作过程。

  7. 数据提取 (Data Extraction)：在浏览器执行动作的过程中，或者在完成一系列动作后，Agent 可以指示 Playwright 提取页面信息。提取的信息可以是页面的 HTML 源代码、特定元素的文本内容、元素的属性值、页面的截图等等。browser-use 提供了灵活的数据提取机制，可以根据任务需求选择合适的数据提取方式。

  8. 模型处理 (Model Processing)：提取到的页面信息可以被送回给 LLM 进行进一步的处理和分析。例如，如果任务是“从网页中提取商品名称和价格”，LLM 可以对提取的文本信息进行解析，识别出商品名称和价格，并将它们结构化。在基础功能层面，模型处理可能相对简单，但在更复杂的应用场景中，模型处理可以包括信息抽取、情感分析、文本摘要等多种任务。

  9. 结构化结果输出 (Structured Output)：最终，经过模型处理后的信息会被整理成结构化的结果输出。这可以是 JSON 格式的数据、文本报告、或者其他用户指定的形式。结构化输出使得用户可以方便地使用和分析 browser-use 提取和处理的信息。

通过上述流程，browser-use 实现了 “语言模型 -> 决策/控制 -> 浏览器执行 -> 数据回传 -> 模型后处理” 的完整闭环，从而赋予 AI 智能体与网页进行复杂交互的能力。

3.1.2 Agent 接口：快速构建智能体

browser-use 的核心在于其简洁易用的 Agent 接口。通过 Agent 类，开发者可以快速创建具备浏览器交互能力的智能体，从而赋能 LLM 执行各种网页相关的任务。

3.1.2.1 Agent 初始化参数

创建 Agent 实例时，需要配置一系列参数来定义智能体的行为和能力。以下是 Agent 接口的关键参数详解：

| 参数名称 | 类型 | 默认值 | 说明 ref="3.1 基础功能章节的内容详解">

3.1.2.2 基础功能核心示例

为了更直观地理解 Agent 的使用方式，我们来看一个简单的 Python 代码示例，演示如何使用 Agent 执行一个基础的网页信息抓取任务：

import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://cn.vuejs.org/guide/essentials/computed，获取页面里所有的 h2 标签文本及所有的 a 标签文本（以及它的 href）",
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

代码解析：

  1. 环境准备:

    • load_dotenv(): 从 .env 文件加载环境变量，通常用于配置 API keys 等敏感信息。

    • ChatOpenAI(model="gpt-4o"): 初始化 LangChain 的 ChatOpenAI 模型，指定使用的模型为 gpt-4o。你需要确保已经配置了 OpenAI API Key (例如在 .env 文件中设置 OPENAI_API_KEY=sk-xxxxxxx)。

  2. Agent 初始化:

    • Agent(...): 创建 Agent 实例，这是 browser-use 的核心类。

      • task="打开 ...": 定义了智能体需要执行的任务，这里是一个自然语言描述的任务指令。

      • llm=llm: 将之前初始化的 ChatOpenAI 模型传递给 Agent，作为其语言模型引擎。

  3. 任务执行:

    • await agent.run(): 调用 agent.run() 方法启动任务执行。这是一个异步方法，需要使用 await 等待任务完成。agent.run() 会驱动整个 browser-use 的工作流程，包括 LLM 解析任务、Agent 决策、浏览器操作、信息提取和结果返回。

  4. 结果输出:

    • print('result:', result): 打印 agent.run() 返回的结果。result 通常会包含提取的页面信息，以及任务执行过程中的一些状态信息。

运行示例:

在确保已经安装了 browser-use 库和 Playwright，并配置了 OpenAI API Key 后，运行上述代码，你将看到类似以下的输出结果：

result: ActionResult(is_done=True, extracted_content='h2 标签文本: ["计算属性", "计算属性 vs 侦听器", "计算属性缓存"]\na 标签文本及 href: [("开始", "/"), ("指南", "/guide/"), ("...", "/"), ... ]', error=None, include_in_memory=False)
​

这个结果表明 Agent 成功地打开了指定的 Vue.js 文档页面，并提取了页面中所有 h2 标签的文本内容，以及所有 a 标签的文本内容和 href 属性。

基础功能演示:

这个简单的示例展示了 browser-use 的几个核心基础功能：

  • 任务定义: 通过自然语言描述定义任务，降低了使用门槛。

  • 网页访问: Agent 能够根据指令自动打开指定的 URL。

  • 信息提取: Agent 能够提取网页中的特定元素信息（文本内容和属性）。

  • LLM 驱动: 整个流程由 LLM 驱动，LLM 负责理解任务并生成执行计划。

3.1.3 浏览器操作：基础交互能力

browser-use 的基础功能中，浏览器操作是其核心功能之一，它赋予智能体与网页进行交互的能力。browser-use 基于强大的 Playwright 库，对底层的浏览器操作进行了高度抽象和封装，使得开发者可以使用简洁的 API 来控制浏览器行为，而无需深入了解 Playwright 的细节。

3.1.3.1 无头 (Headless) 与 有头 (Headed) 模式

browser-use 默认采用 无头 (Headless) 模式运行浏览器。这意味着浏览器实例在后台运行，没有图形用户界面显示。无头模式的优势在于：

  • 资源效率: 无图形界面减少了资源消耗，可以更高效地执行自动化任务，尤其是在服务器环境中。

  • 速度: 由于无需渲染图形界面，无头模式通常运行速度更快。

  • 稳定性: 在自动化环境中，无头模式更加稳定可靠。

然而，在开发和调试阶段，有头 (Headed) 模式则更为方便。在有头模式下，你可以看到实际的浏览器窗口，直观地观察智能体的操作过程，便于调试和问题排查。

切换模式: browser-use 允许用户在初始化 Browser 实例时，通过配置 BrowserConfig 来切换运行模式。例如，要启用有头模式，可以这样配置：

from browser_use.browser.browser import Browser, BrowserConfig
browser = Browser(
    config=BrowserConfig(
        headless=False  # 设置为 False 启用有头模式
    )
)
​

应用场景:

  • 无头模式: 适用于生产环境、自动化数据抓取、后台任务执行等场景，追求效率和资源优化。

  • 有头模式: 适用于开发调试、演示、需要人工观察操作过程的场景，便于理解和排错。

3.1.3.2 核心浏览器动作

browser-use 封装了一系列常用的浏览器动作，使得智能体可以执行各种网页交互操作。以下是一些核心的浏览器动作及其详解：

  • 导航 (Navigation)：

    • go_to_url(url: str): 该动作指示浏览器导航到指定的 URL。这是所有网页交互的基础，智能体首先需要访问目标网页才能进行后续操作。
    import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://www.example.com", # 任务：打开 example.com
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

    在这个例子中，task 被设置为 "打开 https://www.example.com"，Agent 会解析这个任务，并调用 go_to_url 动作，使浏览器访问 example.com 网站。

  • 元素交互 (Element Interaction)：

    • click(selector: str): 模拟用户点击页面上的元素。selector 参数用于指定要点击的元素，可以使用 CSS 选择器或 XPath 表达式。
    import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://www.example.com，点击页面上的 'More information...' 链接", # 任务：打开 example.com 并点击链接
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

    假设 example.com 页面上存在一个文本为 "More information..." 的链接，Agent 会找到该链接并模拟点击操作。

    • type(selector: str, text: str): 模拟用户在输入框中输入文本。selector 参数指定输入框元素，text 参数是要输入的文本内容。
    import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://www.example.com，在搜索框中输入 'browser-use' 并提交", # 任务：打开 example.com, 输入并提交
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

    如果 example.com 页面包含一个搜索输入框，Agent 会将文本 "browser-use" 输入到该输入框中。通常，提交表单还需要配合点击提交按钮或者模拟按下 Enter 键等操作。

    • hover(selector: str): 模拟鼠标悬停在页面元素上。常用于触发下拉菜单、工具提示等交互效果。
    import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://www.example.com，悬停在页面顶部的导航菜单上", # 任务：打开 example.com 并悬停在导航菜单
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

    Agent 会模拟鼠标移动到页面顶部的导航菜单元素上，触发可能的悬停效果。

  • 信息提取 (Information Extraction)：

    • get_text(selector: str): 提取指定元素的文本内容。selector 参数用于定位元素。
    import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://www.example.com，获取页面标题", # 任务：打开 example.com 并获取标题
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

    Agent 会提取 example.com 页面的标题文本。

    • get_attribute(selector: str, attribute_name: str): 获取指定元素的属性值。selector 参数定位元素，attribute_name 参数指定要获取的属性名称。
    import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://www.example.com，获取页面上第一个链接的 href 属性", # 任务：打开 example.com 并获取第一个链接的 href
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

    Agent 会找到 example.com 页面上的第一个链接元素，并提取其 href 属性值。

    • get_html(selector: str = 'body'): 获取指定元素的 HTML 源代码。默认获取整个 <body> 元素的 HTML。
    import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://www.example.com，获取页面的 HTML 源代码", # 任务：打开 example.com 并获取 HTML
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

    Agent 会获取 example.com 页面的 <body> 元素的 HTML 源代码。

  • 滚动 (Scrolling)：

    • scroll_down(): 向下滚动页面。常用于加载更多内容或使页面底部元素可见。

    • scroll_to_bottom(): 滚动到页面底部。

    • scroll_to_top(): 滚动到页面顶部。

    import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://www.example.com，滚动到页面底部", # 任务：打开 example.com 并滚动到底部
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

    Agent 会控制浏览器滚动到 example.com 页面的底部。

  • 截图 (Screenshot)：

    • screenshot(path: str = None, selector: str = 'body', full_page: bool = False): 截取页面或指定元素的屏幕截图。

      • path: 截图保存路径，如果为 None，则不保存到文件。

      • selector: 要截图的元素选择器，默认为 <body>，即整个页面。

      • full_page: 是否截取整个页面（包括滚动条外的部分），默认为 False。

    import asyncio
from dotenv import load_dotenv
from langchain_openai import ChatOpenAI
from browser_use import Agent
load_dotenv()
llm = ChatOpenAI(model="gpt-4o")
async def main():
    agent = Agent(
        task="打开 https://www.example.com，截取整个页面的屏幕截图并保存到 'example.png'", # 任务：打开 example.com 并截图保存
        llm=llm,
    )
    result = await agent.run()
    print('result:', result)
if __name__ == "__main__":
    asyncio.run(main())
​

    Agent 会截取 example.com 页面的完整屏幕截图，并保存为 example.png 文件。

3.1.3.3 选择器 (Selectors)

在 browser-use 中，很多浏览器动作（如 click, type, get_text, screenshot 等）都需要使用 选择器 (Selectors) 来定位页面元素。browser-use 支持两种常见的选择器类型：

  • CSS 选择器 (CSS Selectors)：CSS 选择器是一种用于选取 HTML 元素的模式，广泛应用于网页开发和自动化测试中。例如：

    • #id: 选取 id 为 id 的元素。

    • .class: 选取所有 class 包含 class 的元素。

    • tagname: 选取所有标签名为 tagname 的元素。

    • tagname.class: 选取所有标签名为 tagname 且 class 包含 class 的元素。

    • div > p: 选取所有 <div> 元素下的直接子元素 <p>。

    • a[href]: 选取所有带有 href 属性的 <a> 元素。

  • XPath 表达式 (XPath Expressions)：XPath 是一种在 XML 文档（HTML 是一种 XML 的变体）中查找信息的语言。XPath 表达式功能强大，可以实现更复杂的元素定位。例如：

    • //div[@id='id']: 选取 id 属性为 id 的 <div> 元素（不考虑元素在文档中的位置）。

    • //a[text()='More information...']: 选取文本内容为 "More information..." 的 <a> 元素。

    • //ul[@class='nav-menu']/li[last()]: 选取 class 为 nav-menu 的 <ul> 元素下的最后一个 <li> 子元素。

选择器使用建议:

  • 优先使用 CSS 选择器: CSS 选择器通常更简洁易懂，且性能较好。对于大多数常见的元素定位场景，CSS 选择器已经足够使用。

  • 在复杂场景下使用 XPath: 当需要根据文本内容、属性值进行复杂条件定位，或者需要定位层级关系复杂的元素时，XPath 表达式更为强大灵活。

  • 结合浏览器开发者工具: 现代浏览器都提供了强大的开发者工具，可以方便地查看网页的 HTML 结构，并辅助生成 CSS 选择器和 XPath 表达式。例如，在 Chrome 浏览器中，可以右键点击页面元素，选择 "检查"，然后在 "Elements" 面板中右键点击选中的元素，选择 "Copy" -> "Copy selector" (复制 CSS 选择器) 或 "Copy" -> "Copy XPath" (复制 XPath 表达式)。

3.1.4 基础功能的价值与意义

browser-use 的 3.1 基础功能看似简单，但却是构建强大网页自动化和智能信息处理应用的关键基石。掌握这些基础功能，意味着：

  • 网页可达性: 智能体能够访问和浏览互联网上的各种网页，不再局限于本地数据或预先定义好的 API。

  • 信息获取能力: 智能体能够从网页中提取结构化或非结构化的信息，为后续的分析、决策和应用提供数据基础。

  • 交互自动化: 智能体能够模拟用户在网页上的各种操作，实现流程自动化，例如自动填写表单、自动点击按钮、自动完成注册登录等。

  • 应用场景拓展: 基于浏览器操作能力，browser-use 可以应用于更广泛的场景，例如：

    • 数据抓取与监控: 自动抓取电商网站商品信息、新闻网站资讯、社交媒体数据等，并进行实时监控和分析。

    • 自动化测试: 模拟用户行为，进行网页功能测试、UI 测试、性能测试等。

    • 智能助手: 根据用户指令，自动完成网页上的各种任务，例如预订机票酒店、在线购物、信息查询等。

    • RPA (Robotic Process Automation): 将网页操作集成到企业自动化流程中，提高工作效率，降低人工成本。

发布者: 作者: 转发
评论区 (0)
U
0/500