playwright-skill MCP — Anwendungsfälle, Installieren & Live-Demo

Warum nutzen

Hauptfunktionen

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

Live-Demo

In der Praxis

playwright-skill-2.replay ▶ bereit

0/0

Installieren

Wählen Sie Ihren Client

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

Öffne Claude Desktop → Settings → Developer → Edit Config. Nach dem Speichern neu starten.

~/.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 nutzt das gleiche mcpServers-Schema wie Claude Desktop. Projektkonfiguration schlägt die globale.

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

Klicken Sie auf das MCP-Servers-Symbol in der Cline-Seitenleiste, dann "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
    }
  }
}

Gleiche Struktur wie Claude Desktop. Windsurf neu starten zum Übernehmen.

~/.continue/config.json

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

Continue nutzt ein Array von Serverobjekten statt einer 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"
        ]
      }
    }
  }
}

In context_servers hinzufügen. Zed lädt beim Speichern neu.

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

Einzeiler. Prüfen mit claude mcp list. Entfernen mit claude mcp remove.

Anwendungsfälle

Praxisnahe Nutzung: playwright-skill

How to write a maintainable first E2E test

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

Wann einsetzen: You have a staging URL and a login flow; you want one solid test before scaling.

Voraussetzungen

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

Ablauf

Describe the flow

Write a Playwright test for login at staging.example.com: email, password, expect dashboard heading. Use role-based locators only.✓ Kopiert

→ 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.✓ Kopiert

→ storageState-based fixture + globalSetup
Ensure non-flakiness

Audit the test for waitFor* anti-patterns; switch to web-first assertions.✓ Kopiert

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

Ergebnis: A robust first test plus a fixture the whole suite inherits.

Fallstricke

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

Wann einsetzen: You can't easily put the real backend into each state.

Ablauf

Stub the endpoint

Stub GET /api/orders to return empty array, then assert the empty state renders.✓ Kopiert

→ 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.✓ Kopiert

→ Three tests sharing a helper

Ergebnis: Edge-state coverage without touching the backend.

Fallstricke

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

Wann einsetzen: A test passes locally, fails 5% of the time in CI.

Ablauf

Capture trace on retry

Configure trace: 'on-first-retry' in playwright.config.ts.✓ Kopiert

→ Config diff
Analyze the trace

Download the trace.zip from the failed CI run; walk me through what's different from the successful run.✓ Kopiert

→ Concrete diff in network/DOM timing
Fix

Based on the trace, propose the minimal change to de-flake.✓ Kopiert

→ Specific locator or assertion change, not a blanket sleep

Ergebnis: A de-flaked test with a documented root cause.

Fallstricke

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

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

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.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

Werkzeug	Eingaben	Wann aufrufen
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

Kosten & Limits

Was der Betrieb kostet

API-Kontingent: None
Tokens pro Aufruf: Test generation: 3-8k tokens
Kosten in €: Free
Tipp: Generate one test manually, save as a template, and have Claude follow the template for others.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: Test credentials in .env (via dotenv). Never commit storageState.json with production auth.

Datenabfluss: 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.

Fehlerbehebung

Häufige Fehler und Lösungen

Test is flaky on CI only

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

Prüfen: 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.

Prüfen: 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.

Alternativen

playwright-skill vs. andere

Alternative	Wann stattdessen	Kompromiss
Cypress	You prefer Cypress's DX and real-browser debugging	Different locator philosophy; less parallelism

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen