Playwright MCP 截图标注方案调研：推荐方案 1

Playwright MCP 截图标注方案调研：推荐方案 1

1. 调研结论（先看这个）

本次在复杂布局页面（Apple 官网 PC + H5）对三种方案做了实测对比，结论如下：

• 推荐方案：方案1（页面内标注后截图）
• 推荐原因：实现最直接、定位精度高、视觉自然、适合自动化批量生产

---

2. 调研背景

目标是实现一条由 AI 自动执行的截图标注流水线：

先通过 Playwright MCP 抓取页面，再自动在图中标出重点功能（红框、说明文字），用于文档/教程/演示。

本次对比方案：

1. 方案1：页面内注入标注，再截图
2. 方案2：先截图，再离线后处理标注
3. 方案3：页面内聚光灯（遮罩挖空）高亮，再截图

---

3. 实验样本与基线图

• 实验页面：https://www.apple.com/
• 设备维度：
  • PC 视口：1255 x 971
  • H5 视口：390 x 844
• 标注目标：
  • PC：首屏 Learn more 按钮
  • H5：顶部 Menu 菜单按钮

基线图（无标注）：

PC 基线图

H5 基线图

---

4. 三种方案的实现原理与效果

4.1 方案1：页面内注入标注后截图（推荐）

实现原理

1. 用 Playwright MCP 定位目标元素（DOM + getBoundingClientRect）。
2. 通过 browser_evaluate 注入一个 overlay 层（红框 + 文案）。
3. browser_take_screenshot 输出最终标注图。
4. 可选：截图后移除 overlay，避免影响后续步骤。

效果图

PC - 方案1

H5 - 方案1

观察

• 标注和页面元素贴合度高。
• 视觉风格自然，不突兀。
• 自动化链路短，稳定性最好。

---

4.2 方案2：截图后离线后处理标注

实现原理

1. 先获取原始截图。
2. 在离线图像处理阶段（如 System.Drawing / Pillow / Sharp）绘制红框、标签、连线。
3. 导出最终标注图。

效果图

PC - 方案2

H5 - 方案2

观察

• 离线渲染可复现，审计友好。
• 标注风格易统一。
• H5 场景下文本避让需要额外逻辑，否则容易顶边/遮挡。

---

4.3 方案3：页面内聚光灯高亮（遮罩挖空）

实现原理

1. 定位目标元素矩形区域。
2. 注入全屏半透明遮罩，并对目标区域做挖空（clip-path）。
3. 叠加红框和标签，截图输出。

效果图

PC - 方案3

H5 - 方案3

观察

• 视觉引导最强，适合教程式"看这里"。
• 侵入性较强，不适合所有文档风格。
• 对遮罩层和标签避让的调试成本高于方案1。

---

5. 对比总结

维度	方案1 页面内标注	方案2 后处理	方案3 聚光灯
实现复杂度	低	中	中偏高
标注精度	高	高（依赖坐标传递）	高
视觉自然度	高	中	中（强调感强）
教程引导强度	中	中	高
批量自动化	高	高	中
推荐等级	高（首选）	中	中

---

6. 推荐落地策略

默认采用 方案1 作为主流程：

1. AI 负责识别目标元素并生成标注文案。
2. MCP 在页面内注入红框 + 标签后截图。
3. 输出最终图并清理页面标注层。

补充策略：

• 需要强引导教程时，切换到方案3。
• 需要严格审计、离线重渲染时，使用方案2。