/ Annuaire / Playground / playwright-skill
← Tous les serveurs ↗ GitHub
● Communauté lackeyjb ⚡ Instantané

playwright-skill

par 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.

▶ Voir la démo 📦 Installer 💡 Cas d'usage

Pourquoi l'utiliser

Fonctionnalités clés

Démo en direct

Aperçu en pratique

playwright-skill.replay ▶ prêt
0/0

Installation

Dépôt de l’auteur · Documentation officielle des Skills Claude

Cas d'usage

Usages concrets : playwright-skill

Write a smoke test for a signup flow on demand

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

Quand l'utiliser : You pushed a new signup flow and want to know it still works end-to-end.

Prérequis
  • Node + Playwright installable — The skill will install browsers via npx playwright install if missing
Déroulement
  1. Describe the flow
    Use the playwright skill. Open localhost:3000, sign up with [email protected] / Pass123!, verify we land on /dashboard.✓ Copié
    → 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.✓ Copié
    → Next run captures and returns the screenshot

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

Pièges
  • Selectors chosen are brittle (e.g. nth-child) — Ask Claude to prefer role/label selectors
Combiner avec : filesystem

Spot-check responsive rendering across 3 viewports

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

Quand l'utiliser : You changed the header and want to see how it renders on desktop, tablet, and mobile.

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

Résultat : Three screenshots for quick visual review.

Pièges
  • Screenshots don't wait for fonts/images — Add a networkidle wait before snapping
Combiner avec : filesystem

Combinaisons

Associez-le à d'autres MCPs pour un effet X10

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.✓ Copié
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.✓ Copié
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.✓ Copié

Outils

Ce que ce MCP expose

OutilEntréesQuand appelerCoût
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

Coût et limites

Coût d'exécution

Quota d'API
None
Tokens par appel
1-5k per test run, depending on how much Playwright reference Claude pulls in
Monétaire
Free — you only need Node + Playwright browsers on disk
Astuce
Keep prompts focused; don't ask for 'test everything' in one shot.

Sécurité

Permissions, secrets, portée

Stockage des identifiants : No credentials in the skill. If your tests hit authenticated pages, keep creds in env vars — never in the generated script.
Sortie de données : Only to sites your test visits

Dépannage

Erreurs courantes et correctifs

'browserType.launch: Executable doesn't exist'

Run npx playwright install chromium

Vérifier : 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().

Alternatives

playwright-skill vs autres

AlternativeQuand l'utiliserCompromis
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

Plus

Ressources

📖 Lire le README officiel sur GitHub

🐙 Voir les issues ouvertes

🔍 Parcourir les 400+ serveurs MCP et Skills