playwright-skill MCP — Сценарии использования, Установка & Живое демо

Зачем использовать

Ключевые функции

Role-based and accessible locator patterns (avoid CSS/XPath fragility)
Network stubbing and response mocking idioms
Fixtures for auth state reuse across tests
Trace capture + debugging workflow via trace viewer
Parallelism and sharding guidance
Flakiness mitigation: web-first assertions, retry policy

Живое демо

Как выглядит на практике

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 использует ту же схему mcpServers, что и Claude Desktop. Конфиг проекта приоритетнее глобального.

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
    }
  }
}

Щёлкните значок MCP Servers на боковой панели Cline, затем "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 использует массив объектов серверов, а не map.

~/.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

How to write a maintainable first E2E test

👤 Developers adding Playwright to a project for the first time ⏱ ~30 min beginner

Когда использовать: You have a staging URL and a login flow; you want one solid test before scaling.

Предварительные требования

Skill installed — git clone https://github.com/testdino-hq/playwright-skill ~/.claude/skills/playwright-skill
@playwright/test installed — npm init playwright@latest

Поток

Describe the flow

Write a Playwright test for login at staging.example.com: email, password, expect dashboard heading. Use role-based locators only.✓ Скопировано

→ Test using getByRole, getByLabel; no .class or xpath
Add auth reuse fixture

Convert the login into a reusable auth fixture so other tests skip logging in.✓ Скопировано

→ storageState-based fixture + globalSetup
Ensure non-flakiness

Audit the test for waitFor* anti-patterns; switch to web-first assertions.✓ Скопировано

→ expect(locator).toBeVisible() rather than waitForSelector

Итог: A robust first test plus a fixture the whole suite inherits.

Подводные камни

Claude reaches for page.waitForTimeout — Tell skill explicitly: no arbitrary waits, use web-first assertions

Stub a backend API to test frontend edge cases

👤 Frontend engineers testing empty/error/loading states ⏱ ~25 min intermediate

Когда использовать: You can't easily put the real backend into each state.

Поток

Stub the endpoint

Stub GET /api/orders to return empty array, then assert the empty state renders.✓ Скопировано

→ route.fulfill with JSON body; assertion on empty-state element
Vary responses per test

Parameterize the stub: one test for 500 error, one for timeout, one for partial data.✓ Скопировано

→ Three tests sharing a helper

Итог: Edge-state coverage without touching the backend.

Подводные камни

Stub leaks across tests — Set up in beforeEach or fixture scope, not in a module-level hook

Debug a flaky test using trace viewer

👤 Engineers triaging a flaky suite in CI ⏱ ~45 min intermediate

Когда использовать: A test passes locally, fails 5% of the time in CI.

Поток

Capture trace on retry

Configure trace: 'on-first-retry' in playwright.config.ts.✓ Скопировано

→ Config diff
Analyze the trace

Download the trace.zip from the failed CI run; walk me through what's different from the successful run.✓ Скопировано

→ Concrete diff in network/DOM timing
Fix

Based on the trace, propose the minimal change to de-flake.✓ Скопировано

→ Specific locator or assertion change, not a blanket sleep

Итог: A de-flaked test with a documented root cause.

Подводные камни

Treating flakes by bumping timeouts — Most flakes are hidden race conditions — the trace usually reveals a missing await

Комбинации

Сочетайте с другими MCP — эффект x10

playwright-skill-2 + seo-audit-skill

Playwright captures pages, SEO audit runs against rendered HTML for JS-heavy apps

Use Playwright to authenticate and capture logged-in pages, then run seo-audit against each.✓ Скопировано

Инструменты

Что предоставляет этот MCP

Инструмент	Входные данные	Когда вызывать
Locator patterns	-	Writing new selectors
Network stubbing	-	Testing frontend edge states
Fixtures & auth reuse	-	Scaling a suite past 5 tests
Trace analysis	trace.zip	Debugging flakes
Parallelism & sharding	-	Suites running >5 min in CI

Стоимость и лимиты

Во что обходится

Квота API: None
Токенов на вызов: Test generation: 3-8k tokens
Деньги: Free
Совет: Generate one test manually, save as a template, and have Claude follow the template for others.

Безопасность

Права, секреты, радиус поражения

Хранение учётных данных: Test credentials in .env (via dotenv). Never commit storageState.json with production auth.

Исходящий трафик: Tests hit your target URL. No third-party calls from the skill.

storageState.json contains session cookies. Gitignore it and don't upload as CI artifact publicly.

Устранение неполадок

Частые ошибки и исправления

Test is flaky on CI only

Enable trace: 'on-first-retry' and analyze the trace from the failing attempt.

Проверить: npx playwright show-trace trace.zip

getByRole doesn't find an element that's clearly there

Element may lack an accessible name. Use Playwright Inspector to see the computed role/name.

Проверить: npx playwright test --ui

Login fixture works locally, fails in CI

CI may need --headed=false and explicit browser install. Run npx playwright install --with-deps in CI.

Альтернативы

playwright-skill в сравнении

Альтернатива	Когда использовать	Компромисс
Cypress	You prefer Cypress's DX and real-browser debugging	Different locator philosophy; less parallelism

Ещё

Ресурсы

📖 Читать официальный README на GitHub

🐙 Открытые задачи

🔍 Все 400+ MCP-серверов и Skills