webapp-testing:让 AI Agent 用 Playwright 自主验证本地 Web 应用

—— 夜雨飘零

用 AI 编程助手改前端，往往卡在同一个环节：代码改完了，功能到底跑没跑通，Agent 自己说不清。你让它「帮我测一下登录页」，它多半只能读源码、猜 DOM 结构，或者建议你手动打开浏览器点一遍。静态 HTML 还好，一旦遇到 React、Vue 这类需要等 JavaScript 渲染的单页应用，光靠读文件根本没法确认页面真实长什么样。

Anthropic 在官方 skills 仓库里提供了一个叫 webapp-testing 的 Agent Skill，把 Playwright 浏览器自动化和本地服务器生命周期管理封装成一套可复用的工作流。Agent 加载这个 Skill 后，可以写 Python 脚本启动本地 dev server、打开无头 Chromium、截图、抓控制台日志，按「先侦察、再操作」的模式验证 UI 行为。对需要频繁改前端、又希望 Agent 能自主回归测试的开发者来说，这比反复口述「你帮我看看页面」要靠谱得多。

webapp-testing 是 Anthropic 官方 skills 仓库 中的示例 Skill，遵循通用的 SKILL.md 格式，可在 Cursor、Claude Code、Claude.ai 等支持 Agent Skills 的工具中使用。

它的定位很直接：用 Python Playwright 与本地 Web 应用交互和测试，支持功能验证、UI 调试、截图与浏览器日志查看。Skill 包里还附带 scripts/with_server.py 辅助脚本和若干示例，教 Agent 如何管理服务器启停、选择测试策略、避免常见的动态页面陷阱。

Skill 内置了一套选择逻辑，Agent 会先判断页面类型再决定测试路径：

scripts/with_server.py 是 Skill 的核心辅助工具，支持同时管理多个本地服务（比如后端 3000 端口 + 前端 5173 端口），等端口就绪后再跑自动化脚本，结束后自动清理进程。Agent 被明确要求：先跑 --help 看用法，把脚本当黑盒调用，不要先读源码——因为这些脚本可能很大，直接塞进上下文会浪费 token。

对动态单页应用，Skill 强调先看清页面再动手：

从截图、DOM 内容和元素列表里发现稳定的选择器（text=、role=、CSS、ID），再写后续交互逻辑。官方特别提醒：动态应用在检查 DOM 之前必须 wait_for_load_state('networkidle')，否则拿到的结构不完整。

Skill 的 examples/ 目录提供了三个参考：

Skill 对 Agent 的行为做了明确规范：使用 sync_playwright() 写同步脚本；Chromium 始终以 headless 模式启动；操作完成后关闭浏览器；优先用描述性选择器；必要时加 wait_for_selector() 或超时等待。

安装后直接在对话里提及即可，例如：「用 webapp-testing 帮我验证本地前端改动」。

也可在 Cursor 的 Customize → Rules → Remote Rule (Github) 中导入 GitHub 仓库。使用前需在本机安装 Playwright Python 包及浏览器：

Agent 会在对话上下文匹配时自动加载 Skill，也可在聊天中输入 /webapp-testing 或 @webapp-testing 手动唤起。

单服务器：启动 dev server 并跑自动化

多服务器：前后端同时拉起

自动化脚本里只写 Playwright 逻辑，服务器由 helper 托管：

捕获控制台日志

适合谁用

需要注意

webapp-testing 把 Playwright 自动化测试封装成 Agent Skill，解决了「AI 改前端但没法自己验」的痛点。决策树帮你区分静态页和动态应用，with_server.py 管好多服务启停，侦察—操作模式让 Agent 先看渲染结果再写交互。如果你已经在用 Cursor 或 Claude Code，把这个 Skill 放进 .cursor/skills/ 或对应插件里，下次改完 UI 直接让 Agent 跑脚本验证，比手动点浏览器高效得多。

我是 夜雨飘零，热衷于分享 AI 观察与干货。

如果你觉得今天这篇有收获，欢迎点赞、在看、转发三连，我们下篇见。