写 Playwright 脚本前，先让 AI「看」一遍你的页面：交互地图自动生成
写 Playwright 自动化脚本，最头疼的是什么？
不是写代码本身，是「找对那个按钮」——尤其是遇到 Figma、Notion、LinkedIn 这种 JS 重度单页应用。按钮的 class 是 `ember-view-123`，下一个版本就变成 `ember-view-456` 了。抓接口文档？有些内部路由根本没对外开放。硬写 CSS 选择器？等着被 deploy 打脸。
今天发现了一个专门解决这个问题的 Skill——Discover UI Surface，472 Stars，开源免费。它的工作方式很有意思：让你手动走一遍流程，同时用工具记录下所有交互对应了哪些 DOM 元素和接口请求，生成一份持久可用的「交互地图」。
它解决什么问题？
传统自动化脚本有两个典型的脆弱点：一是 CSS 选择器依赖视觉 class，站点一更新就挂；二是只盯着 DOM，错过了网络请求里那些只在接口返回里出现的真实 ID（比如 LinkedIn 的 URN、Figma 的节点 ID）。
这个 Skill 同时抓两个层面：
- DOM 层：元素坐标、可访问性属性（aria-label、role）、语义化 class
- 网络层：每次点击触发了什么 XHR/fetch 请求、请求体和响应体的结构
两者对照，就得到了一张「哪些元素点击 → 触发什么接口 → 返回什么字段」的完整地图。
四种记录模式，怎么选？
Skill 内置了四种模式，越往后信息越丰富：
Mode A：Agent Browser（最轻量）
装好 agent-browser 后，用命令行让 AI 逐步读取页面内容、点击元素、抓快照。适合「AI 帮我自动化这个页面」的场景，1 分钟上手。
Mode B：Chrome DevTools Recorder（零配置）
直接用 Chrome 内置的 Recorder 录你的操作，导出 Playwright 脚本，同时手动标注网络请求。适合快速探索，不写代码先摸清规律。
Mode C：Playwright Observer（自动关联）
最强大的模式——点击动作和它触发的网络请求自动映射，输出结构化 JSON 日志。适合需要精确接口调用的自动化场景。
Mode D：Playwright Codegen + Trace（全时间线回放）
录制完整操作轨迹，导出 trace.zip，之后可以离线回放每一步操作的 DOM 状态和网络请求。适合复杂流程的事后分析。
适合谁用？
需要自动化 Web 应用的开发者、QA 工程师，以及任何写 Playwright 脚本时被「找不到正确选择器」困扰的人。
尤其是如果你在对接内部系统（没有公开 API 文档的那种），这个 Skill 能帮你快速摸清真实的数据流，少踩很多坑。
说起来，它本质上就是一句话：「先观察，再动手」——把这个原则固化成 Skill，让 AI 也能用。
评论区
登录后可评论。