Claude 操控浏览器测 Web 应用？这个 Skill 让前端测试告别人肉点击
写代码最痛苦的事情是什么？不是写功能，是测功能。尤其是前端，每次改个样式、换个逻辑，得手动点几十遍——按钮对不对、表单提交成没成、响应式布局有没有乱……全靠人肉验证，效率低到想砸键盘。
现在有个 Skill，能让 Claude 直接操控你的浏览器，自动帮你做这些重复劳动。它叫 webapp-testing，来自大名鼎鼎的 ComposioHQ awesome-claude-skills 仓库。
它能做什么？
简单说：Claude + 这个 Skill = 你的专属自动化测试助手。
它基于 Playwright（业内最流行的浏览器自动化工具），让 Claude 能够：
- 打开本地 Web 应用，自动填写表单、点击按钮
- 截取完整页面截图，帮你发现 UI 问题
- 捕获浏览器控制台日志，排查 JS 报错
- 验证前端功能是否正常工作
核心工作流：三步走
这个 Skill 的设计思路非常清晰，叫”侦察后行动”（Reconnaissance-Then-Action）：
第一步：侦察——Claude 先打开页面，等待网络空闲（networkidle），然后截图或检查 DOM，找到你要操作的目标元素。
第二步：定位——从渲染结果中识别选择器（CSS selector、role、text 等）。
第三步：行动——用 Playwright 脚本精准执行操作，验证结果。
配合内置的 with_server.py 脚本，多服务架构（比如后端 3000 端口 + 前端 5173 端口）也能一键启动和管理，不用你在终端里来回切换。
一个关键坑，踩了白测
Skill 文档里特别标注了这个：动态页面必须等待 networkidle。如果不等 JS 执行完就开始操作，元素还没渲染出来，测试结果肯定是错的。这是一个高频踩坑点，用之前一定要记住。
适合谁用？
- 前端开发者：每次提交前快速跑一遍关键路径测试
- 全栈工程师：验证新功能有没有引入 bug
- AI 开发者：让 AI 帮你检查 Web UI 行为是否符合预期
GitHub 链接
https://github.com/ComposioHQ/awesome-claude-skills/tree/master/webapp-testing
GitHub: https://github.com/ComposioHQ/awesome-claude-skills/tree/master/webapp-testing
评论区
登录后可评论。