/ 目录 / 演练场 / playwright-skill
● 社区 testdino-hq ⚡ 即开即用

playwright-skill

作者 testdino-hq · testdino-hq/playwright-skill

Claude Code 技能,传授 Playwright 最佳实践——定位符、网络模拟、追踪查看器、并行化——出自 TestDino 团队。

TestDino Playwright Skill 为 Claude Code 配备 Playwright 优先的测试模式:基于角色的定位符、网络模拟、fixtures、追踪捕获、并行化、重试、auth 状态复用。基于 TestDino 的测试平台经验构建,它使 Claude 的代码生成倾向于可维护的 E2E 测试。

为什么要用

核心特性

实时演示

实际使用效果

playwright-skill-2.replay ▶ 就绪
0/0

安装

选择你的客户端

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

打开 Claude Desktop → Settings → Developer → Edit Config。保存后重启应用。

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

Cursor 使用与 Claude Desktop 相同的 mcpServers 格式。项目级配置优先于全局。

VS Code → Cline → MCP Servers → Edit
{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

点击 Cline 侧栏中的 MCP Servers 图标,然后选 "Edit Configuration"。

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "playwright-skill-2": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ],
      "_inferred": true
    }
  }
}

格式与 Claude Desktop 相同。重启 Windsurf 生效。

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "playwright-skill-2",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/testdino-hq/playwright-skill",
        "~/.claude/skills/playwright-skill"
      ]
    }
  ]
}

Continue 使用服务器对象数组,而非映射。

~/.config/zed/settings.json
{
  "context_servers": {
    "playwright-skill-2": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/testdino-hq/playwright-skill",
          "~/.claude/skills/playwright-skill"
        ]
      }
    }
  }
}

加入 context_servers。Zed 保存后热重载。

claude mcp add playwright-skill-2 -- git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill

一行命令搞定。用 claude mcp list 验证,claude mcp remove 卸载。

使用场景

实战用法: playwright-skill

如何编写可维护的首个 E2E 测试

👤 首次在项目中添加 Playwright 的开发者 ⏱ ~30 min beginner

何时使用: 你有一个 staging URL 和登录流程;在扩展之前你想要一个扎实的测试。

前置条件
  • Skill 已安装 — git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill
  • @playwright/test 已安装 — npm init playwright@latest
步骤
  1. 描述流程
    为 staging.example.com 的登录编写 Playwright 测试:邮箱、密码、预期仪表板标题。只使用基于角色的定位符。✓ 已复制
    → 使用 getByRole、getByLabel 的测试;没有 .class 或 xpath
  2. 添加 auth 复用 fixture
    将登录转换为可复用的 auth fixture,以便其他测试跳过登录。✓ 已复制
    → 基于 storageState 的 fixture + globalSetup
  3. 确保不会出现不稳定性
    检查测试中的 waitFor* 反模式;切换到 web-first 断言。✓ 已复制
    → 使用 expect(locator).toBeVisible() 而不是 waitForSelector

结果: 一个扎实的首个测试加上整个测试套件继承的 fixture。

注意事项
  • Claude 倾向于使用 page.waitForTimeout — 明确告诉 skill:不要任意等待,使用 web-first 断言

Stub 后端 API 以测试前端边界情况

👤 测试空/错误/加载状态的前端工程师 ⏱ ~25 min intermediate

何时使用: 你无法轻松将真实后端放入每个状态。

步骤
  1. Stub 端点
    Stub GET /api/orders 以返回空数组,然后断言空状态渲染。✓ 已复制
    → route.fulfill 带 JSON body;对空状态元素的断言
  2. 按测试改变响应
    参数化 stub:一个测试用于 500 错误,一个用于超时,一个用于部分数据。✓ 已复制
    → 三个测试共享一个 helper

结果: 在不接触后端的情况下获得边界状态覆盖。

注意事项
  • Stub 在测试之间泄露 — 在 beforeEach 或 fixture 作用域中设置,而不是在模块级 hook 中

使用追踪查看器调试不稳定的测试

👤 在 CI 中对不稳定测试套件进行分类的工程师 ⏱ ~45 min intermediate

何时使用: 一个测试在本地通过,在 CI 中 5% 的时间失败。

步骤
  1. 在重试时捕获追踪
    在 playwright.config.ts 中配置追踪为 'on-first-retry'。✓ 已复制
    → Config diff
  2. 分析追踪
    从失败的 CI 运行中下载 trace.zip;给我解释一下与成功运行相比有什么不同。✓ 已复制
    → 网络/DOM 时序中的具体 diff
  3. 修复
    基于追踪,提议最小改动以消除不稳定性。✓ 已复制
    → 特定定位符或断言改变,而不是盲目的 sleep

结果: 一个消除了不稳定性的测试,带有文档化的根本原因。

注意事项
  • 通过增加超时来处理不稳定性 — 大多数不稳定性是隐藏的竞态条件——追踪通常会显示缺少的 await

组合

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

playwright-skill-2 + seo-audit-skill

Playwright 捕获页面,SEO 审计对 JS-heavy 应用的渲染 HTML 进行检测

使用 Playwright 进行身份验证并捕获已登录页面,然后对每个页面运行 seo-audit。✓ 已复制

工具

此 MCP 暴露的能力

工具输入参数何时调用成本
Locator patterns - 编写新的选择器 0
Network stubbing - 测试前端边界状态 0
Fixtures & auth reuse - 将测试套件扩展到 5 个以上 0
Trace analysis trace.zip 调试不稳定性 0
Parallelism & sharding - 在 CI 中运行超过 5 分钟的测试套件 0

成本与限制

运行它的成本

API 配额
每次调用 Token 数
测试生成:3-8k tokens
费用
免费
提示
手动生成一个测试,保存为模板,然后让 Claude 为其他测试遵循这个模板。

安全

权限、密钥、影响范围

凭据存储: 在 .env 中放置测试凭据(通过 dotenv)。永远不要提交包含生产 auth 的 storageState.json。
数据出站: 测试会命中你的目标 URL。skill 不会进行第三方调用。

故障排查

常见错误与修复

测试仅在 CI 上不稳定

启用追踪配置 'on-first-retry' 并分析失败尝试的追踪。

验证: npx playwright show-trace trace.zip
getByRole 找不到明显存在的元素

元素可能缺少可访问的名称。使用 Playwright Inspector 查看计算出的角色/名称。

验证: npx playwright test --ui
登录 fixture 在本地工作,在 CI 中失败

CI 可能需要 --headed=false 和显式浏览器安装。在 CI 中运行 npx playwright install --with-deps。

替代方案

playwright-skill 对比其他方案

替代方案何时用它替代权衡
Cypress你更喜欢 Cypress 的 DX 和实时浏览器调试不同的定位符哲学;较少的并行化

更多

资源

📖 阅读 GitHub 上的官方 README

🐙 查看未解决的 issue

🔍 浏览全部 400+ MCP 服务器和 Skills