Browser use — 利用 AI 操作浏览器 · 实践篇

1. Browser-Use 简介

Browser-Use 是一个强大的框架，它让 AI 能够通过自然语言控制浏览器，完成复杂的网页任务。它基于大语言模型，使用 Playwright 作为底层浏览器自动化工具，让 AI 能够像人类一样与网页交互。

1.1 核心优势

自然语言控制：通过简单的文本指令控制浏览器
智能元素识别：自动识别网页中的可交互元素
视觉理解能力：可以理解页面布局和元素位置
可扩展性：支持自定义功能和操作

2. 快速入门

2.1 基本使用

最简单的使用方式是提供一个任务描述，让 AI 自动完成：

python 复制代码

from langchain_openai import ChatOpenAI
from browser_use import Agent
import asyncio
from dotenv import load_dotenv
load_dotenv()

async def main():
    agent = Agent(
        task="帮我谷歌搜索最新的人工智能新闻",
        llm=ChatOpenAI(model="gpt-4o"),
    )
    await agent.run()

asyncio.run(main())

2.2 自定义功能

您可以通过自定义 Controller 来扩展 Browser-Use 的功能，实现特定业务需求：

python 复制代码

from langchain_openai import ChatOpenAI
from browser_use import Agent, Controller, ActionResult
from pydantic import BaseModel, Optional
import asyncio
from dotenv import load_dotenv
load_dotenv()

# 定义数据模型
class JobDetails(BaseModel):
    title: str
    company: str
    job_link: str
    salary: Optional[str] = None
    
# 创建控制器并注册自定义操作
controller = Controller()
@controller.action('保存职位详情到数据库', param_model = JobDetails)
async def save_job(job_details: JobDetails, browser: Browser) -> ActionResult:
    # 这里可以调用接口，将数据保存到后端
    await post_data_to_database(job_details)
    return ActionResult(
        success=True,
        extracted_content="成功保存职位信息",
        include_in_memory=True
    )

async def main():
    agent = Agent(
        task="搜索软件工程师职位并保存结果",
        llm=ChatOpenAI(model="gpt-4o"),
        controller=controller
    )
    await agent.run()

asyncio.run(main())

3. 实际应用案例：自动检测购物车按钮

3.1 业务场景

在电子商务领域，我们经常需要检测不同商家店铺的 Checkout 按钮。由于店铺主题千变万化，按钮的样式和位置各不相同，传统方法效果不佳：

购物车按钮会随店铺主题变化，难以通过预设值匹配
匹配失败时需要人工介入，增加维护成本

3.2 解决方案流程

graph TD A[打开店铺URL] --> B[通过API加入购物车] B --> C[AI自动寻找购物车] C --> D[找到Checkout按钮] D --> E{按钮与预设值匹配?} E -->|是| F[返回匹配成功] E -->|否| G[生成推荐选择器] G --> H[返回推荐结果]

3.3 实现代码

python 复制代码

class ButtonCheckService:
    def __init__(self):
        self.controller = Controller()
        
        @self.controller.action('将商品加入购物车')
        async def add_to_cart(params: AddToCartParams, browser: Browser) -> ActionResult:
            # 调用店铺 API 加购
            response = await api_client.add_to_cart(params.product_id, params.quantity)
            
            return ActionResult(
                success=response.status == "success",
                extracted_content="成功将商品加入购物车",
                include_in_memory=True
            )
     
        @self.controller.action('检查 Checkout 按钮是否与预设值匹配')
        async def check_button_preset(params: NoParams, browser: Browser) -> ActionResult:
            # 检查预设选择器
            is_match = await get_is_match_selector(PRESET_SELECTOR) is not None
            
            if is_match:
                return ActionResult(
                    success=True,
                    extracted_content=f'选择器与预设值匹配: {PRESET_SELECTOR}',
                    include_in_memory=True
                )
            
            # 如果不匹配，推荐新选择器
            recommended_selectors = await self.get_recommend_selectors(page)
            
            return ActionResult(
                success=True,
                extracted_content=f'选择器不匹配，推荐选择器: {recommended_selectors}',
                include_in_memory=True
            )
            
    async def run_checkout_detection(self, shop_url: str):
        agent = Agent(
            task=f"访问{shop_url}，找到购物车并检查Checkout按钮",
            llm=ChatOpenAI(model="gpt-4o"),
            controller=self.controller
        )
        
        result = await agent.run()
        return result