playwright-skill MCP — Casos de uso, Instalar & Demo en vivo

Por qué usarlo

Características clave

Patrones de localizadores basados en roles y accesibles (evita la fragilidad de CSS/XPath)
Idiomas de stubbing de red y mocking de respuestas
Fixtures para reutilizar estado de autenticación entre pruebas
Captura de trazas + flujo de depuración a través del trace viewer
Guía de paralelismo y sharding
Mitigación de inestabilidad: aserciones web-first, política de reintentos

Demo en vivo

Cómo se ve en la práctica

playwright-skill-2.replay ▶ listo

0/0

Instalar

Elige tu cliente

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

Abre Claude Desktop → Settings → Developer → Edit Config. Reinicia después de guardar.

~/.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 usa el mismo esquema mcpServers que Claude Desktop. La configuración del proyecto prevalece sobre la global.

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

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "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
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json

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

Continue usa un array de objetos de servidor en lugar de un mapa.

~/.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"
        ]
      }
    }
  }
}

Añádelo a context_servers. Zed recarga en caliente al guardar.

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

Un solo comando. Verifica con claude mcp list. Quita con claude mcp remove.

Casos de uso

Usos del mundo real: playwright-skill

Cómo escribir tu primer test E2E mantenible

👤 Desarrolladores que agregan Playwright a un proyecto por primera vez ⏱ ~30 min beginner

Cuándo usarlo: Tienes una URL de staging y un flujo de inicio de sesión; quieres una prueba sólida antes de escalar.

Requisitos previos

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

Flujo

Describe el flujo

Escribe un test de Playwright para login en staging.example.com: email, contraseña, espera encabezado del dashboard. Usa solo localizadores basados en roles.✓ Copiado

→ Test usando getByRole, getByLabel; sin .class o xpath
Agrega fixture de reutilización de autenticación

Convierte el login en una fixture de autenticación reutilizable para que otras pruebas omitan el inicio de sesión.✓ Copiado

→ fixture basada en storageState + globalSetup
Asegura no-inestabilidad

Audita el test para anti-patrones waitFor*; cambia a aserciones web-first.✓ Copiado

→ expect(locator).toBeVisible() en lugar de waitForSelector

Resultado: Un primer test robusto más una fixture que hereda toda la suite.

Errores comunes

Claude recurre a page.waitForTimeout — Dile al skill explícitamente: sin esperas arbitrarias, usa aserciones web-first

Stubifica una API backend para probar casos edge del frontend

👤 Ingenieros frontend probando estados vacío/error/cargando ⏱ ~25 min intermediate

Cuándo usarlo: No puedes poner fácilmente el backend real en cada estado.

Flujo

Stubifica el endpoint

Stubifica GET /api/orders para devolver un array vacío, luego aserta que se renderiza el estado vacío.✓ Copiado

→ route.fulfill con cuerpo JSON; aserción sobre elemento empty-state
Varía respuestas por test

Parametriza el stub: un test para error 500, uno para timeout, uno para datos parciales.✓ Copiado

→ Tres tests compartiendo un helper

Resultado: Cobertura de estados edge sin tocar el backend.

Errores comunes

Stub se filtra entre tests — Configura en beforeEach o scope de fixture, no en un hook de nivel de módulo

Depura un test inestable usando trace viewer

👤 Ingenieros clasificando una suite inestable en CI ⏱ ~45 min intermediate

Cuándo usarlo: Un test pasa localmente, falla el 5% del tiempo en CI.

Flujo

Captura traza en reintento

Configura trace: 'on-first-retry' en playwright.config.ts.✓ Copiado

→ Diff de config
Analiza la traza

Descarga trace.zip de la ejecución CI fallida; camina conmigo a través de lo que es diferente de la ejecución exitosa.✓ Copiado

→ Diff concreto en timing de red/DOM
Arregla

Basado en la traza, propón el cambio mínimo para desinestabilizar.✓ Copiado

→ Cambio de localizador o aserción específico, no un sleep general

Resultado: Un test desinestabilizado con causa raíz documentada.

Errores comunes

Tratar inestabilidades aumentando timeouts — La mayoría de las inestabilidades son race conditions ocultas — la traza generalmente revela un await faltante

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

playwright-skill-2 + seo-audit-skill

Playwright captura páginas, SEO audit se ejecuta contra HTML renderizado para apps con mucho JS

Usa Playwright para autenticarte y capturar páginas autenticadas, luego ejecuta seo-audit contra cada una.✓ Copiado

Herramientas

Lo que expone este MCP

Herramienta	Entradas	Cuándo llamar
Locator patterns	-	Escribir nuevos selectores
Network stubbing	-	Probar estados edge del frontend
Fixtures & auth reuse	-	Escalar una suite más allá de 5 tests
Trace analysis	trace.zip	Depurar inestabilidades
Parallelism & sharding	-	Suites ejecutándose >5 min en CI

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API: Ninguno
Tokens por llamada: Generación de test: 3-8k tokens
Monetario: Gratuito
Consejo: Genera un test manualmente, guárdalo como plantilla, y haz que Claude siga la plantilla para otros.

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Credenciales de test en .env (vía dotenv). Nunca hagas commit de storageState.json con autenticación de producción.

Salida de datos: Los tests golpean tu URL destino. Sin llamadas de terceros desde el skill.

storageState.json contiene cookies de sesión. Gitignóralo y no lo cargues como artefacto CI públicamente.

Resolución de problemas

Errores comunes y soluciones

Test es inestable solo en CI

Habilita trace: 'on-first-retry' y analiza la traza del intento fallido.

Verificar: npx playwright show-trace trace.zip

getByRole no encuentra un elemento que claramente está ahí

El elemento puede carecer de un nombre accesible. Usa Playwright Inspector para ver el rol/nombre computado.

Verificar: npx playwright test --ui

Fixture de login funciona localmente, falla en CI

CI puede necesitar --headed=false e instalación explícita del navegador. Ejecuta npx playwright install --with-deps en CI.

Alternativas

playwright-skill vs otros

Alternativa	Cuándo usarla	Contrapartida
Cypress	Prefieres UX de Cypress y depuración en navegador real	Filosofía de localizador diferente; menos paralelismo

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills