别点页面了！交给AI自动测，这个Claude Skill我装了就不想卸 手工点页面？不存在的，
webapp-testing让Playwright替你上班
前端开发有一个隐藏痛点，平时不提，但每天都在烦：回归测试点页面。
登录、注销、权限拦截、表单校验、错误提示、按钮禁用态、路由跳转......流程一多，手工点一遍就是十几分钟。改一版代码，再点一遍。改十版，点十遍。
《大话西游》里唐僧说："你想要啊？你要是想要的话你就说话嘛，你不说我怎么知道你想要呢？"
你不想点页面，你倒是说啊。
Claude Code的webapp-testing Skill，就是专门解决这个问题的。
这个Skill是干什么的？
一句话：让AI替你打开浏览器，点点点，截图截图截图，然后告诉你哪里坏了。
它基于 Playwright（微软开源的浏览器自动化框架），能在真实浏览器里执行：
点击按钮、填写表单
验证登录/退出链路
截图留证、捕获控制台报错
等待页面加载完成、拦截网络请求
你只需要用自然语言描述测试场景------比如"测一下登录页，密码错误的时候是不是弹出toast"------它就自动执行，然后把结果和截图甩给你。
怎么装？
方法一：通过Plugin Marketplace（推荐）
/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills方法二：手动克隆
git clone https://github.com/anthropics/skills
#或者
npx skills add https://github.com/anthropics/skills --skill webapp-testingcd skills
#将技能复制到 claude全局技能文件夹中
cp -r webapp-testing ~/.claude/skills/方法三：find-skills 傻瓜式安装
如果装好了find-skills ，那么通过claude code傻瓜式安装。先找到，然后 让claude code帮我们装
装完验证一下：
ls ~/.claude/skills/webapp-testing
# 应该看到 SKILL.md如果使用claude code 安装 则直接看下面:
小白推荐使用 claude code模式安装。它会默认装在
~/.agents/skills/webapp-testing 同时:
~/.claude/skills/webapp-testing会超链接到:
~/.agents/skills/webapp-testing Windows上的位置:
C:\Users\xx\.claude\skills它到底怎么工作的？
核心原则四个字：侦察先行。
AI在执行任何交互之前，会先做三件事：
检查服务器：lsof -i :端口 + curl健康检查，确保服务活着
等待页面就绪：wait_for_load_state('networkidle') ------ 对于React/Vue这种SPA特别重要
拍照取证：截图当前页面状态，留下"案发现场"
然后才开始点点点。最后还会：
截图"作案后"的状态
检查网络请求有没有报错
验证预期结果是否达成
为什么非要这样做？
因为AI踩过坑。不检查服务器就开测，结果是空白页，浪费时间排查"是页面坏了还是根本没起来"。不等networkidle就去点按钮，元素还没渲染出来，选择器就断了。
5秒钟的侦察，省30分钟的调试。这笔账，AI比你算得清。
实战：拿登录页开刀
假设你的项目有一个登录页，需要测：
邮箱密码都填了才能点登录
密码错误时弹出toast提示
登录成功后跳转到/dashboard
你只要对Claude说：
测一下登录页，重点验证：
邮箱或密码为空时，登录按钮禁用
密码错误时，显示"账号或密码错误"的toast
登录成功后，URL变为/dashboard 失败时截图说明原因。
AI会帮你生成并执行类似这样的代码（背后自动完成，会在项目目录下生成一个文件夹，你不需要写）：
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True)
page = browser.new_page()
page.goto("http://localhost:3000/login")
page.wait_for_load_state("networkidle")
# 测试1: 空表单按钮禁用
submit_btn = page.locator('button[type="submit"]')
assert submit_btn.is_disabled()
# 测试2: 密码错误
page.fill('[data-testid="email"]', "user@example.com")
page.fill('[data-testid="password"]', "wrongpass")
submit_btn.click()
toast = page.wait_for_selector('.toist-error')
assert "账号或密码错误" in toast.inner_text()
# 测试3: 正确登录跳转
page.fill('[data-testid="password"]', "correctpass")
submit_btn.click()
page.wait_for_url("**/dashboard")
browser.close()你不需要写一行代码，只需要说人话。SKILL 会自动运行检测、生成测试脚本、并生成对应截图。
使用技巧：怎么说AI才懂？
✅ 正确示范 测一下用户注册页：
手机号格式不对时，提示"请输入11位手机号"
两次输入的密码不一致，提示"两次密码不一致"
所有字段填完后，注册按钮才变成可点
要点：说出测试范围 + 预期结果 + 失败处理方式。
❌ 错误示范 帮我把这个页面测一下
太模糊了，AI不知道你要测什么。
还有一点：如果你的网站需要登录，并有账户密码 以及 验证码，需要提前就账户密码给出，同时Claude Code 会自动识别验证码，如果无法识别会交互询问你验证码是啥，你只要输入就行了
坑在哪里？
| 常见陷阱 | 怎么避 |
|---|---|
| 服务器没起就跑测试 | AI会自动先检查，但本地开发服务器你得先npm run dev |
| SPA没等networkidle | Skill自带这个等待，放心 |
| 选择器不稳定 | 优先用data-testid而不是CSS类名 |
| 测试跑太久 | 限制测试范围，不要一次测100个用例 |
完美搭档
| Skill | 搭配效果 |
|---|---|
| frontend-design | 一个负责生成漂亮UI，一个负责验证UI功能没问题 |
| systematic-debugging | 测试失败后，自动按四步法系统调试，不乱猜修复 |
| verification-before-completion | 确保测试全部通过后，AI才告诉你"搞定了" |
黄金组合：frontend-design（写好UI） + webapp-testing（测好UI） + systematic-debugging（修好Bug）= 前端开发三件套。
写在最后 webapp-testing 把前端最烦的"手工点页面"这件事，从你的待办清单上划掉了。
你不用再：
反复登录退出验证token过期
手动填20遍表单确认校验规则
每次改完代码都点一遍完整流程
你只需要说人话。剩下的，交给AI和浏览器。
装过的朋友说："这个Skill装了就再也回不去了。"
不是它有多惊艳，而是手工点页面这件事，本来就不应该让人类来做。