AI Agent盲视问题解析：从感知缺失到网页自动化实战-开发者社区

在实际 AI 应用开发中，我们常常会遇到一个棘手的问题：模型看似理解了任务，但在执行具体操作时，却表现得像被“蒙住了眼睛”（blindfolded），无法有效感知或利用环境中的关键信息。这种现象在基于大型语言模型的智能体（Agent）应用中尤为常见。Agent 被设计为能够自主规划、调用工具并完成任务，但如果其感知能力存在缺陷，那么再强大的规划和推理能力也无法落地。

本文将深入探讨 Agent 为何会陷入“盲视”状态，并结合 Poolside AI 的 Johan Lajili 所提及的挑战，从问题根源、技术实现到解决方案进行系统性分析。我们将通过一个具体的网页信息获取案例，展示如何通过增强 Agent 的感知能力，使其从“盲视”变为“明察”，从而可靠地完成自动化任务。无论你是刚开始接触 AI Agent 的开发人员，还是希望优化现有智能体系统的工程师，都能从中获得可复现的实践思路。

1. 理解 Agent “盲视”问题的根源

Agent 的“盲视”并非指其完全无法接收信息，而是指其无法准确、可靠地理解并利用所处环境（如网页、文档、应用程序界面）中的结构化或非结构化信息来完成特定任务。这种能力的缺失直接导致任务失败。

1.1 什么是 Agent 的感知能力？

感知能力是 Agent 理解其操作环境的关键。对于一个网页自动化 Agent 来说，感知能力意味着：

识别界面元素：准确找到按钮、输入框、链接、下拉菜单等交互控件。
提取文本信息：从复杂的页面布局中读取标题、段落、列表、表格等文本内容。
理解元素关系：判断哪些元素是相关的（如表单的标签和输入框），以及它们在任务流中的逻辑顺序。

没有良好的感知能力，Agent 发出的指令（如“点击登录按钮”）就如同对着空气挥舞，因为 Agent 根本无法确定“登录按钮”在屏幕的哪个位置，或者当前页面上是否存在这个按钮。

1.2 导致“盲视”的常见技术原因

“盲视”问题通常源于以下几个技术环节的不足：

环境状态获取不完整：Agent 依赖环境提供的状态信息进行决策。如果状态信息是简化的、抽象的或不完整的（例如，只提供页面 URL 而不提供 DOM 结构），Agent 就无法做出准确判断。
工具调用与环境反馈脱节：Agent 调用工具（如“点击元素”）后，未能有效获取工具执行后的环境变化反馈。例如，点击按钮后页面发生了跳转或弹出了新窗口，但 Agent 没有接收到新页面的状态，导致后续操作仍在旧页面上进行。
多模态理解能力缺失：许多环境信息是视觉化的（如图标、图表、验证码）。纯文本模型若无法处理图像信息，就会对这些视觉线索“视而不见”。
动态内容处理乏力：现代 Web 应用大量使用 JavaScript 动态加载内容。如果 Agent 的感知机制基于静态 HTML 快照，它将无法捕获那些需要交互后才出现的信息。

1.3 “盲视”问题的典型表现

在实战中，Agent 的“盲视”会表现为以下具体现象：

操作失败：反复尝试点击一个不存在的元素，或向一个不可输入的元素发送文本。
逻辑混乱：在需要先输入用户名再输入密码的流程中，试图先操作密码框。
循环卡死：无法识别任务完成的标志，在已经成功的页面上继续执行无效操作。
信息提取错误：从页面中抓取了无关的文本或数字，而遗漏了关键数据。

理解这些根源和表现，是设计解决方案的第一步。接下来，我们将通过一个具体的环境搭建和案例实现，来演示如何为 Agent “解开蒙眼布”。

2. 构建可感知的 Agent 测试环境

为了具体地呈现和解决“盲视”问题，我们需要一个可控制、可复现的测试环境。我们将搭建一个简单的 Web 应用作为 Agent 的操作对象，并配置一个基础的 Agent 框架。

2.1 测试目标：网页信息获取任务

我们设计一个经典任务：让 Agent 自动访问一个图书搜索页面，查找指定书籍，并返回其价格和库存状态。这个任务看似简单，但涵盖了导航、输入、交互、信息提取等多个环节，足以暴露感知能力的短板。

首先，我们创建一个模拟的图书搜索网页book_search.html：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>BookStore Search</title> <style> .hidden { display: none; } .book-item { margin: 10px; padding: 10px; border: 1px solid #ccc; } </style> </head> <body> <h1>Welcome to BookStore</h1> <input type="text" id="searchBox" placeholder="Enter book title..."> <button onclick="performSearch()">Search</button> <div id="loadingMessage" class="hidden">Searching, please wait...</div> <div id="results"></div> <script> function performSearch() { const searchTerm = document.getElementById('searchBox').value; const resultsDiv = document.getElementById('results'); const loadingMsg = document.getElementById('loadingMessage'); // 模拟网络延迟 loadingMsg.classList.remove('hidden'); resultsDiv.innerHTML = ''; setTimeout(() => { loadingMsg.classList.add('hidden'); if (searchTerm.toLowerCase().includes('python')) { resultsDiv.innerHTML = ` <div class="book-item"> <h3>Fluent Python</h3> <p>Author: Luciano Ramalho</p> <p>python -m venv agent_env source agent_env/bin/activate # Windows: agent_env\Scripts\activate pip install langchain-openai langchain-community selenium pip install webdriver-manager # 用于自动管理浏览器驱动

关键依赖说明：

langchain-openai: 提供与 OpenAI 模型（如 GPT-4）的集成。
selenium: 用于自动化浏览器操作，是 Agent 的“眼睛”和“手”。
webdriver-manager: 自动下载和匹配 Chrome 浏览器驱动，避免手动配置的麻烦。

2.3 构建感知工具：Selenium 网页操作工具包

Agent 通过工具（Tools）与环境交互。我们需要创建一组专门的 Selenium 工具，让 Agent 能够“看到”和“操作”网页。

创建一个名为selenium_tools.py的文件：

from selenium import webdriver from selenium.webdriver.common.by import By from selenium.webdriver.support.ui import WebDriverWait from selenium.webdriver.support import expected_conditions as EC from selenium.common.exceptions import TimeoutException, NoSuchElementException import base64 class SeleniumWebAgent: """一个为 Agent 提供网页感知和操作能力的类""" def __init__(self): self.driver = None def start_browser(self, headless=False): """启动浏览器实例""" from selenium.webdriver.chrome.options import Options from webdriver_manager.chrome import ChromeDriverManager from selenium.webdriver.chrome.service import Service chrome_options = Options() if headless: chrome_options.add_argument("--headless") chrome_options.add_argument("--no-sandbox") chrome_options.add_argument("--disable-dev-shm-usage") service = Service(ChromeDriverManager().install()) self.driver = webdriver.Chrome(service=service, options=chrome_options) return "Browser started successfully." def navigate_to_url(self, url: str) -> str: """导航到指定URL""" if not self.driver: return "Error: Browser not started. Call start_browser first." self.driver.get(url) WebDriverWait(self.driver, 10).until(EC.presence_of_element_located((By.TAG_NAME, "body"))) return f"Navigated to {url}. Current page title: '{self.driver.title}'" def get_page_description(self) -> str: """获取当前页面的文本描述，这是 Agent 感知的核心""" if not self.driver: return "Error: Browser not started." try: # 获取页面主要文本内容 body = self.driver.find_element(By.TAG_NAME, "body") visible_text = body.text.strip() # 获取所有交互元素的标识（id, name, placeholder） input_elements = self.driver.find_elements(By.CSS_SELECTOR, "input, button, a") element_descriptions = [] for elem in input_elements: desc = [] if elem.get_attribute("id"): desc.append(f"id='{elem.get_attribute('id')}'") if elem.get_attribute("placeholder"): desc.append(f"placeholder='{elem.get_attribute('placeholder')}'") if elem.tag_name == "button" and elem.text: desc.append(f"text='{elem.text.strip()}'") if desc: element_descriptions.append(f"<{elem.tag_name}> with {' and '.join(desc)}") description = f"PAGE TEXT: {visible_text}\n\nINTERACTABLE ELEMENTS:\n" + "\n".join(element_descriptions) return description except Exception as e: return f"Error getting page description: {str(e)}" def input_text(self, element_identifier: str, text: str) -> str: """向指定元素输入文本""" if not self.driver: return "Error: Browser not started." try: # 尝试通过多种方式定位元素 element = self._find_element(element_identifier) element.clear() element.send_keys(text) return f"Entered text '{text}' into element identified by '{element_identifier}'." except Exception as e: return f"Error inputting text: {str(e)}" def click_element(self, element_identifier: str) -> str: """点击指定元素""" if not self.driver: return "Error: Browser not started." try: element = self._find_element(element_identifier) element.click() # 点击后等待页面可能的变化 WebDriverWait(self.driver, 5).until(EC.staleness_of(element)) return f"Clicked element identified by '{element_identifier}'. Page may have changed." except TimeoutException: # 元素没有变旧（页面没有跳转），是正常情况 return f"Clicked element identified by '{element_identifier}'. Page state updated." except Exception as e: return f"Error clicking element: {str(e)}" def _find_element(self, identifier: str): """辅助方法：通过多种策略定位元素""" strategies = [ (By.ID, identifier), (By.NAME, identifier), (By.CSS_SELECTOR, identifier), (By.XPATH, identifier), ] for by, value in strategies: try: element = self.driver.find_element(by, value) if element.is_displayed(): return element except NoSuchElementException: continue raise NoSuchElementException(f"Could not find element with identifier: {identifier}") def close_browser(self): """关闭浏览器""" if self.driver: self.driver.quit() self.driver = None

这个SeleniumWebAgent类封装了核心的感知（get_page_description）和操作（input_text,click_element）功能。get_page_description方法尤为重要，它提取页面的可见文本和所有可交互元素的描述，形成一段丰富的上下文，供 LLM 分析决策。

3. 实现从“盲视”到“明察”的 Agent

有了强大的感知工具，我们现在可以组装一个能够真正“看见”网页的 Agent。

3.1 组装 Agent 并定义工具集

创建一个main.py文件，设置 LangChain Agent：

import os from langchain.agents import AgentExecutor, create_tool_calling_agent from langchain_openai import ChatOpenAI from langchain_core.prompts import ChatPromptTemplate from langchain_core.messages import SystemMessage from selenium_tools import SeleniumWebAgent # 1. 初始化 OpenAI 模型和网页工具 llm = ChatOpenAI(model="gpt-4o", temperature=0) web_agent = SeleniumWebAgent() # 2. 将 SeleniumWebAgent 的方法转化为 LangChain Tools from langchain.tools import Tool tools = [ Tool( name="start_browser", func=web_agent.start_browser, description="Useful when you need to start a web browser. Accepts a boolean 'headless' argument (default False) to run without a visible window." ), Tool( name="navigate_to_url", func=web_agent.navigate_to_url, description="Useful when you need to go to a specific web page. Requires a URL string as input." ), Tool( name="get_page_description", func=web_agent.get_page_description, description="CRITICAL: Use this to understand what is on the current web page. It returns all visible text and a list of clickable/typeable elements. Always call this after navigating or clicking to see the new state of the page." ), Tool( name="input_text", func=web_agent.input_text, description="Useful when you need to type into an input field on the page. Requires two arguments: 'element_identifier' (like an id, name, or CSS selector) and the 'text' to type." ), Tool( name="click_element", func=web_agent.click_element, description="Useful when you need to click a button, link, or other element on the page. Requires an 'element_identifier' (like an id, name, or CSS selector)." ), ] # 3. 构建系统提示词，指导 Agent 的行为模式 system_message = SystemMessage(content="""You are a helpful web assistant that can browse the internet. Your goal is to complete tasks on websites by carefully observing the page and taking the correct actions. IMPORTANT GUIDELINES: 1. You are BLINDFOLDED unless you call `get_page_description`. ALWAYS call it after: - Starting the browser - Navigating to a new URL - Clicking on something - Any time you are unsure what is on the page 2. Analyze the page description thoroughly before deciding what to do next. 3. When describing what you see, be precise about the elements available (their identifiers, labels, etc.). 4. If an action doesn't seem to work, stop and reassess by calling `get_page_description` again. 5. When the task is complete, summarize what you found.""") prompt = ChatPromptTemplate.from_messages([ system_message, ("placeholder", "{chat_history}"), ("human", "{input}"), ("placeholder", "{agent_scratchpad}"), ]) # 4. 创建并执行 Agent agent = create_tool_calling_agent(llm, tools, prompt) agent_executor = AgentExecutor(agent=agent, tools=tools, verbose=True) # 5. 运行任务 if __name__ == "__main__": # 启动本地 HTTP 服务器来托管我们的测试页面（可选，也可直接用 file:// 路径） import http.server import socketserver import threading PORT = 8000 handler = http.server.SimpleHTTPRequestHandler with socketserver.TCPServer(("", PORT), handler) as httpd: print(f"Serving at port {PORT}") thread = threading.Thread(target=httpd.serve_forever) thread.daemon = True thread.start() test_url = f"http://localhost:{PORT}/book_search.html" task = f"Please start the browser, go to {test_url}, search for the book 'Fluent Python', and tell me its price and stock status." try: result = agent_executor.invoke({"input": task}) print("\n=== TASK RESULT ===") print(result["output"]) except Exception as e: print(f"An error occurred: {e}") finally: web_agent.close_browser()

3.2 关键配置与原理剖析

1. 系统提示词（System Prompt）的设计：提示词中明确强调了“蒙眼”的隐喻（“You are BLINDFOLDED unless you callget_page_description”），这强制 Agent 在每次环境变化后都必须主动调用感知工具。这是解决“盲视”问题的核心指令。

2. 工具描述（Tool Description）的精确性：get_page_description的工具描述中使用了 “CRITICAL” 和 “Always call this after...” 等强调性语言，引导模型在正确的时机使用它。

3. 感知信息的结构化：get_page_description返回的信息被分为 “PAGE TEXT” 和 “INTERACTABLE ELEMENTS” 两部分。这种结构化的描述比原始的 HTML 或整屏截图更易于 LLM 理解和推理。

3.3 运行验证与预期输出

运行python main.py。在详细模式（verbose=True）下，你将看到 Agent 的完整思考过程：

启动浏览器：调用start_browser。
导航到页面：调用navigate_to_url，获得页面标题。
首次感知：关键步骤。调用get_page_description，获取页面初始状态。LLM 会看到：“PAGE TEXT: Welcome to BookStore... INTERACTABLE ELEMENTS: with placeholder='Enter book title...',
规划操作：LLM 分析描述后，决定在输入框（id='searchBox'）中输入“Fluent Python”。
执行输入：调用input_text。
执行点击：调用click_element点击搜索按钮。
再次感知：关键步骤。点击后，LLM 再次调用get_page_description来查看搜索结果。这次它会看到包含“Fluent Python”、“Price: $39.99”、“Stock: In Stock”的新文本。
任务完成：LLM 整合信息，输出最终答案。

成功运行的输出示例：

=== TASK RESULT === I have successfully completed the task. I started the browser, navigated to the book search page, searched for "Fluent Python", and found the following details: - Book Title: Fluent Python - Price: $39.99 - Stock Status: In Stock

这个流程展示了 Agent 如何通过反复的“感知-决策-行动”循环，逐步完成任务。每次行动后都进行感知，确保了 Agent 始终基于最新的环境状态进行决策，从而避免了“盲视”。

4. 常见“盲视”问题排查与修复策略

即使有了上述框架，在实际应用中仍会遇到各种问题。以下是典型的排查清单。

4.1 元素定位失败

问题现象	可能原因	检查与解决方式
`NoSuchElementException`错误	1. 元素标识符（id/selector）错误。 2. 页面尚未加载完成。 3. 元素在 iframe 内。 4. 元素是动态生成的。	1.检查标识符：使用浏览器开发者工具确认元素的准确 id、class 或 XPath。 2.增加等待：在`navigate_to_url`和`click_element`中已内置等待，如不足可延长`WebDriverWait`超时时间。 3.处理 iframe：在`get_page_description`中增加切换到 iframe 的逻辑。 4.显式等待元素：在工具函数中，使用`WebDriverWait`等待特定元素出现而非仅等待 body 加载。

修复示例：增强元素查找的鲁棒性修改_find_element方法，加入显式等待：

def _find_element(self, identifier: str, timeout=10): """增强版元素定位，加入显式等待""" wait = WebDriverWait(self.driver, timeout) strategies = [ (By.ID, identifier), (By.NAME, identifier), (By.CSS_SELECTOR, identifier), (By.XPATH, identifier), ] for by, value in strategies: try: # 等待元素不仅存在而且可见 element = wait.until(EC.visibility_of_element_located((by, value))) return element except TimeoutException: continue raise NoSuchElementException(f"Could not find visible element with identifier: {identifier} after {timeout}s")

4.2 感知信息不足或过载

问题现象	可能原因	检查与解决方式
LLM 无法从描述中理解页面结构	1.`get_page_description`提取的文本太杂乱。 2. 关键视觉线索（如图标颜色、布局）缺失。	1.优化描述生成：尝试只提取主要区域（如`main`标签）内的文本，或过滤掉导航栏、页脚等无关内容。 2.引入视觉感知：对于纯文本模型，此问题难解。考虑使用多模态模型（如 GPT-4V），并将页面截图转为 base64 提供给模型。

修复示例：集成视觉感知（概念性）如果使用支持视觉的模型，可以添加一个工具：

def get_page_screenshot(self) -> str: """获取页面截图并编码为base64字符串""" if not self.driver: return "Error: Browser not started." screenshot_bytes = self.driver.get_screenshot_as_png() screenshot_b64 = base64.b64encode(screenshot_bytes).decode('utf-8') # 返回的数据格式需符合模型要求，例如作为 image_url 嵌入 return screenshot_b64

然后在提示词中指导模型如何解读图像。这能极大解决“盲视”问题，但成本更高。

4.3 状态管理错误

问题现象	可能原因	检查与解决方式
Agent 在新页面/弹窗上执行旧页面的操作	操作后没有正确感知新环境。	强化感知纪律：确保系统提示词强约束 Agent 在每次可能改变环境的操作后必须调用`get_page_description`。可以在工具调用后由框架自动触发感知，而不是依赖 LLM 决定。

5. 生产环境最佳实践与扩展方向

将实验性的 Agent 转化为生产可用的系统，还需要考虑以下方面。

5.1 可靠性提升

错误处理与重试机制：为每个工具调用添加更完善的异常捕获和重试逻辑。例如，点击元素失败后，可以尝试先滚动到该元素再点击。
会话状态管理：对于复杂的多步任务，需要在外层维护任务状态机，在 Agent 迷失时能将其重置到某个已知状态。
超时控制：为整个任务设置总超时，避免因卡死而长期占用资源。

5.2 性能与成本优化

感知摘要：对于内容极长的页面，get_page_description返回的文本可能超出模型上下文限制。需要设计摘要算法，只提取与当前任务可能相关的部分。
无头模式（Headless）：在生产环境运行浏览器时，始终使用headless=True以节省资源。
工具调用优化：分析 Agent 的思考过程，减少不必要的工具调用（例如，在明显失败的场景下避免反复尝试同一操作）。