30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度最近在尝试将大模型与浏览器自动化结合实现智能网页操作时你是否也遇到过这样的困境精心设计的Agent逻辑清晰大模型回答也头头是道但一到实际执行环节就频频“翻车”——点错按钮、找不到输入框、甚至直接报错崩溃经过多个项目的实践踩坑我发现一个被许多人忽视的核心问题智能体Agent失败的瓶颈往往不在于大模型LLM的“大脑”不够聪明而在于其“眼睛”看不清楚。这里的“眼睛”指的就是浏览器自动化工具如 Selenium、Playwright对网页状态的感知与描述能力。本文将深入剖析这一痛点并提供一套从原理到实战的完整解决方案涵盖环境搭建、状态感知增强、容错设计及工程化最佳实践帮助你将浏览器Agent的稳定性提升一个量级。1. 核心问题为什么Agent的“眼睛”会失效在构建基于LLM的浏览器自动化Agent时典型的架构是LLM作为决策中心接收任务指令和当前网页的“描述”通常是一段HTML或简化后的文本然后输出下一步操作指令如点击某个元素、输入文本。问题就出在这个“网页描述”环节。1.1 传统方法的局限性最常见的做法是直接将整个页面的innerText或outerHTML扔给LLM。这种方法存在致命缺陷信息过载与噪声一个现代网页的完整HTML可能包含数万行代码充斥着样式、脚本、广告、隐藏元素等无关信息。这会让LLM难以聚焦关键交互元素。缺乏语义与结构纯文本的HTML丢失了视觉布局、元素层级、相对位置等对理解界面至关重要的信息。LLM无法“看到”哪个按钮更突出哪个输入框在表单里。动态内容无法捕捉对于由JavaScript实时渲染的内容、懒加载的图片、动画状态等一次性快照无法反映其动态变化。元素定位模糊LLM可能根据文本内容如“提交”生成指令但页面上可能有多个“提交”按钮导致操作对象错误。1.2 “眼睛”与“大脑”的失配LLM是一个强大的语义理解模型但它期望的输入是干净、结构化、富含语义的信息如同人类用自然语言描述的界面。而我们提供的却是低层次、嘈杂、非结构化的HTML源码。这种输入输出的不匹配是Agent失败的根本原因之一。2. 环境准备与工具选型在开始优化之前我们需要搭建一个可靠的实验环境。本文将使用Playwright作为浏览器自动化工具因其强大的API和更好的性能并结合OpenAI GPT-4o作为LLM决策引擎。你也可以替换为Selenium和其他的大模型API。2.1 基础环境操作系统Windows 10/11, macOS 或 Linux (Ubuntu 20.04)Python版本3.8 或更高版本本文示例使用 Python 3.9包管理工具pip2.2 核心依赖安装创建一个新的项目目录并初始化虚拟环境然后安装必要依赖# 创建项目目录并进入 mkdir browser-agent-enhancement cd browser-agent-enhancement # 创建并激活虚拟环境 (可选但推荐) python -m venv venv # Windows: venv\Scripts\activate # macOS/Linux: source venv/bin/activate # 安装核心库 pip install playwright openai python-dotenv # 安装Playwright浏览器内核 playwright install chromium2.3 项目结构建议的初始项目结构如下便于管理browser-agent-enhancement/ ├── .env # 存储API密钥等敏感信息 ├── requirements.txt # 依赖列表 ├── agent_core.py # Agent核心逻辑类 ├── enhanced_vision.py # 增强的“视觉”模块 ├── config.py # 配置文件 └── main.py # 主程序入口在.env文件中配置你的OpenAI API密钥OPENAI_API_KEYyour_openai_api_key_here3. 增强Agent的“视觉”能力原理与实现我们的目标是构建一个“增强视觉模块”它能为LLM提供更清晰、更结构化、更贴近人类感知的网页描述。3.1 策略一智能信息抽取与过滤不要给LLM整个页面而是抽取关键信息。我们可以根据交互元素的类型进行过滤。# enhanced_vision.py from playwright.sync_api import Page from typing import List, Dict, Any class EnhancedVision: def __init__(self, page: Page): self.page page def get_interactive_elements(self) - List[Dict[str, Any]]: 获取页面上所有可交互元素的精简信息 # 使用Playwright选择器获取关键元素 selectors [ a, button, input, textarea, select, [rolebutton], [contenteditabletrue], [onclick], [tabindex] ] elements_info [] for selector in selectors: elements self.page.query_selector_all(selector) for element in elements: # 过滤不可见元素 if not self.is_element_visible(element): continue info { tag: selector, text: (element.inner_text() or ).strip()[:100], # 截断长文本 placeholder: element.get_attribute(placeholder) or , type: element.get_attribute(type) or N/A, id: element.get_attribute(id) or , name: element.get_attribute(name) or , class: (element.get_attribute(class) or ).split()[0] or , # 取第一个类名 aria_label: element.get_attribute(aria-label) or , bounding_box: element.bounding_box() # 获取元素在视口中的位置和大小 } # 清理空值 info {k: v for k, v in info.items() if v} elements_info.append(info) return elements_info def is_element_visible(self, element) - bool: 简单判断元素是否可见非精确 try: box element.bounding_box() if not box: return False # 简单检查有宽高且在视口内这里简化处理 return box[width] 0 and box[height] 0 except: return False def get_page_semantic_description(self) - str: 生成给LLM的语义化页面描述 elements self.get_interactive_elements() description_parts [] # 按元素类型分组描述 buttons [e for e in elements if e[tag] in [button, [rolebutton]]] inputs [e for e in elements if e[tag] in [input, textarea, select]] links [e for e in elements if e[tag] a] if buttons: button_texts [f“{b.get(text) or b.get(aria_label) or 未标记按钮}” for b in buttons[:5]] # 限制数量 description_parts.append(f页面中有{len(buttons)}个按钮包括{, .join(button_texts)}。) if inputs: input_descs [] for inp in inputs[:5]: desc inp.get(placeholder) or inp.get(aria_label) or f{inp.get(type)}输入框 input_descs.append(desc) description_parts.append(f可输入区域有{len(inputs)}处例如{, .join(input_descs)}。) if links: link_texts [f“{l.get(text)}” for l in links[:5] if l.get(text)] if link_texts: description_parts.append(f页面包含链接如{, .join(link_texts)}。) # 获取页面标题和主要标题提供上下文 title self.page.title() h1_text self.page.query_selector(h1) main_heading h1_text.inner_text() if h1_text else context f当前页面标题是“{title}”。 if main_heading: context f 主要标题是“{main_heading}”。 full_description context .join(description_parts) if not elements: full_description 当前页面未发现明显的可交互元素。 return full_description3.2 策略二结合视觉与布局信息对于复杂界面仅凭文本和标签不足以定位。我们可以利用元素的视觉特征如颜色、大小、位置和其在DOM树中的层级关系来辅助描述。# 在 EnhancedVision 类中添加方法 def get_element_with_context(self, element_handle) - Dict[str, Any]: 获取单个元素的详细信息及其上下文父元素、兄弟元素文本 info { self: { tag: element_handle.evaluate(el el.tagName.toLowerCase()), text: (element_handle.inner_text() or ).strip()[:50], id: element_handle.get_attribute(id), classes: element_handle.get_attribute(class), aria_label: element_handle.get_attribute(aria-label), bounding_box: element_handle.bounding_box() }, parent: None, siblings_text: [] } # 获取父元素直接父级 parent element_handle.evaluate_handle(el el.parentElement) if parent: parent_text parent.evaluate(el el.innerText).strip()[:100] if parent_text and parent_text ! info[self][text]: info[parent] {text: parent_text} # 获取相邻兄弟元素的文本提供上下文 siblings element_handle.evaluate_handle( el { const sibs []; let prev el.previousElementSibling; for(let i0; i2 prev; i) { // 前两个兄弟 sibs.push(prev.innerText); prev prev.previousElementSibling; } let next el.nextElementSibling; for(let i0; i2 next; i) { // 后两个兄弟 sibs.push(next.innerText); next next.nextElementSibling; } return sibs.filter(t t.trim().length 0).slice(0,3); } ) if siblings: info[siblings_text] siblings.json_value() return info3.3 策略三动态等待与状态感知网页是动态的。Agent在操作后必须等待页面进入一个稳定状态再执行下一步。# enhanced_vision.py 继续添加 def wait_for_stable_state(self, timeout: int 10000, stability_threshold: int 2000): 等待页面达到稳定状态网络空闲、DOM变化停止。 这是一个简化实现实际项目可能需要更复杂的启发式方法。 import asyncio # Playwright 提供等待网络空闲的方法 self.page.wait_for_load_state(networkidle) # 额外等待一个短时间让可能的微任务或动画完成 self.page.wait_for_timeout(stability_threshold) print(页面状态已稳定。) def is_expected_state(self, expected_condition: str) - bool: 检查页面是否达到预期状态例如出现特定文本、URL变化。 这是一个框架可根据具体任务扩展。 if 登录成功 in expected_condition: # 检查是否有表示登录成功的元素如用户头像、欢迎语 user_indicator self.page.query_selector([class*user], [class*avatar], [class*welcome]) return user_indicator is not None elif 搜索结果 in expected_condition: # 检查是否出现结果列表或“结果”相关文本 result_text self.page.inner_text(body) return any(word in result_text.lower() for word in [result, found, 显示, 共]) # 默认检查URL或标题是否包含关键词 current_url self.page.url current_title self.page.title() return expected_condition in current_url or expected_condition in current_title4. 构建一个健壮的浏览器Agent完整实战案例现在我们将增强的视觉模块与LLM决策核心整合构建一个能完成“在GitHub搜索Playwright仓库并打开第一个结果”任务的Agent。4.1 定义Agent核心类# agent_core.py import openai import json import re from typing import Dict, Any, Optional from enhanced_vision import EnhancedVision from playwright.sync_api import Page class BrowserAgent: def __init__(self, page: Page, api_key: str): self.page page self.vision EnhancedVision(page) openai.api_key api_key # 定义Agent可执行的基础动作 self.action_space { click: self._act_click, type: self._act_type, scroll: self._act_scroll, goto: self._act_goto, wait: self._act_wait, extract: self._act_extract } def _act_click(self, params: Dict): 执行点击动作 selector params.get(selector) text params.get(text) if selector: self.page.click(selector) elif text: # 尝试通过文本定位元素 self.page.click(ftext{text}) else: raise ValueError(点击动作需要提供selector或text参数) print(f已点击{selector or text}) def _act_type(self, params: Dict): 执行输入动作 selector params.get(selector) text params.get(text) content params.get(content, ) if selector: self.page.fill(selector, content) elif text: self.page.fill(ftext{text}, content) else: # 如果没有指定元素尝试聚焦到第一个输入框 self.page.press(body, Tab) # 简化处理实际需更精确 self.page.keyboard.type(content) print(f已在 {selector or text or 焦点处} 输入{content}) def _act_scroll(self, params: Dict): direction params.get(direction, down) if direction down: self.page.evaluate(window.scrollBy(0, window.innerHeight * 0.8)) elif direction up: self.page.evaluate(window.scrollBy(0, -window.innerHeight * 0.8)) print(f已向{direction}滚动) def _act_goto(self, params: Dict): url params.get(url) if url: self.page.goto(url) print(f已导航至{url}) def _act_wait(self, params: Dict): time_ms params.get(time, 2000) self.page.wait_for_timeout(time_ms) print(f已等待 {time_ms} 毫秒) def _act_extract(self, params: Dict): # 提取信息这里简单返回页面标题 info {title: self.page.title(), url: self.page.url} print(f已提取信息{info}) return info def get_llm_instruction(self, task: str, page_description: str) - Optional[Dict]: 调用LLM根据任务和页面描述生成下一步动作指令 system_prompt 你是一个控制浏览器的智能助手。你的目标是理解用户任务和当前页面状态然后输出一个具体的、可执行的浏览器操作指令。 可用的操作类型有click点击、type输入、scroll滚动、goto跳转、wait等待、extract提取信息。 请以严格的JSON格式回复格式如下 { reasoning: 简要分析当前情况和下一步策略, action: 动作类型, params: { 参数名: 参数值 } // 参数取决于动作类型 } 例如要点击一个显示为“登录”的按钮可以输出 { reasoning: 当前页面有一个登录按钮需要点击它以进入登录流程。, action: click, params: { text: 登录 } } 请确保指令基于提供的页面描述且具体明确。如果任务已完成action可以是“extract”来获取结果信息或直接返回null。 user_prompt f 用户任务{task} 当前页面描述{page_description} 请输出下一步动作的JSON指令。如果任务在当前页面无法继续或已完成请说明原因并返回null。 try: response openai.ChatCompletion.create( modelgpt-4o, # 或 gpt-3.5-turbo messages[ {role: system, content: system_prompt}, {role: user, content: user_prompt} ], temperature0.2, # 低随机性保证指令稳定 max_tokens500 ) content response.choices[0].message.content.strip() # 尝试从响应中提取JSON json_match re.search(r\{.*\}, content, re.DOTALL) if json_match: return json.loads(json_match.group()) else: print(fLLM未返回有效JSON: {content}) return None except Exception as e: print(f调用LLM出错: {e}) return None def execute_task(self, task: str, max_steps: int 20): 执行给定任务循环观察-思考-行动直到任务完成或达到最大步数 print(f开始执行任务: {task}) step 0 while step max_steps: step 1 print(f\n--- 第 {step} 步 ---) # 1. 等待页面稳定 self.vision.wait_for_stable_state() # 2. 观察获取增强后的页面描述 page_desc self.vision.get_page_semantic_description() print(f页面观察: {page_desc[:200]}...) # 打印前200字符 # 3. 思考LLM生成指令 instruction self.get_llm_instruction(task, page_desc) if not instruction: print(LLM认为任务已完成或无法继续。) break print(f决策: {instruction[reasoning]}) print(f执行动作: {instruction[action]} with {instruction[params]}) # 4. 行动执行指令 action_func self.action_space.get(instruction[action]) if action_func: try: result action_func(instruction[params]) # 如果是提取信息打印结果 if instruction[action] extract: print(f任务结果: {result}) break except Exception as e: print(f执行动作 {instruction[action]} 时出错: {e}) # 出错后可以等待一下再继续或者尝试恢复策略 self.page.wait_for_timeout(3000) else: print(f未知动作: {instruction[action]}) # 简短暂停模拟人类操作间隔 self.page.wait_for_timeout(1000) if step max_steps: print(f达到最大步数 ({max_steps})任务可能未完成。)4.2 主程序执行GitHub搜索任务# main.py from playwright.sync_api import sync_playwright import os from dotenv import load_dotenv from agent_core import BrowserAgent load_dotenv() # 加载 .env 文件中的环境变量 def main(): # 1. 启动浏览器 with sync_playwright() as p: browser p.chromium.launch(headlessFalse) # 设为True可无头运行 context browser.new_context(viewport{width: 1280, height: 800}) page context.new_page() # 2. 初始化Agent api_key os.getenv(OPENAI_API_KEY) if not api_key: raise ValueError(请在 .env 文件中设置 OPENAI_API_KEY) agent BrowserAgent(page, api_key) # 3. 定义任务 task 打开GitHub官网github.com在搜索框中输入‘playwright’进行搜索然后从搜索结果中打开第一个仓库通常是第一个结果。 # 4. 执行任务 try: agent.execute_task(task, max_steps15) except Exception as e: print(f任务执行过程中出现异常: {e}) finally: # 保持浏览器打开供观察 input(按回车键关闭浏览器...) browser.close() if __name__ __main__: main()4.3 运行与结果分析运行python main.py你将看到浏览器自动打开导航到GitHub完成搜索并点击第一个结果。控制台会输出每一步的观察、决策和行动日志。这个示例演示了如何通过增强的视觉描述get_page_semantic_description为LLM提供更清晰的信息从而显著提高任务成功率。相比直接扔HTMLLLM现在接收到的信息是“当前页面标题是‘GitHub’。页面中有1个按钮包括“Sign in”。可输入区域有1处例如“Search GitHub”。页面包含链接如“Pricing”、“Contact Sales”。这使得LLM能更准确地定位搜索框并输入“playwright”。5. 常见问题与排查思路在实际部署中你可能会遇到以下问题问题现象可能原因排查与解决思路Agent点击了错误的元素1. 页面描述不够精确存在多个相似元素。2. LLM指令中的定位参数如text不唯一。1. 增强get_interactive_elements加入更独特的属性如>页面加载太慢Agent提前操作网络延迟或JavaScript渲染慢wait_for_load_state不够。1. 增加wait_for_timeout或使用page.wait_for_selector等待特定元素出现。2. 在wait_for_stable_state中实现更健壮的等待逻辑如检测DOM变化间隔。LLM返回的指令格式错误提示词Prompt不够严格或模型“幻觉”。1. 强化System Prompt要求严格JSON输出。2. 在代码中添加更健壮的JSON解析和错误处理如提供备选指令或重试。3. 使用LLM的Function Calling功能替代自由格式输出。动态内容如弹窗、验证码导致失败增强视觉模块未捕捉到突然出现的动态元素。1. 在每次行动前重新扫描页面更新描述。2. 专门编写处理常见弹窗如Cookie提示的检测与关闭逻辑。3. 对于验证码等复杂情况需要集成专门的识别服务或设计人工接管流程。任务陷入循环LLM对任务完成状态的判断不准。1. 在is_expected_state中定义更明确的任务完成条件如URL包含特定模式、出现成功文本。2. 设置步数限制和重复动作检测避免无限循环。6. 最佳实践与工程化建议要将浏览器Agent从实验原型变为可靠的生产力工具需要遵循以下工程实践6.1 视觉模块的优化分层描述为LLM提供不同粒度的描述。先给一个全局概述“这是一个搜索页面”再提供关键交互区域的细节“搜索框在顶部中央旁边有‘高级搜索’链接”。嵌入视觉特征对于难以用文本区分的元素如图标按钮可以计算元素的视觉指纹如颜色哈希、相对位置并将其作为描述的一部分。利用无障碍ARIA属性现代网页的无障碍属性aria-label,aria-role是极佳的描述来源优先使用。6.2 决策逻辑的强化引入记忆与状态管理让Agent记住它已经执行过的步骤和看到过的页面避免重复操作。可以维护一个简单的会话历史。实现子目标分解对于复杂任务如“预订航班”LLM应能将其分解为“选择出发地-选择目的地-选择日期-选择航班-填写乘客信息”等子任务并逐个击破。设计回退策略当首选动作失败时如点击未找到元素应有备选方案如尝试不同的选择器、滚动页面再查找、报告失败。6.3 系统可靠性与监控全面日志记录记录每一步的页面截图、LLM请求与响应、执行动作和结果。这是调试和优化Agent的宝贵数据。设置超时与健康检查为每个动作和等待设置超时防止单个步骤卡死整个流程。定义清晰的成功/失败标准任务开始前就明确如何判断任务成功完成或最终失败以便流程能正常终止。6.4 安全与伦理考量遵守robots.txt确保你的Agent尊重目标网站的爬虫协议。控制访问频率添加随机延迟避免对目标服务器造成负载压力模拟人类操作速度。明确使用范围仅将Agent用于合法、合规的自动化场景如内部系统测试、公开数据聚合在允许范围内、个人效率工具等。浏览器Agent的稳定性瓶颈确实常在“感知”层面而非“认知”层面。通过构建一个强大的“增强视觉模块”为LLM提供干净、结构化、富含语义的页面描述你可以大幅提升Agent的实操成功率。本文提供的从原理到代码的完整路径只是一个起点。在实际项目中你需要根据具体网站的特点、任务的复杂度和对稳定性的要求持续迭代视觉模块的描述策略、决策逻辑和异常处理机制。未来的优化方向可以包括集成计算机视觉CV模型直接“看”页面截图、使用更精细的DOM差分算法感知变化、为大模型定制微调以提高其对网页结构的理解能力。记住一个成功的智能体始于一双明亮的“眼睛”。 30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度
30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度最近在尝试将大模型与浏览器自动化结合实现智能网页操作时你是否也遇到过这样的困境精心设计的Agent逻辑清晰大模型回答也头头是道但一到实际执行环节就频频“翻车”——点错按钮、找不到输入框、甚至直接报错崩溃经过多个项目的实践踩坑我发现一个被许多人忽视的核心问题智能体Agent失败的瓶颈往往不在于大模型LLM的“大脑”不够聪明而在于其“眼睛”看不清楚。这里的“眼睛”指的就是浏览器自动化工具如 Selenium、Playwright对网页状态的感知与描述能力。本文将深入剖析这一痛点并提供一套从原理到实战的完整解决方案涵盖环境搭建、状态感知增强、容错设计及工程化最佳实践帮助你将浏览器Agent的稳定性提升一个量级。1. 核心问题为什么Agent的“眼睛”会失效在构建基于LLM的浏览器自动化Agent时典型的架构是LLM作为决策中心接收任务指令和当前网页的“描述”通常是一段HTML或简化后的文本然后输出下一步操作指令如点击某个元素、输入文本。问题就出在这个“网页描述”环节。1.1 传统方法的局限性最常见的做法是直接将整个页面的innerText或outerHTML扔给LLM。这种方法存在致命缺陷信息过载与噪声一个现代网页的完整HTML可能包含数万行代码充斥着样式、脚本、广告、隐藏元素等无关信息。这会让LLM难以聚焦关键交互元素。缺乏语义与结构纯文本的HTML丢失了视觉布局、元素层级、相对位置等对理解界面至关重要的信息。LLM无法“看到”哪个按钮更突出哪个输入框在表单里。动态内容无法捕捉对于由JavaScript实时渲染的内容、懒加载的图片、动画状态等一次性快照无法反映其动态变化。元素定位模糊LLM可能根据文本内容如“提交”生成指令但页面上可能有多个“提交”按钮导致操作对象错误。1.2 “眼睛”与“大脑”的失配LLM是一个强大的语义理解模型但它期望的输入是干净、结构化、富含语义的信息如同人类用自然语言描述的界面。而我们提供的却是低层次、嘈杂、非结构化的HTML源码。这种输入输出的不匹配是Agent失败的根本原因之一。2. 环境准备与工具选型在开始优化之前我们需要搭建一个可靠的实验环境。本文将使用Playwright作为浏览器自动化工具因其强大的API和更好的性能并结合OpenAI GPT-4o作为LLM决策引擎。你也可以替换为Selenium和其他的大模型API。2.1 基础环境操作系统Windows 10/11, macOS 或 Linux (Ubuntu 20.04)Python版本3.8 或更高版本本文示例使用 Python 3.9包管理工具pip2.2 核心依赖安装创建一个新的项目目录并初始化虚拟环境然后安装必要依赖# 创建项目目录并进入 mkdir browser-agent-enhancement cd browser-agent-enhancement # 创建并激活虚拟环境 (可选但推荐) python -m venv venv # Windows: venv\Scripts\activate # macOS/Linux: source venv/bin/activate # 安装核心库 pip install playwright openai python-dotenv # 安装Playwright浏览器内核 playwright install chromium2.3 项目结构建议的初始项目结构如下便于管理browser-agent-enhancement/ ├── .env # 存储API密钥等敏感信息 ├── requirements.txt # 依赖列表 ├── agent_core.py # Agent核心逻辑类 ├── enhanced_vision.py # 增强的“视觉”模块 ├── config.py # 配置文件 └── main.py # 主程序入口在.env文件中配置你的OpenAI API密钥OPENAI_API_KEYyour_openai_api_key_here3. 增强Agent的“视觉”能力原理与实现我们的目标是构建一个“增强视觉模块”它能为LLM提供更清晰、更结构化、更贴近人类感知的网页描述。3.1 策略一智能信息抽取与过滤不要给LLM整个页面而是抽取关键信息。我们可以根据交互元素的类型进行过滤。# enhanced_vision.py from playwright.sync_api import Page from typing import List, Dict, Any class EnhancedVision: def __init__(self, page: Page): self.page page def get_interactive_elements(self) - List[Dict[str, Any]]: 获取页面上所有可交互元素的精简信息 # 使用Playwright选择器获取关键元素 selectors [ a, button, input, textarea, select, [rolebutton], [contenteditabletrue], [onclick], [tabindex] ] elements_info [] for selector in selectors: elements self.page.query_selector_all(selector) for element in elements: # 过滤不可见元素 if not self.is_element_visible(element): continue info { tag: selector, text: (element.inner_text() or ).strip()[:100], # 截断长文本 placeholder: element.get_attribute(placeholder) or , type: element.get_attribute(type) or N/A, id: element.get_attribute(id) or , name: element.get_attribute(name) or , class: (element.get_attribute(class) or ).split()[0] or , # 取第一个类名 aria_label: element.get_attribute(aria-label) or , bounding_box: element.bounding_box() # 获取元素在视口中的位置和大小 } # 清理空值 info {k: v for k, v in info.items() if v} elements_info.append(info) return elements_info def is_element_visible(self, element) - bool: 简单判断元素是否可见非精确 try: box element.bounding_box() if not box: return False # 简单检查有宽高且在视口内这里简化处理 return box[width] 0 and box[height] 0 except: return False def get_page_semantic_description(self) - str: 生成给LLM的语义化页面描述 elements self.get_interactive_elements() description_parts [] # 按元素类型分组描述 buttons [e for e in elements if e[tag] in [button, [rolebutton]]] inputs [e for e in elements if e[tag] in [input, textarea, select]] links [e for e in elements if e[tag] a] if buttons: button_texts [f“{b.get(text) or b.get(aria_label) or 未标记按钮}” for b in buttons[:5]] # 限制数量 description_parts.append(f页面中有{len(buttons)}个按钮包括{, .join(button_texts)}。) if inputs: input_descs [] for inp in inputs[:5]: desc inp.get(placeholder) or inp.get(aria_label) or f{inp.get(type)}输入框 input_descs.append(desc) description_parts.append(f可输入区域有{len(inputs)}处例如{, .join(input_descs)}。) if links: link_texts [f“{l.get(text)}” for l in links[:5] if l.get(text)] if link_texts: description_parts.append(f页面包含链接如{, .join(link_texts)}。) # 获取页面标题和主要标题提供上下文 title self.page.title() h1_text self.page.query_selector(h1) main_heading h1_text.inner_text() if h1_text else context f当前页面标题是“{title}”。 if main_heading: context f 主要标题是“{main_heading}”。 full_description context .join(description_parts) if not elements: full_description 当前页面未发现明显的可交互元素。 return full_description3.2 策略二结合视觉与布局信息对于复杂界面仅凭文本和标签不足以定位。我们可以利用元素的视觉特征如颜色、大小、位置和其在DOM树中的层级关系来辅助描述。# 在 EnhancedVision 类中添加方法 def get_element_with_context(self, element_handle) - Dict[str, Any]: 获取单个元素的详细信息及其上下文父元素、兄弟元素文本 info { self: { tag: element_handle.evaluate(el el.tagName.toLowerCase()), text: (element_handle.inner_text() or ).strip()[:50], id: element_handle.get_attribute(id), classes: element_handle.get_attribute(class), aria_label: element_handle.get_attribute(aria-label), bounding_box: element_handle.bounding_box() }, parent: None, siblings_text: [] } # 获取父元素直接父级 parent element_handle.evaluate_handle(el el.parentElement) if parent: parent_text parent.evaluate(el el.innerText).strip()[:100] if parent_text and parent_text ! info[self][text]: info[parent] {text: parent_text} # 获取相邻兄弟元素的文本提供上下文 siblings element_handle.evaluate_handle( el { const sibs []; let prev el.previousElementSibling; for(let i0; i2 prev; i) { // 前两个兄弟 sibs.push(prev.innerText); prev prev.previousElementSibling; } let next el.nextElementSibling; for(let i0; i2 next; i) { // 后两个兄弟 sibs.push(next.innerText); next next.nextElementSibling; } return sibs.filter(t t.trim().length 0).slice(0,3); } ) if siblings: info[siblings_text] siblings.json_value() return info3.3 策略三动态等待与状态感知网页是动态的。Agent在操作后必须等待页面进入一个稳定状态再执行下一步。# enhanced_vision.py 继续添加 def wait_for_stable_state(self, timeout: int 10000, stability_threshold: int 2000): 等待页面达到稳定状态网络空闲、DOM变化停止。 这是一个简化实现实际项目可能需要更复杂的启发式方法。 import asyncio # Playwright 提供等待网络空闲的方法 self.page.wait_for_load_state(networkidle) # 额外等待一个短时间让可能的微任务或动画完成 self.page.wait_for_timeout(stability_threshold) print(页面状态已稳定。) def is_expected_state(self, expected_condition: str) - bool: 检查页面是否达到预期状态例如出现特定文本、URL变化。 这是一个框架可根据具体任务扩展。 if 登录成功 in expected_condition: # 检查是否有表示登录成功的元素如用户头像、欢迎语 user_indicator self.page.query_selector([class*user], [class*avatar], [class*welcome]) return user_indicator is not None elif 搜索结果 in expected_condition: # 检查是否出现结果列表或“结果”相关文本 result_text self.page.inner_text(body) return any(word in result_text.lower() for word in [result, found, 显示, 共]) # 默认检查URL或标题是否包含关键词 current_url self.page.url current_title self.page.title() return expected_condition in current_url or expected_condition in current_title4. 构建一个健壮的浏览器Agent完整实战案例现在我们将增强的视觉模块与LLM决策核心整合构建一个能完成“在GitHub搜索Playwright仓库并打开第一个结果”任务的Agent。4.1 定义Agent核心类# agent_core.py import openai import json import re from typing import Dict, Any, Optional from enhanced_vision import EnhancedVision from playwright.sync_api import Page class BrowserAgent: def __init__(self, page: Page, api_key: str): self.page page self.vision EnhancedVision(page) openai.api_key api_key # 定义Agent可执行的基础动作 self.action_space { click: self._act_click, type: self._act_type, scroll: self._act_scroll, goto: self._act_goto, wait: self._act_wait, extract: self._act_extract } def _act_click(self, params: Dict): 执行点击动作 selector params.get(selector) text params.get(text) if selector: self.page.click(selector) elif text: # 尝试通过文本定位元素 self.page.click(ftext{text}) else: raise ValueError(点击动作需要提供selector或text参数) print(f已点击{selector or text}) def _act_type(self, params: Dict): 执行输入动作 selector params.get(selector) text params.get(text) content params.get(content, ) if selector: self.page.fill(selector, content) elif text: self.page.fill(ftext{text}, content) else: # 如果没有指定元素尝试聚焦到第一个输入框 self.page.press(body, Tab) # 简化处理实际需更精确 self.page.keyboard.type(content) print(f已在 {selector or text or 焦点处} 输入{content}) def _act_scroll(self, params: Dict): direction params.get(direction, down) if direction down: self.page.evaluate(window.scrollBy(0, window.innerHeight * 0.8)) elif direction up: self.page.evaluate(window.scrollBy(0, -window.innerHeight * 0.8)) print(f已向{direction}滚动) def _act_goto(self, params: Dict): url params.get(url) if url: self.page.goto(url) print(f已导航至{url}) def _act_wait(self, params: Dict): time_ms params.get(time, 2000) self.page.wait_for_timeout(time_ms) print(f已等待 {time_ms} 毫秒) def _act_extract(self, params: Dict): # 提取信息这里简单返回页面标题 info {title: self.page.title(), url: self.page.url} print(f已提取信息{info}) return info def get_llm_instruction(self, task: str, page_description: str) - Optional[Dict]: 调用LLM根据任务和页面描述生成下一步动作指令 system_prompt 你是一个控制浏览器的智能助手。你的目标是理解用户任务和当前页面状态然后输出一个具体的、可执行的浏览器操作指令。 可用的操作类型有click点击、type输入、scroll滚动、goto跳转、wait等待、extract提取信息。 请以严格的JSON格式回复格式如下 { reasoning: 简要分析当前情况和下一步策略, action: 动作类型, params: { 参数名: 参数值 } // 参数取决于动作类型 } 例如要点击一个显示为“登录”的按钮可以输出 { reasoning: 当前页面有一个登录按钮需要点击它以进入登录流程。, action: click, params: { text: 登录 } } 请确保指令基于提供的页面描述且具体明确。如果任务已完成action可以是“extract”来获取结果信息或直接返回null。 user_prompt f 用户任务{task} 当前页面描述{page_description} 请输出下一步动作的JSON指令。如果任务在当前页面无法继续或已完成请说明原因并返回null。 try: response openai.ChatCompletion.create( modelgpt-4o, # 或 gpt-3.5-turbo messages[ {role: system, content: system_prompt}, {role: user, content: user_prompt} ], temperature0.2, # 低随机性保证指令稳定 max_tokens500 ) content response.choices[0].message.content.strip() # 尝试从响应中提取JSON json_match re.search(r\{.*\}, content, re.DOTALL) if json_match: return json.loads(json_match.group()) else: print(fLLM未返回有效JSON: {content}) return None except Exception as e: print(f调用LLM出错: {e}) return None def execute_task(self, task: str, max_steps: int 20): 执行给定任务循环观察-思考-行动直到任务完成或达到最大步数 print(f开始执行任务: {task}) step 0 while step max_steps: step 1 print(f\n--- 第 {step} 步 ---) # 1. 等待页面稳定 self.vision.wait_for_stable_state() # 2. 观察获取增强后的页面描述 page_desc self.vision.get_page_semantic_description() print(f页面观察: {page_desc[:200]}...) # 打印前200字符 # 3. 思考LLM生成指令 instruction self.get_llm_instruction(task, page_desc) if not instruction: print(LLM认为任务已完成或无法继续。) break print(f决策: {instruction[reasoning]}) print(f执行动作: {instruction[action]} with {instruction[params]}) # 4. 行动执行指令 action_func self.action_space.get(instruction[action]) if action_func: try: result action_func(instruction[params]) # 如果是提取信息打印结果 if instruction[action] extract: print(f任务结果: {result}) break except Exception as e: print(f执行动作 {instruction[action]} 时出错: {e}) # 出错后可以等待一下再继续或者尝试恢复策略 self.page.wait_for_timeout(3000) else: print(f未知动作: {instruction[action]}) # 简短暂停模拟人类操作间隔 self.page.wait_for_timeout(1000) if step max_steps: print(f达到最大步数 ({max_steps})任务可能未完成。)4.2 主程序执行GitHub搜索任务# main.py from playwright.sync_api import sync_playwright import os from dotenv import load_dotenv from agent_core import BrowserAgent load_dotenv() # 加载 .env 文件中的环境变量 def main(): # 1. 启动浏览器 with sync_playwright() as p: browser p.chromium.launch(headlessFalse) # 设为True可无头运行 context browser.new_context(viewport{width: 1280, height: 800}) page context.new_page() # 2. 初始化Agent api_key os.getenv(OPENAI_API_KEY) if not api_key: raise ValueError(请在 .env 文件中设置 OPENAI_API_KEY) agent BrowserAgent(page, api_key) # 3. 定义任务 task 打开GitHub官网github.com在搜索框中输入‘playwright’进行搜索然后从搜索结果中打开第一个仓库通常是第一个结果。 # 4. 执行任务 try: agent.execute_task(task, max_steps15) except Exception as e: print(f任务执行过程中出现异常: {e}) finally: # 保持浏览器打开供观察 input(按回车键关闭浏览器...) browser.close() if __name__ __main__: main()4.3 运行与结果分析运行python main.py你将看到浏览器自动打开导航到GitHub完成搜索并点击第一个结果。控制台会输出每一步的观察、决策和行动日志。这个示例演示了如何通过增强的视觉描述get_page_semantic_description为LLM提供更清晰的信息从而显著提高任务成功率。相比直接扔HTMLLLM现在接收到的信息是“当前页面标题是‘GitHub’。页面中有1个按钮包括“Sign in”。可输入区域有1处例如“Search GitHub”。页面包含链接如“Pricing”、“Contact Sales”。这使得LLM能更准确地定位搜索框并输入“playwright”。5. 常见问题与排查思路在实际部署中你可能会遇到以下问题问题现象可能原因排查与解决思路Agent点击了错误的元素1. 页面描述不够精确存在多个相似元素。2. LLM指令中的定位参数如text不唯一。1. 增强get_interactive_elements加入更独特的属性如>页面加载太慢Agent提前操作网络延迟或JavaScript渲染慢wait_for_load_state不够。1. 增加wait_for_timeout或使用page.wait_for_selector等待特定元素出现。2. 在wait_for_stable_state中实现更健壮的等待逻辑如检测DOM变化间隔。LLM返回的指令格式错误提示词Prompt不够严格或模型“幻觉”。1. 强化System Prompt要求严格JSON输出。2. 在代码中添加更健壮的JSON解析和错误处理如提供备选指令或重试。3. 使用LLM的Function Calling功能替代自由格式输出。动态内容如弹窗、验证码导致失败增强视觉模块未捕捉到突然出现的动态元素。1. 在每次行动前重新扫描页面更新描述。2. 专门编写处理常见弹窗如Cookie提示的检测与关闭逻辑。3. 对于验证码等复杂情况需要集成专门的识别服务或设计人工接管流程。任务陷入循环LLM对任务完成状态的判断不准。1. 在is_expected_state中定义更明确的任务完成条件如URL包含特定模式、出现成功文本。2. 设置步数限制和重复动作检测避免无限循环。6. 最佳实践与工程化建议要将浏览器Agent从实验原型变为可靠的生产力工具需要遵循以下工程实践6.1 视觉模块的优化分层描述为LLM提供不同粒度的描述。先给一个全局概述“这是一个搜索页面”再提供关键交互区域的细节“搜索框在顶部中央旁边有‘高级搜索’链接”。嵌入视觉特征对于难以用文本区分的元素如图标按钮可以计算元素的视觉指纹如颜色哈希、相对位置并将其作为描述的一部分。利用无障碍ARIA属性现代网页的无障碍属性aria-label,aria-role是极佳的描述来源优先使用。6.2 决策逻辑的强化引入记忆与状态管理让Agent记住它已经执行过的步骤和看到过的页面避免重复操作。可以维护一个简单的会话历史。实现子目标分解对于复杂任务如“预订航班”LLM应能将其分解为“选择出发地-选择目的地-选择日期-选择航班-填写乘客信息”等子任务并逐个击破。设计回退策略当首选动作失败时如点击未找到元素应有备选方案如尝试不同的选择器、滚动页面再查找、报告失败。6.3 系统可靠性与监控全面日志记录记录每一步的页面截图、LLM请求与响应、执行动作和结果。这是调试和优化Agent的宝贵数据。设置超时与健康检查为每个动作和等待设置超时防止单个步骤卡死整个流程。定义清晰的成功/失败标准任务开始前就明确如何判断任务成功完成或最终失败以便流程能正常终止。6.4 安全与伦理考量遵守robots.txt确保你的Agent尊重目标网站的爬虫协议。控制访问频率添加随机延迟避免对目标服务器造成负载压力模拟人类操作速度。明确使用范围仅将Agent用于合法、合规的自动化场景如内部系统测试、公开数据聚合在允许范围内、个人效率工具等。浏览器Agent的稳定性瓶颈确实常在“感知”层面而非“认知”层面。通过构建一个强大的“增强视觉模块”为LLM提供干净、结构化、富含语义的页面描述你可以大幅提升Agent的实操成功率。本文提供的从原理到代码的完整路径只是一个起点。在实际项目中你需要根据具体网站的特点、任务的复杂度和对稳定性的要求持续迭代视觉模块的描述策略、决策逻辑和异常处理机制。未来的优化方向可以包括集成计算机视觉CV模型直接“看”页面截图、使用更精细的DOM差分算法感知变化、为大模型定制微调以提高其对网页结构的理解能力。记住一个成功的智能体始于一双明亮的“眼睛”。 30款热门AI模型一站整合DeepSeek/GLM/Claude 随心用限时 5 折。 点击领海量免费额度
![[C++]内存管理：串顺序存储的内存回收](http://pic.xiahunao.cn/yaotu/[C++]内存管理：串顺序存储的内存回收)
