1. 项目概述当AI智能体开始“浏览”网页最近在折腾一个项目需要让AI自动去几个网站上抓取数据、填写表单甚至完成一些简单的交互操作。一开始我还在想这不就是传统的爬虫或者自动化脚本吗但深入后发现事情没那么简单。传统的Selenium脚本写起来繁琐遇到验证码、动态加载、页面结构微调就得重写维护成本高得吓人。直到我开始尝试结合大语言模型LLM来构建所谓的“AI智能体”让它来理解和操作浏览器整个流程才变得真正“智能”和“鲁棒”起来。这个“AI智能体自动化操作浏览器”的项目核心目标就是打造一个能像人一样“看”网页、“想”逻辑、“做”操作的自动化助手。它不再是死板地执行预设的XPath或CSS选择器而是能理解网页的语义内容根据自然语言指令比如“找到登录框并输入我的账号密码”、“在商品列表里找到价格低于100元的第一个商品并点击”来动态决策和执行动作。这背后融合了LLM的自然语言理解能力、计算机视觉对网页元素的识别以及成熟的浏览器自动化框架如Playwright、Selenium的执行能力。无论是做数据采集、RPA机器人流程自动化、自动化测试还是构建复杂的业务工作流这种模式都展现出巨大的潜力。接下来我就把自己从零搭建这套系统的实践过程、踩过的坑和核心心得毫无保留地分享出来。2. 核心架构与工具选型解析要构建一个能自动化操作浏览器的AI智能体首先得理清它的“骨架”和“器官”。整个系统可以抽象为三层感知层、决策层和执行层。2.1 感知层让AI“看见”网页AI智能体操作浏览器的第一步是获取当前页面的状态信息。传统自动化靠的是HTML源码和元素选择器但这对AI来说不够直观。我们需要把网页“翻译”成AI能更好理解的形式。1. 网页内容的结构化提取单纯把整个HTML扔给LLM不仅token消耗巨大而且噪音太多。更高效的做法是进行结构化提取DOM树简化与关键信息抽取使用工具如BeautifulSoup或lxml解析HTML过滤掉脚本、样式等无关标签提取出主要的文本内容、链接、按钮文字、输入框的placeholder等并保留基本的层级关系如哪个按钮在哪个表单里。这能生成一个轻量级的、富含语义的页面描述。视觉信息的补充对于纯HTML难以描述的布局、图片内容或复杂的UI状态如一个按钮是灰色不可点击需要借助计算机视觉。可以通过浏览器自动化框架如Playwright对页面进行截图然后使用多模态大模型如GPT-4V、Claude-3 Opus或专门的OCR工具来“看”图识别其中的文字和元素位置。注意在实际操作中我通常采用“混合感知”策略。先通过简化DOM获取大部分文本和结构信息成本低、速度快。只有当遇到图形验证码、复杂图表或需要确认元素视觉状态时才调用成本较高的视觉模型。这需要在效果和成本间取得平衡。2. 上下文记忆与管理AI智能体不是一次性的它需要记住之前的操作和结果。例如它需要知道刚才点击了“下一页”按钮现在看到的是第二页的商品列表。这就需要引入“记忆”模块。简单的做法是在每次与LLM交互时将之前的操作历史Action History和页面关键变化作为上下文Context一并传入。更复杂的系统会使用向量数据库来存储长期记忆方便进行相关信息的检索。2.2 决策层AI的“大脑”——LLM的选择与提示工程这是整个系统的核心。LLM需要根据感知层提供的页面信息以及我们给它的任务指令决定下一步该做什么。1. LLM选型考量云端大模型GPT-4, Claude-3, 文心一言 通义千问等能力强理解与推理效果最佳尤其是多模态模型能直接处理截图。缺点是API调用有成本、有延迟且涉及数据出海的合规风险需要谨慎评估。对于复杂、容错率低的商业流程目前仍是首选。本地开源模型Llama 3, Qwen, DeepSeek等数据隐私性好无使用成本。但对硬件要求高且大多数开源模型在长上下文、复杂指令遵循和规划能力上仍与顶尖闭源模型有差距。适合对数据安全极度敏感、任务相对固定、且有一定GPU资源的场景。折中方案可以考虑使用云端大模型进行复杂的任务规划和关键决策而将一些简单的、模式固定的操作如“点击登录按钮”下发给一个轻量级的本地模型或规则引擎。我在一个内部数据核对项目中就采用了这种混合架构既保证了核心逻辑的智能性又控制了成本。2. 提示词Prompt设计的艺术让LLM操作浏览器提示词设计至关重要。它必须清晰定义角色、任务、可用动作以及输出格式。 一个基础的提示词框架如下你是一个网页自动化助手。你的目标是通过操作浏览器来完成用户给定的任务。 当前任务[用户的具体任务例如“在电商网站搜索‘无线鼠标’并按价格从低到高排序”] 当前页面摘要[来自感知层的简化页面描述包括可见的文本、链接、按钮等] 上一次操作[如果是连续操作记录上一步做了什么] 你可以执行的操作类型包括 1. CLICK [元素描述] - 点击某个元素如 CLICK 登录按钮 2. TYPE [元素描述] [文本] - 在输入框输入文本如 TYPE 搜索框 无线鼠标 3. SELECT [下拉框描述] [选项文本] - 选择下拉框选项 4. SCROLL [方向] - 滚动页面 5. WAIT [时间或条件] - 等待 6. NAVIGATE [URL] - 跳转到新网址 7. EXTRACT [信息描述] - 提取并返回页面上的特定信息 8. TASK_COMPLETE - 任务完成 请根据当前页面和任务思考下一步最合适的操作。只输出操作指令不要输出任何其他解释。 你的思考过程[这里让模型进行链式思考Chain-of-Thought可以提高决策准确性] 下一步操作关键在于要约束LLM的输出格式必须严格遵循你定义的指令集方便执行层解析。同时加入“思考过程”能极大提升动作选择的合理性虽然会消耗更多token但减少了错误操作导致的整体成本。2.3 执行层浏览器自动化框架的抉择决策层输出指令后需要可靠的“手”来执行。这就是浏览器自动化框架。1. Playwright vs Selenium vs PuppeteerPlaywright推荐这是我目前的主力选择。由微软开发支持Chromium、Firefox、WebKit三大内核。它的API设计非常现代和友好自动等待机制auto-waiting能智能等待元素可交互大大减少了编写time.sleep的需要。内置了截图、录屏、网络拦截等强大功能对单页应用SPA的支持也更好。其locator定位器比Selenium的定位方式更稳健。Selenium老牌王者生态极其丰富社区庞大几乎所有语言都有绑定。如果你需要兼容非常古老的浏览器版本或者项目技术栈已经重度依赖Selenium它依然是可靠的选择。但相比Playwright需要更多手动处理等待和浏览器驱动配置稍显繁琐。Puppeteer专注于Chrome/Chromium由Google开发与DevTools协议深度集成性能和控制粒度极细。如果你只需要Chrome且追求极致性能和控制力Puppeteer很棒。但生态和跨浏览器支持不如Playwright。2. 执行层的核心职责执行层接收到的指令可能是“CLICK 登录按钮”。它需要指令解析将自然语言指令映射到具体的页面元素定位器。这里可以结合感知层提供的元素信息比如某个按钮的文本是“登录”其附近的HTML特征使用Playwright的文本定位器page.get_by_text(“登录”)或角色定位器page.get_by_role(“button”, name“登录”)来精准定位。动作执行调用框架API执行点击、输入等操作。异常处理与重试网络波动、元素加载稍慢、偶尔的弹窗都会导致操作失败。执行层必须有健壮的重试和异常处理逻辑。例如点击失败后不是立刻报错而是可以等待2秒再尝试或者刷新页面后重试特定步骤。状态反馈执行完成后需要触发感知层重新获取页面状态形成一个“感知-决策-执行”的闭环。3. 从零搭建一个基础AI浏览器智能体理论讲完了我们动手搭一个最简单的原型。这个原型能接受一个自然语言任务在指定的网站上自动执行。3.1 环境准备与依赖安装我们选择Python作为开发语言使用Playwright作为执行引擎并调用OpenAI GPT-4API 作为决策大脑你也可以替换为其他LLM的SDK。创建项目并安装核心库mkdir ai-browser-agent cd ai-browser-agent python -m venv venv # Windows: venv\Scripts\activate # Mac/Linux: source venv/bin/activate pip install playwright openai python-dotenv安装Playwright浏览器playwright install chromium这条命令会下载一个独立的Chromium浏览器避免污染你系统原有的Chrome。配置API密钥在项目根目录创建.env文件填入你的OpenAI API密钥。OPENAI_API_KEYsk-your-api-key-here3.2 核心模块代码实现我们将创建三个核心Python文件perception.py,brain.py,executor.py。1. 感知模块 (perception.py)这个模块负责获取当前页面的“快照”并将其转化为给LLM的文本描述。from playwright.sync_api import Page import html2text class PagePerception: def __init__(self, page: Page): self.page page self.html_converter html2text.HTML2Text() self.html_converter.ignore_links False self.html_converter.ignore_images True def get_page_summary(self) - str: 获取当前页面的简化文本摘要 # 获取页面主要文本内容 content self.page.content() # 使用html2text将HTML转为更易读的Markdown格式文本 text_content self.html_converter.handle(content) # 提取所有交互元素的文本按钮、链接、输入框 interactive_elements [] # 使用Playwright的定位器获取可见的交互元素 buttons self.page.locator(button, a, input, [rolebutton]).filter(has_text).all() for btn in buttons[:20]: # 限制数量避免过长 if btn.is_visible(): text btn.text_content() or btn.get_attribute(value) or btn.get_attribute(placeholder) or if text.strip(): interactive_elements.append(f- {text.strip()}) summary f页面文本内容摘要 {text_content[:1500]}... [内容已截断] 页面上的主要可交互元素 summary \n.join(interactive_elements[:15]) # 限制列举数量 return summary def get_screenshot_as_base64(self): 将页面截图并转为base64供多模态模型使用可选 screenshot_bytes self.page.screenshot(typepng) import base64 return base64.b64encode(screenshot_bytes).decode(utf-8)这个感知器做了几件事将HTML转为更干净的文本提取可见的交互元素按钮、链接及其文字并提供了截图功能备用。在实际项目中你还可以加入更智能的DOM过滤只保留main,article等主体区域的内容。2. 决策大脑模块 (brain.py)这个模块封装了与LLM的交互负责生成下一步动作。import os from openai import OpenAI from dotenv import load_dotenv import json load_dotenv() class AgentBrain: def __init__(self, modelgpt-4-turbo): self.client OpenAI(api_keyos.getenv(OPENAI_API_KEY)) self.model model # 定义智能体可以执行的动作集合 self.action_set 可执行动作请严格按以下格式输出JSON { thought: 你的思考过程分析当前页面和任务决定下一步做什么, action: 动作类型, target: 目标元素描述或参数, value: 可选输入动作需要的值 } 动作类型说明 - click: 点击。target应为元素文本描述如“登录按钮”。 - type: 输入文本。target为输入框描述value为要输入的文本。 - scroll: 滚动。target为方向如“down”或“up”。 - wait: 等待。target为时间秒或条件描述。 - navigate: 跳转。target为URL。 - extract: 提取信息。target为要提取的信息描述。 - complete: 任务完成。 def decide_next_action(self, task: str, page_summary: str, history: list) - dict: 根据任务、页面摘要和历史决定下一步动作 history_str \n.join([f- {h} for h in history[-3:]]) if history else 无 prompt f 你是一个网页自动化智能体。你的唯一目标是完成用户任务。 用户任务{task} 当前页面摘要 {page_summary} 最近操作历史 {history_str} {self.action_set} 请输出JSON对象且仅输出JSON对象不要有任何其他文本。 try: response self.client.chat.completions.create( modelself.model, messages[{role: user, content: prompt}], temperature0.1, # 低温度保证输出稳定 response_format{type: json_object} # 强制JSON输出 ) action_json json.loads(response.choices[0].message.content) return action_json except Exception as e: print(f调用LLM决策失败: {e}) # 降级策略返回一个安全动作如等待 return {thought: 决策出错进入安全等待, action: wait, target: 2}这个大脑的核心是构造了一个清晰的提示词并利用GPT-4的response_format参数强制其输出结构化的JSON方便后续解析。temperature设为较低值0.1是为了减少输出的随机性让动作更稳定。3. 执行器模块 (executor.py)这个模块负责解析大脑的指令并驱动Playwright执行。from playwright.sync_api import Page, TimeoutError as PlaywrightTimeoutError import time class ActionExecutor: def __init__(self, page: Page): self.page page def execute(self, action: dict) - str: 执行单个动作并返回执行结果描述 action_type action.get(action) target action.get(target, ) value action.get(value, ) result f执行: {action_type} - {target} if value: result f (值: {value}) try: if action_type click: # 使用Playwright的文本定位器这是最接近人类“看文字点击”的方式 self.page.get_by_text(target, exactFalse).first.click(timeout5000) result - 成功 elif action_type type: # 先定位输入框再输入 locator self.page.get_by_role(textbox).or_(self.page.locator(finput[placeholder*{target}])).first locator.fill(value) result - 成功 elif action_type scroll: if target.lower() down: self.page.mouse.wheel(0, 300) else: self.page.mouse.wheel(0, -300) time.sleep(1) # 等待滚动后内容加载 result - 成功 elif action_type wait: sec float(target) if target.replace(., , 1).isdigit() else 2 time.sleep(sec) result f - 等待{sec}秒 elif action_type navigate: self.page.goto(target) result - 页面跳转中 elif action_type complete: result 任务标记为完成 else: result f未知动作类型: {action_type} except PlaywrightTimeoutError: result - 失败元素未找到或超时 except Exception as e: result f - 失败{str(e)} return result执行器的关键点在于将自然语言描述“翻译”成Playwright定位器。这里用了get_by_text和get_by_role它们比传统的XPath或CSS选择器更具语义性也更健壮。同时加入了异常捕获将执行结果反馈回去。3.3 主循环与任务实战最后我们编写一个主程序将感知、决策、执行三个模块串联起来形成一个完整的闭环。from playwright.sync_api import sync_playwright from perception import PagePerception from brain import AgentBrain from executor import ActionExecutor import time def run_ai_agent(task: str, start_url: str): 运行AI智能体完成指定任务 with sync_playwright() as p: # 1. 启动浏览器 browser p.chromium.launch(headlessFalse) # 设为True可无头运行 context browser.new_context(viewport{width: 1280, height: 720}) page context.new_page() page.goto(start_url) time.sleep(2) # 初始页面加载等待 # 2. 初始化三大模块 perceiver PagePerception(page) brain AgentBrain() executor ActionExecutor(page) action_history [] max_steps 20 # 防止死循环 current_step 0 print(f开始任务: {task}) print(f起始页面: {start_url}) # 3. 主循环感知 - 决策 - 执行 while current_step max_steps: current_step 1 print(f\n--- 步骤 {current_step} ---) # 感知获取当前页面状态 page_summary perceiver.get_page_summary() # print(f页面摘要:\n{page_summary[:500]}...) # 调试时可查看 # 决策LLM决定下一步 print(思考中...) next_action brain.decide_next_action(task, page_summary, action_history) print(f决策: {next_action.get(thought)}) print(f动作: {next_action}) # 执行执行动作 if next_action.get(action) complete: print(任务完成) break result executor.execute(next_action) action_history.append(result) print(f结果: {result}) # 动作执行后等待页面稳定 time.sleep(1.5) if current_step max_steps: print(达到最大步数限制任务可能未完成。) browser.close() if __name__ __main__: # 示例任务在豆瓣搜索书籍并获取第一本书名 user_task 在搜索框输入‘机器学习’点击搜索按钮然后在结果列表中找到第一个图书条目提取它的书名。 start_url https://www.douban.com run_ai_agent(user_task, start_url)这个主循环清晰展示了智能体的工作流每轮循环中先感知页面然后将页面摘要和任务交给LLM决策再执行决策出的动作并将结果记录到历史中如此循环直至任务完成或达到步数上限。4. 进阶优化与工程化实践基础原型能跑起来但离“稳定可用”还有很大距离。下面分享几个关键的进阶优化点这些都是我在实际项目中踩坑后总结的经验。4.1 提升动作执行的鲁棒性基础执行器里简单的get_by_text(“搜索按钮”).click()在复杂页面上非常脆弱。页面可能有多个“搜索”文本或者元素是图片按钮没有文字。1. 多策略融合定位不要依赖单一的定位策略。一个健壮的定位器应该按优先级尝试多种方法def robust_locate_click_element(page, target_description): 鲁棒地定位并点击元素 # 策略1: 通过精确文本定位优先 if page.get_by_text(target_description, exactTrue).count() 1: return page.get_by_text(target_description, exactTrue) # 策略2: 通过包含文本定位 if page.get_by_text(target_description, exactFalse).count() 0: return page.get_by_text(target_description, exactFalse).first # 策略3: 通过ARIA角色定位对于按钮 if page.get_by_role(button, nametarget_description).count() 0: return page.get_by_role(button, nametarget_description) # 策略4: 通过CSS选择器如果描述像CSS如“#submit-btn” if target_description.startswith((#, .)): return page.locator(target_description) # 策略5: 结合视觉/坐标最后手段通过多模态模型获取元素坐标 # ... 调用视觉模型分析截图返回坐标 raise ElementNotFoundException(f无法定位元素: {target_description})2. 智能等待与重试网络延迟或动态加载会导致元素短暂不可见。Playwright的auto-waiting很好但有时需要更定制化的等待。def click_with_retry(locator, max_retries3): for i in range(max_retries): try: locator.click(timeout10000) # 基础超时设为10秒 return True except Exception as e: if i max_retries - 1: raise print(f点击失败第{i1}次重试... 错误: {e}) time.sleep(2 ** i) # 指数退避等待 return False4.2 优化LLM交互与成本控制直接每步都调用GPT-4成本高且慢。需要优化。1. 分层任务规划与步骤分解不要让LLM一次只决定一步。可以在任务开始时让一个更强大的模型如GPT-4进行高层任务规划将“在电商网站购买商品”分解为“登录 - 搜索 - 筛选 - 加入购物车 - 结算”等子任务。然后每个子任务内的具体操作如点击哪个筛选框可以由一个更便宜、更快的模型如GPT-3.5-Turbo甚至本地小模型来执行。2. 缓存与记忆优化页面摘要缓存如果连续几步操作后页面主体内容未变只是弹了个窗可以复用之前的页面摘要只将变化部分弹窗内容传给LLM。动作模板缓存对于高频操作如“点击登录按钮”一旦成功定位并执行可以将“登录按钮”与该页面具体的定位器如一个稳定的CSS选择器缓存起来。下次在相同页面遇到相同指令时直接使用缓存定位器绕过LLM决策和文本定位极大提升速度和稳定性。3. 设置预算与熔断在AgentBrain类中加入成本跟踪和步数限制。当单次任务消耗的token或API费用超过阈值或循环步数过多时自动中止任务并报警防止因逻辑错误导致无限循环产生巨额费用。4.3 集成到自动化工作流平台单一的脚本能力有限。真正的生产力是将AI智能体作为节点嵌入到像n8n、Apache Airflow这样的自动化工作流平台中。1. 封装为可调用服务将你的AI智能体代码封装成一个HTTP API服务使用FastAPI或Flask。接收{“task”: “xxx”, “url”: “yyy”}这样的请求返回执行结果或最终提取的数据。这样n8n的HTTP Request节点就可以轻松调用它。2. 与Dify、Coze等低代码平台结合像Dify、扣子Coze这类AI智能体开发平台擅长编排LLM的对话逻辑。你可以将“浏览器操作”作为一个自定义工具Tool或函数Function接入。平台负责复杂的对话状态管理和用户交互当需要操作网页时就调用你提供的这个工具。这样就能构建出“用户用自然语言描述复杂任务 - 平台分解并协调 - 调用浏览器智能体执行”的超级自动化流程。5. 常见问题、排查技巧与避坑指南在实际部署和运行中你会遇到各种各样的问题。这里记录了一些典型问题和我的解决方案。5.1 元素定位失败AI“看”不到或“点”不准这是最高频的问题。现象LLM决策出的动作如CLICK “下一步”执行器无法定位。排查检查感知摘要首先打印出get_page_summary()返回的内容看看你希望点击的“下一步”按钮的文本是否真的被提取出来了。有时按钮文字是图片、SVG图标或通过CSS伪元素生成html2text可能抓不到。检查页面状态执行动作前页面是否完全加载特别是单页应用SPA点击后URL不变但内容变了你需要确保在page_summary中包含了新加载区域的内容。可以尝试在动作执行后增加page.wait_for_load_state(“networkidle”)。使用Playwright调试工具在launch参数中加入headlessFalse和devtoolsTrue手动运行脚本。当脚本暂停或失败时手动在浏览器开发者工具里检查元素看看你预想的定位器是否有效。解决丰富感知信息在get_page_summary中除了文本还可以提取元素的role、aria-label、># 首次登录后保存状态 context.storage_state(pathauth_state.json) # 下次启动时加载状态 context browser.new_context(storage_stateauth_state.json)这样智能体就能“记住”登录状态。关键是要确保登录流程本身能被自动化完成或者首次由人工登录后保存状态。5.4 性能优化与规模化当任务变多、变复杂时性能成为瓶颈。并行执行如果你的任务是处理一批独立的URL如抓取100个商品详情页可以使用asyncio和Playwright的异步API同时启动多个浏览器实例或标签页并行处理。注意管理好每个智能体的独立上下文Context避免状态互相干扰。无头模式与资源限制生产环境务必使用headlessTrue。可以通过browser.new_context参数限制不必要的资源加载如屏蔽图片、CSS甚至字体能显著提升页面加载速度。context browser.new_context( viewport{width: 1280, height: 720}, user_agent你的自定义UA, bypass_cspTrue, # 谨慎使用 java_script_enabledTrue, # 拦截不必要的请求以加速 extra_http_headers{...} )模型API的异步与批处理如果步骤很多可以考虑将多个步骤的决策请求批量发送给LLM API如果API支持减少网络往返延迟。构建一个稳定、高效的AI浏览器智能体是一个持续迭代的过程。它不是一个“写一次就完事”的脚本而是一个需要精心设计感知、决策、执行三个环节并不断加入异常处理、优化策略的“软件系统”。从简单的原型出发逐步解决遇到的具体问题你会发现它所能带来的自动化潜力是巨大的。无论是替代重复的日常操作还是构建复杂的数据流水线这套思路都提供了一个全新的、更智能的解决方案。
1. 项目概述当AI智能体开始“浏览”网页最近在折腾一个项目需要让AI自动去几个网站上抓取数据、填写表单甚至完成一些简单的交互操作。一开始我还在想这不就是传统的爬虫或者自动化脚本吗但深入后发现事情没那么简单。传统的Selenium脚本写起来繁琐遇到验证码、动态加载、页面结构微调就得重写维护成本高得吓人。直到我开始尝试结合大语言模型LLM来构建所谓的“AI智能体”让它来理解和操作浏览器整个流程才变得真正“智能”和“鲁棒”起来。这个“AI智能体自动化操作浏览器”的项目核心目标就是打造一个能像人一样“看”网页、“想”逻辑、“做”操作的自动化助手。它不再是死板地执行预设的XPath或CSS选择器而是能理解网页的语义内容根据自然语言指令比如“找到登录框并输入我的账号密码”、“在商品列表里找到价格低于100元的第一个商品并点击”来动态决策和执行动作。这背后融合了LLM的自然语言理解能力、计算机视觉对网页元素的识别以及成熟的浏览器自动化框架如Playwright、Selenium的执行能力。无论是做数据采集、RPA机器人流程自动化、自动化测试还是构建复杂的业务工作流这种模式都展现出巨大的潜力。接下来我就把自己从零搭建这套系统的实践过程、踩过的坑和核心心得毫无保留地分享出来。2. 核心架构与工具选型解析要构建一个能自动化操作浏览器的AI智能体首先得理清它的“骨架”和“器官”。整个系统可以抽象为三层感知层、决策层和执行层。2.1 感知层让AI“看见”网页AI智能体操作浏览器的第一步是获取当前页面的状态信息。传统自动化靠的是HTML源码和元素选择器但这对AI来说不够直观。我们需要把网页“翻译”成AI能更好理解的形式。1. 网页内容的结构化提取单纯把整个HTML扔给LLM不仅token消耗巨大而且噪音太多。更高效的做法是进行结构化提取DOM树简化与关键信息抽取使用工具如BeautifulSoup或lxml解析HTML过滤掉脚本、样式等无关标签提取出主要的文本内容、链接、按钮文字、输入框的placeholder等并保留基本的层级关系如哪个按钮在哪个表单里。这能生成一个轻量级的、富含语义的页面描述。视觉信息的补充对于纯HTML难以描述的布局、图片内容或复杂的UI状态如一个按钮是灰色不可点击需要借助计算机视觉。可以通过浏览器自动化框架如Playwright对页面进行截图然后使用多模态大模型如GPT-4V、Claude-3 Opus或专门的OCR工具来“看”图识别其中的文字和元素位置。注意在实际操作中我通常采用“混合感知”策略。先通过简化DOM获取大部分文本和结构信息成本低、速度快。只有当遇到图形验证码、复杂图表或需要确认元素视觉状态时才调用成本较高的视觉模型。这需要在效果和成本间取得平衡。2. 上下文记忆与管理AI智能体不是一次性的它需要记住之前的操作和结果。例如它需要知道刚才点击了“下一页”按钮现在看到的是第二页的商品列表。这就需要引入“记忆”模块。简单的做法是在每次与LLM交互时将之前的操作历史Action History和页面关键变化作为上下文Context一并传入。更复杂的系统会使用向量数据库来存储长期记忆方便进行相关信息的检索。2.2 决策层AI的“大脑”——LLM的选择与提示工程这是整个系统的核心。LLM需要根据感知层提供的页面信息以及我们给它的任务指令决定下一步该做什么。1. LLM选型考量云端大模型GPT-4, Claude-3, 文心一言 通义千问等能力强理解与推理效果最佳尤其是多模态模型能直接处理截图。缺点是API调用有成本、有延迟且涉及数据出海的合规风险需要谨慎评估。对于复杂、容错率低的商业流程目前仍是首选。本地开源模型Llama 3, Qwen, DeepSeek等数据隐私性好无使用成本。但对硬件要求高且大多数开源模型在长上下文、复杂指令遵循和规划能力上仍与顶尖闭源模型有差距。适合对数据安全极度敏感、任务相对固定、且有一定GPU资源的场景。折中方案可以考虑使用云端大模型进行复杂的任务规划和关键决策而将一些简单的、模式固定的操作如“点击登录按钮”下发给一个轻量级的本地模型或规则引擎。我在一个内部数据核对项目中就采用了这种混合架构既保证了核心逻辑的智能性又控制了成本。2. 提示词Prompt设计的艺术让LLM操作浏览器提示词设计至关重要。它必须清晰定义角色、任务、可用动作以及输出格式。 一个基础的提示词框架如下你是一个网页自动化助手。你的目标是通过操作浏览器来完成用户给定的任务。 当前任务[用户的具体任务例如“在电商网站搜索‘无线鼠标’并按价格从低到高排序”] 当前页面摘要[来自感知层的简化页面描述包括可见的文本、链接、按钮等] 上一次操作[如果是连续操作记录上一步做了什么] 你可以执行的操作类型包括 1. CLICK [元素描述] - 点击某个元素如 CLICK 登录按钮 2. TYPE [元素描述] [文本] - 在输入框输入文本如 TYPE 搜索框 无线鼠标 3. SELECT [下拉框描述] [选项文本] - 选择下拉框选项 4. SCROLL [方向] - 滚动页面 5. WAIT [时间或条件] - 等待 6. NAVIGATE [URL] - 跳转到新网址 7. EXTRACT [信息描述] - 提取并返回页面上的特定信息 8. TASK_COMPLETE - 任务完成 请根据当前页面和任务思考下一步最合适的操作。只输出操作指令不要输出任何其他解释。 你的思考过程[这里让模型进行链式思考Chain-of-Thought可以提高决策准确性] 下一步操作关键在于要约束LLM的输出格式必须严格遵循你定义的指令集方便执行层解析。同时加入“思考过程”能极大提升动作选择的合理性虽然会消耗更多token但减少了错误操作导致的整体成本。2.3 执行层浏览器自动化框架的抉择决策层输出指令后需要可靠的“手”来执行。这就是浏览器自动化框架。1. Playwright vs Selenium vs PuppeteerPlaywright推荐这是我目前的主力选择。由微软开发支持Chromium、Firefox、WebKit三大内核。它的API设计非常现代和友好自动等待机制auto-waiting能智能等待元素可交互大大减少了编写time.sleep的需要。内置了截图、录屏、网络拦截等强大功能对单页应用SPA的支持也更好。其locator定位器比Selenium的定位方式更稳健。Selenium老牌王者生态极其丰富社区庞大几乎所有语言都有绑定。如果你需要兼容非常古老的浏览器版本或者项目技术栈已经重度依赖Selenium它依然是可靠的选择。但相比Playwright需要更多手动处理等待和浏览器驱动配置稍显繁琐。Puppeteer专注于Chrome/Chromium由Google开发与DevTools协议深度集成性能和控制粒度极细。如果你只需要Chrome且追求极致性能和控制力Puppeteer很棒。但生态和跨浏览器支持不如Playwright。2. 执行层的核心职责执行层接收到的指令可能是“CLICK 登录按钮”。它需要指令解析将自然语言指令映射到具体的页面元素定位器。这里可以结合感知层提供的元素信息比如某个按钮的文本是“登录”其附近的HTML特征使用Playwright的文本定位器page.get_by_text(“登录”)或角色定位器page.get_by_role(“button”, name“登录”)来精准定位。动作执行调用框架API执行点击、输入等操作。异常处理与重试网络波动、元素加载稍慢、偶尔的弹窗都会导致操作失败。执行层必须有健壮的重试和异常处理逻辑。例如点击失败后不是立刻报错而是可以等待2秒再尝试或者刷新页面后重试特定步骤。状态反馈执行完成后需要触发感知层重新获取页面状态形成一个“感知-决策-执行”的闭环。3. 从零搭建一个基础AI浏览器智能体理论讲完了我们动手搭一个最简单的原型。这个原型能接受一个自然语言任务在指定的网站上自动执行。3.1 环境准备与依赖安装我们选择Python作为开发语言使用Playwright作为执行引擎并调用OpenAI GPT-4API 作为决策大脑你也可以替换为其他LLM的SDK。创建项目并安装核心库mkdir ai-browser-agent cd ai-browser-agent python -m venv venv # Windows: venv\Scripts\activate # Mac/Linux: source venv/bin/activate pip install playwright openai python-dotenv安装Playwright浏览器playwright install chromium这条命令会下载一个独立的Chromium浏览器避免污染你系统原有的Chrome。配置API密钥在项目根目录创建.env文件填入你的OpenAI API密钥。OPENAI_API_KEYsk-your-api-key-here3.2 核心模块代码实现我们将创建三个核心Python文件perception.py,brain.py,executor.py。1. 感知模块 (perception.py)这个模块负责获取当前页面的“快照”并将其转化为给LLM的文本描述。from playwright.sync_api import Page import html2text class PagePerception: def __init__(self, page: Page): self.page page self.html_converter html2text.HTML2Text() self.html_converter.ignore_links False self.html_converter.ignore_images True def get_page_summary(self) - str: 获取当前页面的简化文本摘要 # 获取页面主要文本内容 content self.page.content() # 使用html2text将HTML转为更易读的Markdown格式文本 text_content self.html_converter.handle(content) # 提取所有交互元素的文本按钮、链接、输入框 interactive_elements [] # 使用Playwright的定位器获取可见的交互元素 buttons self.page.locator(button, a, input, [rolebutton]).filter(has_text).all() for btn in buttons[:20]: # 限制数量避免过长 if btn.is_visible(): text btn.text_content() or btn.get_attribute(value) or btn.get_attribute(placeholder) or if text.strip(): interactive_elements.append(f- {text.strip()}) summary f页面文本内容摘要 {text_content[:1500]}... [内容已截断] 页面上的主要可交互元素 summary \n.join(interactive_elements[:15]) # 限制列举数量 return summary def get_screenshot_as_base64(self): 将页面截图并转为base64供多模态模型使用可选 screenshot_bytes self.page.screenshot(typepng) import base64 return base64.b64encode(screenshot_bytes).decode(utf-8)这个感知器做了几件事将HTML转为更干净的文本提取可见的交互元素按钮、链接及其文字并提供了截图功能备用。在实际项目中你还可以加入更智能的DOM过滤只保留main,article等主体区域的内容。2. 决策大脑模块 (brain.py)这个模块封装了与LLM的交互负责生成下一步动作。import os from openai import OpenAI from dotenv import load_dotenv import json load_dotenv() class AgentBrain: def __init__(self, modelgpt-4-turbo): self.client OpenAI(api_keyos.getenv(OPENAI_API_KEY)) self.model model # 定义智能体可以执行的动作集合 self.action_set 可执行动作请严格按以下格式输出JSON { thought: 你的思考过程分析当前页面和任务决定下一步做什么, action: 动作类型, target: 目标元素描述或参数, value: 可选输入动作需要的值 } 动作类型说明 - click: 点击。target应为元素文本描述如“登录按钮”。 - type: 输入文本。target为输入框描述value为要输入的文本。 - scroll: 滚动。target为方向如“down”或“up”。 - wait: 等待。target为时间秒或条件描述。 - navigate: 跳转。target为URL。 - extract: 提取信息。target为要提取的信息描述。 - complete: 任务完成。 def decide_next_action(self, task: str, page_summary: str, history: list) - dict: 根据任务、页面摘要和历史决定下一步动作 history_str \n.join([f- {h} for h in history[-3:]]) if history else 无 prompt f 你是一个网页自动化智能体。你的唯一目标是完成用户任务。 用户任务{task} 当前页面摘要 {page_summary} 最近操作历史 {history_str} {self.action_set} 请输出JSON对象且仅输出JSON对象不要有任何其他文本。 try: response self.client.chat.completions.create( modelself.model, messages[{role: user, content: prompt}], temperature0.1, # 低温度保证输出稳定 response_format{type: json_object} # 强制JSON输出 ) action_json json.loads(response.choices[0].message.content) return action_json except Exception as e: print(f调用LLM决策失败: {e}) # 降级策略返回一个安全动作如等待 return {thought: 决策出错进入安全等待, action: wait, target: 2}这个大脑的核心是构造了一个清晰的提示词并利用GPT-4的response_format参数强制其输出结构化的JSON方便后续解析。temperature设为较低值0.1是为了减少输出的随机性让动作更稳定。3. 执行器模块 (executor.py)这个模块负责解析大脑的指令并驱动Playwright执行。from playwright.sync_api import Page, TimeoutError as PlaywrightTimeoutError import time class ActionExecutor: def __init__(self, page: Page): self.page page def execute(self, action: dict) - str: 执行单个动作并返回执行结果描述 action_type action.get(action) target action.get(target, ) value action.get(value, ) result f执行: {action_type} - {target} if value: result f (值: {value}) try: if action_type click: # 使用Playwright的文本定位器这是最接近人类“看文字点击”的方式 self.page.get_by_text(target, exactFalse).first.click(timeout5000) result - 成功 elif action_type type: # 先定位输入框再输入 locator self.page.get_by_role(textbox).or_(self.page.locator(finput[placeholder*{target}])).first locator.fill(value) result - 成功 elif action_type scroll: if target.lower() down: self.page.mouse.wheel(0, 300) else: self.page.mouse.wheel(0, -300) time.sleep(1) # 等待滚动后内容加载 result - 成功 elif action_type wait: sec float(target) if target.replace(., , 1).isdigit() else 2 time.sleep(sec) result f - 等待{sec}秒 elif action_type navigate: self.page.goto(target) result - 页面跳转中 elif action_type complete: result 任务标记为完成 else: result f未知动作类型: {action_type} except PlaywrightTimeoutError: result - 失败元素未找到或超时 except Exception as e: result f - 失败{str(e)} return result执行器的关键点在于将自然语言描述“翻译”成Playwright定位器。这里用了get_by_text和get_by_role它们比传统的XPath或CSS选择器更具语义性也更健壮。同时加入了异常捕获将执行结果反馈回去。3.3 主循环与任务实战最后我们编写一个主程序将感知、决策、执行三个模块串联起来形成一个完整的闭环。from playwright.sync_api import sync_playwright from perception import PagePerception from brain import AgentBrain from executor import ActionExecutor import time def run_ai_agent(task: str, start_url: str): 运行AI智能体完成指定任务 with sync_playwright() as p: # 1. 启动浏览器 browser p.chromium.launch(headlessFalse) # 设为True可无头运行 context browser.new_context(viewport{width: 1280, height: 720}) page context.new_page() page.goto(start_url) time.sleep(2) # 初始页面加载等待 # 2. 初始化三大模块 perceiver PagePerception(page) brain AgentBrain() executor ActionExecutor(page) action_history [] max_steps 20 # 防止死循环 current_step 0 print(f开始任务: {task}) print(f起始页面: {start_url}) # 3. 主循环感知 - 决策 - 执行 while current_step max_steps: current_step 1 print(f\n--- 步骤 {current_step} ---) # 感知获取当前页面状态 page_summary perceiver.get_page_summary() # print(f页面摘要:\n{page_summary[:500]}...) # 调试时可查看 # 决策LLM决定下一步 print(思考中...) next_action brain.decide_next_action(task, page_summary, action_history) print(f决策: {next_action.get(thought)}) print(f动作: {next_action}) # 执行执行动作 if next_action.get(action) complete: print(任务完成) break result executor.execute(next_action) action_history.append(result) print(f结果: {result}) # 动作执行后等待页面稳定 time.sleep(1.5) if current_step max_steps: print(达到最大步数限制任务可能未完成。) browser.close() if __name__ __main__: # 示例任务在豆瓣搜索书籍并获取第一本书名 user_task 在搜索框输入‘机器学习’点击搜索按钮然后在结果列表中找到第一个图书条目提取它的书名。 start_url https://www.douban.com run_ai_agent(user_task, start_url)这个主循环清晰展示了智能体的工作流每轮循环中先感知页面然后将页面摘要和任务交给LLM决策再执行决策出的动作并将结果记录到历史中如此循环直至任务完成或达到步数上限。4. 进阶优化与工程化实践基础原型能跑起来但离“稳定可用”还有很大距离。下面分享几个关键的进阶优化点这些都是我在实际项目中踩坑后总结的经验。4.1 提升动作执行的鲁棒性基础执行器里简单的get_by_text(“搜索按钮”).click()在复杂页面上非常脆弱。页面可能有多个“搜索”文本或者元素是图片按钮没有文字。1. 多策略融合定位不要依赖单一的定位策略。一个健壮的定位器应该按优先级尝试多种方法def robust_locate_click_element(page, target_description): 鲁棒地定位并点击元素 # 策略1: 通过精确文本定位优先 if page.get_by_text(target_description, exactTrue).count() 1: return page.get_by_text(target_description, exactTrue) # 策略2: 通过包含文本定位 if page.get_by_text(target_description, exactFalse).count() 0: return page.get_by_text(target_description, exactFalse).first # 策略3: 通过ARIA角色定位对于按钮 if page.get_by_role(button, nametarget_description).count() 0: return page.get_by_role(button, nametarget_description) # 策略4: 通过CSS选择器如果描述像CSS如“#submit-btn” if target_description.startswith((#, .)): return page.locator(target_description) # 策略5: 结合视觉/坐标最后手段通过多模态模型获取元素坐标 # ... 调用视觉模型分析截图返回坐标 raise ElementNotFoundException(f无法定位元素: {target_description})2. 智能等待与重试网络延迟或动态加载会导致元素短暂不可见。Playwright的auto-waiting很好但有时需要更定制化的等待。def click_with_retry(locator, max_retries3): for i in range(max_retries): try: locator.click(timeout10000) # 基础超时设为10秒 return True except Exception as e: if i max_retries - 1: raise print(f点击失败第{i1}次重试... 错误: {e}) time.sleep(2 ** i) # 指数退避等待 return False4.2 优化LLM交互与成本控制直接每步都调用GPT-4成本高且慢。需要优化。1. 分层任务规划与步骤分解不要让LLM一次只决定一步。可以在任务开始时让一个更强大的模型如GPT-4进行高层任务规划将“在电商网站购买商品”分解为“登录 - 搜索 - 筛选 - 加入购物车 - 结算”等子任务。然后每个子任务内的具体操作如点击哪个筛选框可以由一个更便宜、更快的模型如GPT-3.5-Turbo甚至本地小模型来执行。2. 缓存与记忆优化页面摘要缓存如果连续几步操作后页面主体内容未变只是弹了个窗可以复用之前的页面摘要只将变化部分弹窗内容传给LLM。动作模板缓存对于高频操作如“点击登录按钮”一旦成功定位并执行可以将“登录按钮”与该页面具体的定位器如一个稳定的CSS选择器缓存起来。下次在相同页面遇到相同指令时直接使用缓存定位器绕过LLM决策和文本定位极大提升速度和稳定性。3. 设置预算与熔断在AgentBrain类中加入成本跟踪和步数限制。当单次任务消耗的token或API费用超过阈值或循环步数过多时自动中止任务并报警防止因逻辑错误导致无限循环产生巨额费用。4.3 集成到自动化工作流平台单一的脚本能力有限。真正的生产力是将AI智能体作为节点嵌入到像n8n、Apache Airflow这样的自动化工作流平台中。1. 封装为可调用服务将你的AI智能体代码封装成一个HTTP API服务使用FastAPI或Flask。接收{“task”: “xxx”, “url”: “yyy”}这样的请求返回执行结果或最终提取的数据。这样n8n的HTTP Request节点就可以轻松调用它。2. 与Dify、Coze等低代码平台结合像Dify、扣子Coze这类AI智能体开发平台擅长编排LLM的对话逻辑。你可以将“浏览器操作”作为一个自定义工具Tool或函数Function接入。平台负责复杂的对话状态管理和用户交互当需要操作网页时就调用你提供的这个工具。这样就能构建出“用户用自然语言描述复杂任务 - 平台分解并协调 - 调用浏览器智能体执行”的超级自动化流程。5. 常见问题、排查技巧与避坑指南在实际部署和运行中你会遇到各种各样的问题。这里记录了一些典型问题和我的解决方案。5.1 元素定位失败AI“看”不到或“点”不准这是最高频的问题。现象LLM决策出的动作如CLICK “下一步”执行器无法定位。排查检查感知摘要首先打印出get_page_summary()返回的内容看看你希望点击的“下一步”按钮的文本是否真的被提取出来了。有时按钮文字是图片、SVG图标或通过CSS伪元素生成html2text可能抓不到。检查页面状态执行动作前页面是否完全加载特别是单页应用SPA点击后URL不变但内容变了你需要确保在page_summary中包含了新加载区域的内容。可以尝试在动作执行后增加page.wait_for_load_state(“networkidle”)。使用Playwright调试工具在launch参数中加入headlessFalse和devtoolsTrue手动运行脚本。当脚本暂停或失败时手动在浏览器开发者工具里检查元素看看你预想的定位器是否有效。解决丰富感知信息在get_page_summary中除了文本还可以提取元素的role、aria-label、># 首次登录后保存状态 context.storage_state(pathauth_state.json) # 下次启动时加载状态 context browser.new_context(storage_stateauth_state.json)这样智能体就能“记住”登录状态。关键是要确保登录流程本身能被自动化完成或者首次由人工登录后保存状态。5.4 性能优化与规模化当任务变多、变复杂时性能成为瓶颈。并行执行如果你的任务是处理一批独立的URL如抓取100个商品详情页可以使用asyncio和Playwright的异步API同时启动多个浏览器实例或标签页并行处理。注意管理好每个智能体的独立上下文Context避免状态互相干扰。无头模式与资源限制生产环境务必使用headlessTrue。可以通过browser.new_context参数限制不必要的资源加载如屏蔽图片、CSS甚至字体能显著提升页面加载速度。context browser.new_context( viewport{width: 1280, height: 720}, user_agent你的自定义UA, bypass_cspTrue, # 谨慎使用 java_script_enabledTrue, # 拦截不必要的请求以加速 extra_http_headers{...} )模型API的异步与批处理如果步骤很多可以考虑将多个步骤的决策请求批量发送给LLM API如果API支持减少网络往返延迟。构建一个稳定、高效的AI浏览器智能体是一个持续迭代的过程。它不是一个“写一次就完事”的脚本而是一个需要精心设计感知、决策、执行三个环节并不断加入异常处理、优化策略的“软件系统”。从简单的原型出发逐步解决遇到的具体问题你会发现它所能带来的自动化潜力是巨大的。无论是替代重复的日常操作还是构建复杂的数据流水线这套思路都提供了一个全新的、更智能的解决方案。
![[C++]内存管理：串顺序存储的内存回收](http://pic.xiahunao.cn/yaotu/[C++]内存管理：串顺序存储的内存回收)
