5.1 基本使用流程

5.1 基本使用流程

第五章：使用方法与实践 - 5.1 基本使用流程详解

在 Browser-use 代理网站访问器 的使用中，理解并掌握其基本使用流程是至关重要的。本章节将深入探讨 Browser-use 的 5.1 基本使用流程，旨在为用户提供一个清晰、详尽的操作指南，帮助用户快速上手并有效利用 Browser-use 强大的网页自动化能力。通过本章节的学习，您将能够理解 Browser-use 如何将自然语言指令转化为实际的浏览器操作，并最终获取所需的信息或完成指定的任务。

5.1.1 概述：Browser-use 的核心工作流程

Browser-use 的核心价值在于其能够 连接 AI 智能体与真实浏览器，实现通过自然语言指令驱动浏览器进行各种复杂操作。其基本使用流程可以概括为 “理解指令 -> 智能决策 -> 浏览器执行 -> 数据反馈 -> 结果输出” 的循环过程。这个流程使得用户无需编写繁琐的自动化脚本，仅需以自然语言描述任务，即可让 AI 智能体自动完成网页浏览、信息抓取、表单填写、交互操作等任务。

为了更直观地理解这一流程，我们可以使用 Mermaid 的 graph TD 图进行可视化展示：

流程步骤详解:

1. 用户任务 (自然语言指令) (A): 用户以自然语言向 Browser-use 描述希望执行的任务。例如：“打开 https://cn.vuejs.org/guide/，获取页面中所有 h2 标签的文本内容和所有 a 标签的文本内容及其 href 属性。” 任务描述的清晰度和准确性直接影响后续流程的执行效果。

2. LLM 解析 & 任务分解 (B): Browser-use 接收到用户任务后，首先由 大型语言模型 (LLM) 进行解析。LLM 的作用是理解用户自然语言指令的意图，并将其分解为一系列可执行的步骤。例如，对于上述任务，LLM 可能会将其分解为：

   • 导航到指定的 URL (https://cn.vuejs.org/guide/).

   • 查找页面中所有的 h2 标签。

   • 提取每个 h2 标签的文本内容。

   • 查找页面中所有的 a 标签。

   • 提取每个 a 标签的文本内容和 href 属性。

   • 将提取的信息整理成结构化数据。

3. Agent 智能决策/规划 (C): Agent 是 Browser-use 的核心组件，负责根据 LLM 的解析结果进行智能决策和任务规划。Agent 会基于预设的工具和能力（例如：网页导航、元素点击、文本提取、数据结构化等），制定详细的执行计划。它会考虑任务的复杂性、网页的结构以及可用的资源，并决定每一步应该执行哪些浏览器动作。Agent 的智能性体现在它能够根据网页的实际情况动态调整执行策略，例如，如果页面加载缓慢或元素定位失败，Agent 可能会进行重试或采取其他策略。

4. 浏览器动作指令 (D) & 数据提取指令 (G): Agent 在规划好执行步骤后，会将这些步骤转化为具体的 浏览器动作指令 和 数据提取指令。浏览器动作指令包括：导航到 URL、点击元素、填写表单、滚动页面等操作，用于控制浏览器的行为。数据提取指令则指示 Agent 在网页上提取哪些信息，例如：提取特定元素的文本、属性、HTML 结构，或者截取网页截图等。

5. Playwright 调用 (E & H): Browser-use 底层依赖于强大的 Playwright 库来实现浏览器自动化。Playwright 是一个跨浏览器、跨平台的自动化测试和控制工具，支持 Chromium, Firefox, WebKit 等主流浏览器。Agent 生成的浏览器动作指令和数据提取指令会通过 Playwright API 转化为对浏览器实例的具体操作调用。Playwright 负责与浏览器实例进行交互，执行指令并获取网页信息。

6. 浏览器实例 (真实浏览器) (F): 浏览器实例 是 Playwright 驱动的真实浏览器环境。Browser-use 默认使用无头浏览器 (headless browser) 进行操作，即在后台运行，不显示图形界面，以提高效率。用户也可以配置使用有头浏览器 (headed browser) 以便于观察和调试。Playwright 会在浏览器实例中加载网页、执行 Agent 的指令，并返回网页的 DOM 结构、页面内容、元素信息等。

7. 网页信息反馈 (I): 浏览器实例执行操作后，会将网页的 信息反馈 给 Browser-use。这些信息可能包括：页面的 HTML 源代码、特定元素的文本内容、元素的位置信息、网页截图等。这些反馈信息是 Agent 进行下一步决策和数据提取的基础。

8. 模型处理 & 结构化 (J): 获取到网页信息后，Browser-use 可能会进行 模型处理 和 结构化 操作。如果启用了视觉能力 (use_vision=True)，Browser-use 可以利用视觉模型分析网页截图，识别视觉元素和内容。对于提取到的文本或其他非结构化数据，Browser-use 可以利用 LLM 或其他模型进行进一步处理，例如：信息抽取、情感分析、内容总结等。最终，将提取到的数据整理成用户期望的 结构化格式，例如 JSON、列表、文本段落等。

9. 结构化结果输出 (K): 最后，Browser-use 将处理后的 结构化结果输出 给用户。输出结果的形式可以是文本、JSON 字符串、Python 对象等，取决于用户的需求和任务的性质。用户可以根据输出结果进行后续的数据分析、应用集成或其他操作。

5.1.2 基本使用流程的详细步骤分解

为了更深入地理解 Browser-use 的基本使用流程，我们将每个步骤进行更细致的展开和解释。

5.1.2.1 步骤一：用户任务定义 (Task Definition)

描述: 用户需要明确定义希望 Browser-use 完成的任务。任务描述应该尽可能清晰、具体、自然语言化，以便 LLM 能够准确理解用户的意图。

实践:

• 任务描述方式: 使用自然语言文本描述任务，例如："搜索 '最新人工智能技术' 并提取前 5 个搜索结果的标题和链接"、"打开 https://www.example.com/product/123 页面，获取产品名称、价格和描述"、"填写注册表单，用户名设置为 'testuser'，密码设置为 'password123'"。

• 任务目标明确: 明确任务的目标，例如是信息提取、数据抓取、网页交互、还是流程自动化。

• 信息需求具体: 如果任务是信息提取，需要明确指出需要提取哪些信息，例如：网页标题、特定元素的文本内容、表格数据、图片链接等。

• 操作步骤描述 (可选): 对于复杂任务，用户可以在任务描述中提供一些操作步骤的提示，例如："先点击 '搜索' 按钮，然后在搜索框中输入关键词"。但这通常不是必需的，Browser-use 的智能性在于它能够自主规划操作步骤。

示例任务描述:

• "Navigate to https://github.com/browser-use/browser-use and get the repository's description and star count."

• "Go to https://www.amazon.com, search for 'wireless headphones', and find the top 3 products with the highest ratings."

• "Open Google Translate, translate 'Hello World' from English to Chinese, and output the translated text."

5.1.2.2 步骤二：LLM 解析与任务理解 (LLM Parsing & Task Interpretation)

描述: LLM 接收用户任务描述，进行自然语言理解 (NLU) 和任务分解。LLM 的能力直接影响 Browser-use 理解任务的准确性和深度。

实践:

• LLM 模型选择: Browser-use 支持多种 LLM 模型，例如 OpenAI 的 GPT 系列 (GPT-4o, GPT-4, GPT-3.5-turbo)、Anthropic 的 Claude、Google 的 Gemini、DeepSeek 等。用户可以根据任务的复杂度和成本预算选择合适的 LLM 模型。通常，更强大的模型 (如 GPT-4o) 能够更好地理解复杂指令和生成更合理的执行计划，但也可能成本更高。

• API Key 配置: 使用 LLM 服务通常需要 API Key。用户需要在 .env 文件或代码中配置相应的 API Key，例如 OPENAI_API_KEY、ANTHROPIC_API_KEY 等。

• System Prompt (系统提示词): Browser-use 允许用户自定义 System Prompt，以引导 LLM 更好地理解任务背景和期望行为。System Prompt 可以定义 Agent 的角色、目标、约束条件、以及输出格式等。默认情况下，Browser-use 已经提供了一个通用的 System Prompt，在大多数情况下无需修改。高级用户可以根据特定需求定制 System Prompt 以优化任务执行效果。

• Task Decomposition (任务分解): LLM 会将用户任务分解为一系列更小的、更具体的子任务或步骤。例如，将 "搜索 '最新人工智能技术' 并提取前 5 个搜索结果的标题和链接" 分解为：

  1. "Open a browser and navigate to a search engine (e.g., Google)."

  2. "Locate the search input field."

  3. "Enter the search query '最新人工智能技术'."

  4. "Submit the search query."

  5. "Wait for the search results page to load."

  6. "Identify the top 5 search result links."

  7. "For each of the top 5 results, extract the title and the URL."

  8. "Output the extracted titles and URLs in a structured format."

Graph TD 图 (步骤一 & 步骤二):

5.1.2.3 步骤三：Agent 智能决策与规划 (Agent Decision & Planning)

描述: Agent 接收 LLM 分解后的任务步骤，进行智能决策和执行计划的制定。Agent 的核心职责是：

• 选择合适的工具和动作: 根据任务步骤，Agent 需要选择 Browser-use 提供的工具和动作来完成任务。例如，导航到 URL 使用 goto_url action，点击元素使用 click action，提取文本使用 extract_text action 等。

• 规划执行顺序: Agent 需要规划动作的执行顺序，确保任务能够按预期完成。例如，在提取信息之前，需要先导航到目标网页。

• 处理复杂场景: Agent 需要能够处理各种复杂的网页场景，例如：动态加载内容、AJAX 请求、弹窗、iframe 等。

• 错误处理和重试: Agent 需要具备一定的错误处理能力，例如，当元素定位失败或页面加载超时时，Agent 可以尝试重试或采取其他策略。

实践:

• Controller (控制器): Browser-use 使用 Controller 组件来管理可用的 actions (动作) 和 tools (工具)。用户可以自定义 actions 来扩展 Browser-use 的功能。默认情况下，Browser-use 提供了一系列常用的 actions，例如：

  • goto_url: 导航到指定的 URL。

  • click: 点击网页元素。

  • fill_input: 在输入框中填写文本。

  • extract_text: 提取元素的文本内容。