Yeats' Wiki

外观

浏览器自动化 Agent：基于 Playwright 的 WebAgent ​

许多有价值的信息并不在 API 中，而是在网页上。 要获取这些信息，Agent 需要像人类一样操作浏览器：

  • 浏览 (Browse)：打开 URL。
  • 点击 (Click)：点击按钮、链接。
  • 输入 (Type)：在搜索框打字。
  • 滚动 (Scroll)：加载更多内容。 这就催生了 Browser Agent (WebAgent)。 Playwright 是目前最强大的浏览器自动化工具，被广泛用于 Agent 开发。

1. 核心挑战：DOM 树的复杂性 ​

1.1 DOM 太大了 ​

一个现代网页的 HTML 可能包含几万个节点。 直接把整个 HTML 塞给 LLM，Token 会爆表，而且 LLM 会迷失在无关的 div, span 中。 解决方案：

  1. Simplify HTML: 只保留可见元素（Visible Elements）。
  2. Filter: 去除 script, style, svg 等无关标签。
  3. Attribute Pruning: 只保留 id, class, href, aria-label 等关键属性。

1.2 动态加载 (Dynamic Content) ​

现在的网页多是 SPA (Single Page Application)。 内容是异步加载的。 Agent 点击后，必须等待页面渲染完成，否则会抓取到空内容。 Playwright: page.wait_for_selector(), page.wait_for_load_state('networkidle')。

2. 视觉理解：Multimodal Agent (GPT-4V) ​

有些按钮没有清晰的文本标签（只有图标）。 有些验证码是图片。 有些布局是视觉上的（如“点击右上角的头像”）。 GPT-4V 的出现解决了这个问题。 Agent 不仅读 HTML，还截图 (Screenshot) 给 LLM 看。 Set-of-Mark (SoM)：在截图上给每个可交互元素打上数字标签，让 LLM 直接输出数字（Click #5）。

3. 动作空间 (Action Space) 设计 ​

3.1 基础动作 ​

  • goto(url)
  • click(selector)
  • type(selector, text)
  • scroll(direction)
  • press(key)

3.2 复合动作 ​

  • select_option(selector, value): 下拉菜单。
  • hover(selector): 悬停显示菜单。

4. 架构实现：LangChain WebBrowser Toolkit ​

LangChain 封装了 Playwright 的工具集。

4.1 代码示例 ​

python
from langchain.agents.agent_toolkits import PlaywrightToolkit
from langchain.tools.playwright.utils import create_async_playwright_browser

# 1. 启动浏览器
browser = create_async_playwright_browser()
toolkit = PlaywrightToolkit.from_browser_tools(browser)

# 2. 创建 Agent
agent = initialize_agent(
    tools=toolkit.get_tools(),
    llm=ChatOpenAI(model="gpt-4"),
    agent=AgentType.STRUCTURED_CHAT_ZERO_SHOT_REACT_DESCRIPTION,
)

# 3. 执行任务
response = await agent.run("Go to google.com, search for 'LangChain', and click the first result.")

5. 挑战与未来 ​

5.1 反爬虫 (Anti-Bot) ​

很多网站会检测 Playwright 特征（如 navigator.webdriver）。 需要使用 Stealth Plugin 伪装成真实用户。

5.2 验证码 (Captcha) ​

这是 WebAgent 的天敌。 目前主要靠打码平台 API 或人工介入（Human-in-the-loop）。

5.3 速度慢 ​

每次操作都要截图、上传、推理、下载。 一个简单的订票流程可能需要几分钟。 未来需要更快的端侧 VLM 模型（如 Phi-3 Vision）。

WebAgent 是连接 AI 与互联网的桥梁。 它让 AI 不再是只能聊天的“缸中之脑”，而是能真正上网冲浪、帮你买票、订餐、填表的数字助理。 随着多模态模型的发展，WebAgent 将成为每个人浏览器的标配插件。