/ Verzeichnis / Playground / playwright-skill
← Alle Server ↗ GitHub
● Community lackeyjb ⚡ Sofort

playwright-skill

von lackeyjb · lackeyjb/playwright-skill

Claude writes and runs custom Playwright scripts on-demand — headed browser, real output — no pre-baked test library to memorize.

Rather than shipping fixed helper functions, this skill teaches Claude to write bespoke Playwright code per task and execute it via run.js. The browser runs visibly by default so you can watch. Playwright API docs load on-demand so Claude has context without blowing the window.

▶ Demo ansehen 📦 Installieren 💡 Anwendungsfälle

Warum nutzen

Hauptfunktionen

Live-Demo

In der Praxis

playwright-skill.replay ▶ bereit
0/0

Installation

Repository des Autors · Offizielle Dokumentation zu Claude Skills

Anwendungsfälle

Praxisnahe Nutzung: playwright-skill

Write a smoke test for a signup flow on demand

👤 Developers who want a test without hand-writing Playwright ⏱ ~10 min beginner

Wann einsetzen: You pushed a new signup flow and want to know it still works end-to-end.

Voraussetzungen
  • Node + Playwright installable — The skill will install browsers via npx playwright install if missing
Ablauf
  1. Describe the flow
    Use the playwright skill. Open localhost:3000, sign up with [email protected] / Pass123!, verify we land on /dashboard.✓ Kopiert
    → Claude writes a Playwright script, runs it headed, reports pass/fail
  2. Debug failures interactively
    It failed at the email input — add a screenshot right before the error.✓ Kopiert
    → Next run captures and returns the screenshot

Ergebnis: A one-off smoke test you can optionally save as a persistent spec.

Fallstricke
  • Selectors chosen are brittle (e.g. nth-child) — Ask Claude to prefer role/label selectors
Kombinieren mit: filesystem

Spot-check responsive rendering across 3 viewports

👤 Frontend devs validating a layout change ⏱ ~5 min beginner

Wann einsetzen: You changed the header and want to see how it renders on desktop, tablet, and mobile.

Ablauf
  1. Request screenshots
    Use playwright to screenshot localhost:3000 at 1440, 768, and 390 width. Save them.✓ Kopiert
    → 3 PNGs saved and paths returned

Ergebnis: Three screenshots for quick visual review.

Fallstricke
  • Screenshots don't wait for fonts/images — Add a networkidle wait before snapping
Kombinieren mit: filesystem

Kombinationen

Mit anderen MCPs für 10-fache Wirkung

playwright-skill + filesystem

Save test specs and screenshots alongside the code they test

Write the smoke test and save it under tests/e2e/signup.spec.js.✓ Kopiert
playwright-skill + github

Run the test, fail the workflow, post results on the PR

Run the playwright spec against the deploy preview, then post results as a comment on PR #42.✓ Kopiert
playwright-skill + ios-simulator-skill

Playwright for web, ios-simulator-skill for native — use both in a cross-platform test session

Run the playwright web flow and the ios-simulator native flow in sequence, report both.✓ Kopiert

Werkzeuge

Was dieses MCP bereitstellt

WerkzeugEingabenWann aufrufenKosten
Custom Playwright script generation task description Any browser automation ask 0
run.js executor script path After script generation 0
Headed/headless toggle flag CI vs local debugging 0

Kosten & Limits

Was der Betrieb kostet

API-Kontingent
None
Tokens pro Aufruf
1-5k per test run, depending on how much Playwright reference Claude pulls in
Kosten in €
Free — you only need Node + Playwright browsers on disk
Tipp
Keep prompts focused; don't ask for 'test everything' in one shot.

Sicherheit

Rechte, Secrets, Reichweite

Credential-Speicherung: No credentials in the skill. If your tests hit authenticated pages, keep creds in env vars — never in the generated script.
Datenabfluss: Only to sites your test visits

Fehlerbehebung

Häufige Fehler und Lösungen

'browserType.launch: Executable doesn't exist'

Run npx playwright install chromium

Prüfen: npx playwright --version
Selector fails intermittently

Switch to role/label selectors; add await expect(...).toBeVisible() waits.

Script hangs

Claude likely forgot to close the browser. Tell it to always wrap in try/finally with await browser.close().

Alternativen

playwright-skill vs. andere

AlternativeWann stattdessenKompromiss
playwright MCPYou want structured MCP tools (click, fill, snapshot) rather than code generationMCP abstracts away code; this skill writes real scripts you can reuse
Puppeteer skills / chrome-devtools MCPChrome-only workflows, DevTools protocol featuresLess cross-browser

Mehr

Ressourcen

📖 Offizielle README auf GitHub lesen

🐙 Offene Issues ansehen

🔍 Alle 400+ MCP-Server und Skills durchsuchen