playwright-skill

为什么要用

核心特性

模型调用——Claude 根据你的需求编写定制的 Playwright 代码
默认有头浏览器，所以你能看到自动化过程
内置 run.js 处理模块解析，脚本开箱即用
按需加载 Playwright API 参考，保持上下文精简
处理测试、表单填充、点击流程、断链检查、响应式检查

实时演示

实际使用效果

playwright-skill.replay ▶ 就绪

0/0

安装

作者仓库 · Claude Skills 官方文档

使用场景

实战用法： playwright-skill

按需为注册流程编写烟雾测试

👤 想要不手写 Playwright 就能得到测试的开发者 ⏱ ~10 min beginner

何时使用： 你推送了新的注册流程，想知道它端到端是否仍然工作正常。

前置条件

Node + Playwright 可安装 — 如果缺少浏览器，技能将通过 npx playwright install 安装

步骤

描述流程

使用 playwright 技能。打开 localhost:3000，用 [email protected] / Pass123! 注册，验证我们到达 /dashboard。✓ 已复制

→ Claude 编写 Playwright 脚本，以有头模式运行，报告通过/失败
交互式调试失败

它在邮箱输入处失败——在错误前添加截图。✓ 已复制

→ 下一次运行捕获并返回截图

结果： 一次性烟雾测试，你可以选择将其保存为持久规范。

注意事项

选择的选择器很脆弱（例如 nth-child） — 让 Claude 优先使用角色/标签选择器

搭配使用： filesystem

找到文档站点上的所有断链

👤 文档维护者 ⏱ ~15 min intermediate

何时使用： 重组后你怀疑有链接失效。

步骤

描述爬取

使用 playwright 爬取 https://docs.example.com 深度至 2，记录每个链接，返回 404。✓ 已复制

→ Claude 编写 BFS 爬虫，运行它，输出列表

结果： 一个分类的死链列表供修复。

注意事项

爬虫对站点的冲击很大 — 并发限制在 2-3 并添加小延迟

在 3 个视口上快速检查响应式渲染

👤 验证布局变化的前端开发者 ⏱ ~5 min beginner

何时使用： 你改变了头部，想看它在桌面、平板和移动设备上如何渲染。

步骤

请求截图

使用 playwright 在 1440、768 和 390 宽度下对 localhost:3000 截图。保存它们。✓ 已复制

→ 3 个 PNG 已保存并返回路径

结果： 三张截图供快速视觉审查。

注意事项

截图不等待字体/图片 — 在截图前添加 networkidle 等待

搭配使用： filesystem

组合

与其他 MCP 搭配，撬动十倍杠杆

playwright-skill + filesystem

将测试规范和截图与它们测试的代码一起保存

编写烟雾测试并将其保存在 tests/e2e/signup.spec.js 下。✓ 已复制

playwright-skill + github

运行测试，使工作流失败，在 PR 上发布结果

针对部署预览运行 playwright 规范，然后作为对 PR #42 的评论发布结果。✓ 已复制

playwright-skill + ios-simulator-skill

Web 用 Playwright，原生用 ios-simulator-skill——在跨平台测试会话中同时使用两者

按顺序运行 playwright web 流程和 ios-simulator 原生流程，报告两者。✓ 已复制

工具

此 MCP 暴露的能力

工具	输入参数	何时调用
Custom Playwright script generation	task description	任何浏览器自动化请求
run.js executor	script path	脚本生成后
Headed/headless toggle	flag	CI 对比本地调试

成本与限制

运行它的成本

API 配额: 无
每次调用 Token 数: 每次测试运行 1-5k，取决于 Claude 拉入多少 Playwright 参考
费用: 免费——你只需要在磁盘上有 Node + Playwright 浏览器
提示: 保持提示精准；不要一次性问'测试一切'。

安全

权限、密钥、影响范围

凭据存储： 技能中没有凭据。如果你的测试访问需要认证的页面，将凭据保存在环境变量中——永远不要在生成的脚本中。

数据出站： 仅限你的测试访问的站点

生成的脚本以完全的本地进程权限运行——在针对生产 URL 运行前进行审查。

故障排查

常见错误与修复

'browserType.launch: Executable doesn't exist'

运行 npx playwright install chromium

验证： npx playwright --version

选择器间歇性失败

切换到角色/标签选择器；添加 await expect(...).toBeVisible() 等待。

脚本挂起

Claude 可能忘记关闭浏览器。告诉它始终用 try/finally 包装并使用 await browser.close()。

替代方案