用 Playwright MCP 读取 a11y 树：打造更省 token 的页面采集 Agent

把整页 HTML 直接交给大模型，看似省去了页面解析工作，却会让脚本、样式和隐藏节点迅速占满上下文。对于需要持续浏览、提取并复核数据的采集 Agent，更合适的输入是结构清晰的页面语义。下面将以 Playwright MCP 的 a11y 树为核心，梳理低 token 的采集流程及必要的校验与合规措施。

作者：张大鹏 | 大鹏AI教育

标签：AI 爬虫 Playwright MCP 浏览器自动化

阅读提示

做 AI 采集 Agent 时，很多人第一步就踩坑：把整页 DOM 或 innerHTML 全量丢给模型。

一个中等复杂度的电商列表页，全量 HTML 轻松 80KB～200KB，换算成 token 往往上万。Agent 还没开始「理解页面」，上下文就被导航栏、广告脚本、埋点 div 占满了。

微软官方推出的 @playwright/mcp 提供了一个更省 token 的切入点：用 accessibility（a11y）树 snapshot 描述页面，而不是 dump 全量 DOM。Agent 看到的是「按钮叫 Load more」「链接文本是某某文章」，语义清晰、噪声少。

这篇只写合规场景：公开页面、已授权内部系统、测试环境。不教绕过登录、验证码、风控、付费墙或账号池。

你会拿到：

• a11y snapshot 与全量 DOM 的差异对比
• @playwright/mcp 最小接入方式
• 基于 a11y 树的采集 Agent 闭环
• 合规采集检查清单

1. 为什么 a11y 树比全量 DOM 更适合 Agent

Playwright 的 accessibility snapshot 来自浏览器无障碍树，节点通常包含：

• role（button、link、heading…）
• name / accessible name（用户可见文本或 aria-label）
• 层级关系与 ref（供后续 browser_click 等工具定位）

对比全量 DOM：

注意：a11y 树不是万能。纯 Canvas 图表、无文本的图片按钮、过度依赖视觉布局的页面，仍可能需要截图 + 视觉模型或人工规则。Agent 采集 = 多信号融合，不是单通道魔法。

2. 接入 @playwright/mcp

在 Cursor / Claude Desktop 等支持 MCP 的客户端里，增加 Playwright MCP Server。典型配置（路径按本机 Node 环境调整）：

{
  "mcpServers": {
    "playwright": {
      "command": "npx",
      "args": ["-y", "@playwright/mcp@latest"]
    }
  }
}

常用工具链（名称以当前版本为准）：

1. browser_navigate — 打开 URL
2. browser_snapshot — 获取 accessibility tree（核心）
3. browser_click / browser_type — 按 ref 或语义交互
4. browser_wait_for — 等待网络或文本稳定

最小验证流程：

1. browser_navigate → https://example.com
2. browser_snapshot → 保存 a11y 树
3. 让 LLM 从 snapshot 里列出：主标题、前 3 个链接文本
4. browser_click → 点第一个「Read more」类按钮
5. 再次 snapshot → 对比 DOM 是否展开

若第二步返回的树里找不到目标字段，先检查：页面是否 SSR 完成、是否有 iframe（MCP 可能只暴露主 frame）、是否需要滚动加载。

3. 采集 Agent 闭环：snapshot → 结构化 → 复核

推荐把 Agent 约束在固定 JSON Schema，避免模型自由发挥：

{
  "items": [
    {
      "title": "string",
      "url": "string",
      "published_at": "string|null"
    }
  ],
  "next_action": "click_load_more|stop|paginate"
}

Prompt 要点：

你只能根据 browser_snapshot 里的 accessible name 和 role 决策。
禁止编造 snapshot 中不存在的链接。
若需要加载更多，返回 next_action=click_load_more，并给出 ref。
输出必须是合法 JSON，符合 schema。

工程化时再加三层保鲜：

1. Schema 校验 — ajv / pydantic 拦非法输出
2. ref 存在性检查 — click 前确认 ref 仍在最新 snapshot
3. 人工抽检 — 首批 20 条与页面肉眼对照

4. 合规边界（必读）

a11y 采集 Agent 不是反爬工具。 以下行为本文不提供、也不建议：

允许且推荐：

• 只采公开页面或书面授权的数据源
• 阅读并遵守 robots.txt 与网站 Terms
• 固定 User-Agent、限速（如每 URL 间隔 1～3 秒）
• 失败留证：snapshot、截图、HTTP 状态、时间戳
• 敏感字段脱敏后再入库

5. 上线前合规检查清单

• 目标 URL 是否公开或已获授权
• 是否阅读 robots.txt，未 Disallow 的路径才采
• Agent 是否只用 snapshot 内可见信息，禁止幻觉字段
• 是否有限速与并发上限
• 遇登录墙 / 验证码是否停止而非绕过
• 输出是否经 Schema 校验 + 抽检
• 是否不采集个人敏感信息
• 失败是否有 snapshot / 截图归档

6. 下一步

Playwright MCP + a11y 树的正确姿势，不是「让 AI 看懂所有 HTML」，而是：

用语义快照喂模型，用 Playwright 执行动作，用 Schema 锁输出，用人工抽检保质量。

这样 token 省、结构稳，也更不容易踩合规红线。

参考来源

1. Playwright MCP (@playwright/mcp)
2. Playwright Accessibility
3. Playwright Locators / getByRole

作者：张大鹏｜来源：大鹏AI教育
标签：AI · 爬虫 · Playwright · MCP
原创内容，转载需授权