/ Directorio / Playground / playwright-skill
← Todos los servidores ↗ GitHub
● Comunidad lackeyjb ⚡ Instantáneo

playwright-skill

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

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

playwright-skill.replay ▶ listo
0/0

Instalación

Repositorio del autor · Documentación oficial de Skills de Claude

Casos de uso

Usos del mundo real: playwright-skill

Write a smoke test for a signup flow on demand

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

Cuándo usarlo: You pushed a new signup flow and want to know it still works end-to-end.

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

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

Errores comunes
  • Selectors chosen are brittle (e.g. nth-child) — Ask Claude to prefer role/label selectors
Combinar con: filesystem

Spot-check responsive rendering across 3 viewports

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

Cuándo usarlo: You changed the header and want to see how it renders on desktop, tablet, and mobile.

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

Resultado: Three screenshots for quick visual review.

Errores comunes
  • Screenshots don't wait for fonts/images — Add a networkidle wait before snapping
Combinar con: filesystem

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

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

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
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

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
None
Tokens por llamada
1-5k per test run, depending on how much Playwright reference Claude pulls in
Monetario
Free — you only need Node + Playwright browsers on disk
Consejo
Keep prompts focused; don't ask for 'test everything' in one shot.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: No credentials in the skill. If your tests hit authenticated pages, keep creds in env vars — never in the generated script.
Salida de datos: Only to sites your test visits

Resolución de problemas

Errores comunes y soluciones

'browserType.launch: Executable doesn't exist'

Run npx playwright install chromium

Verificar: 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().

Alternativas

playwright-skill vs otros

AlternativaCuándo usarlaContrapartida
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

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills