浏览器智能体实战 · 第 4 章 结构化快照

浏览器智能体实战 · 第 4 章 结构化快照

章节摘要：本章讲第三种「看页面」的方式：结构化快照——不读 DOM 全文、不看截图，读浏览器为辅助技术维护的那棵语义树。4.1 节讲无障碍树原理：它是什么（浏览器从 DOM 计算出的角色、名称、状态语义树）、为什么比 DOM 干净（滤掉样式脚本与嵌套噪音，只留语义）、为什么比截图便宜（文本表示的 token 成本远低于图像，且元素可用 ref 稳定引用）、以及它的局限（Canvas、无语义标记的页面读不出东西——那是第 5 章视觉流派的主场）。4.2 节讲 Playwright MCP：微软官方的无障碍快照 MCP 服务器（约 3.8 万 stars，2026-10-16 社区口径），快照加 ref 引用的驱动工作流、给编码 Agent 的接入配置、与直写 Playwright 脚本的关系。4.3 节讲 Chrome DevTools MCP：Chrome 官方给编码 Agent 的 DevTools 通道（约 5.4 万 stars，社区口径），在网络、控制台、性能维度上的独特能力，与 Playwright MCP 的分工对照表。MCP 协议原理归《深入理解 AI Agent》第 4 章，本章只管工程接入。

学习目标

• 说出无障碍树是什么，以及「比 DOM 干净、比截图便宜」各自的原因。
• 用三种页面表示（DOM、截图、无障碍树）做成本与表达能力对照。
• 描述 Playwright MCP 的快照加 ref 驱动工作流，并完成编码客户端接入。
• 解释 ref 与第 1.2 节编号点击的同构关系。
• 列出 Chrome DevTools MCP 的能力分组，用对照表在两个 MCP 间选型。
• 说出结构化快照流派的适用边界（何时必须转向视觉流派）。

核心概念速览

同一棵页面，三种喂给模型的表示（4.1 节的对照核心）

  页面 DOM ──浏览器计算──▶ 无障碍树 ──截屏──▶ 截图
    │                        │                  │
    ▼                        ▼                  ▼
  全量噪音                 语义精华            像素全景
  结构+样式+脚本           角色+名称+状态      布局+图像+Canvas
  token 多                 token 少、ref 可引用  token 数倍、坐标定位
    └───────── 结构化快照流派 ─────────┘    视觉流派（第 5 章）
​

一句话金句：无障碍树是「为屏幕阅读器准备的页面说明书」，恰好也是给模型准备的那一份。

子章节导航

• 第 4.1 节《无障碍树原理》：语义树的构成、干净与便宜的原因、三种表示对照、局限与对策。
• 第 4.2 节《Playwright MCP》：快照驱动工作流、接入配置、常用工具面、与直写脚本的关系。
• 第 4.3 节《Chrome DevTools MCP》：能力分组（网络、控制台、性能、仿真）、调试会话流程、双 MCP 分工对照与并用。

按序读：4.1 立表示原理，4.2 与 4.3 是该原理在两个官方 MCP 上的工程化，可按需精读。

子章节之间的逻辑关系

┌────────────────┐   表示原理落到服务器   ┌──────────────────┐   交互面扩展到调试台 ┌────────────────┐
│ 4.1 无障碍树    │ ─────────────────▶ │ 4.2 Playwright MCP│ ────────────────▶ │ 4.3 DevTools MCP│
│ 语义树的构成与  │                     │ 快照+ref 驱动      │                   │ 网络/控制台/     │
│ 三表示对照      │                     │ 编码 Agent 接入    │                   │ 性能维度        │
└───────┬────────┘                     └─────────┬────────┘                   └───────┬────────┘
        │ 产物：表示层选型观                      │ 产物：MCP 接入与工具面              │ 产物：双 MCP 选型表
        └─────────────────────────────────────────┴───────────────┬─────────────────┘
                                                                  ▼
                                     第 5 章 视觉流派（快照读不出的页面，换眼睛）
​

前置知识与后续延伸

• 前置：第 1.2 节的元素定位（无障碍树与 role 定位同源）；第 1.1 节三原语（MCP 工具面按导航、交互、读取分组，仍是三原语形态）。
• 延伸阅读：《深入理解 AI Agent》第 4 章《工具》（「工具生态：MCP 与工具选择的挑战」一节）——MCP 协议与工具选择的理论背景；《Strix 精读》第 4 章《工具、沙箱与集成》——浏览器类工具进入 Agent 工具箱时的安全语境。
• 后续：第 5 章处理快照读不出的页面；第 6 章为 MCP 驱动的会话设计验证；第 11 章讲 MCP 服务器在生产环境的部署形态。

合规声明：本节内容仅用于你有权访问的站点与授权自动化场景；请遵守目标站点的服务条款，自动化访问的速率与方式应可被站点方接受。