Playwright MCP 用 a11y 树抓页面：比全量 DOM 省 token 的采集 Agent

作者：张大鹏 | 大鹏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：

维度	全量 DOM / innerHTML	a11y snapshot
噪声	脚本、样式、隐藏节点多	面向「可交互/可读」语义
Token	高，易超上下文	通常低一个数量级
Agent 理解	易被 class 名误导	更接近人类「看到什么点什么」
稳定性	CSS 改版即失效	语义定位更抗改版

注意 ：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 不是反爬工具。 以下行为本文不提供、也不建议：

禁止	说明
绕过登录 / 付费墙	未授权不得采集受限内容
破解验证码 / 滑块	遇验证码应停止或转人工
伪造身份 / 账号池	违反 Terms 与相关法律风险
高频轰炸	对目标站造成压力
个人隐私	不采通讯录、私信、身份证号等

允许且推荐：

• 只采公开页面 或书面授权的数据源
• 阅读并遵守 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
原创内容，转载需授权