/ Directorio / Playground / Puppeteer
← Todos los servidores ↗ GitHub
● Oficial modelcontextprotocol ⚡ Instantáneo

Puppeteer

por modelcontextprotocol · modelcontextprotocol/servers-archived

Chrome headless en un solo MCP — navega, captura, haz clic, rellena. Más simple que Playwright cuando solo necesitas Chromium.

MCP de referencia archivado pero funcional de Anthropic. Controla Chromium headless mediante Puppeteer: navega, captura, haz clic, rellena, selecciona, pasa el ratón, y page.evaluate arbitraria. Sin funciones de accessibility-tree — trabajas con selectores CSS. Úsalo cuando Playwright te parece excesivo.

▶ Ver demo 📦 Instalar 💡 Casos de uso

Por qué usarlo

Características clave

Demo en vivo

Cómo se ve en la práctica

puppeteer.replay ▶ listo
0/0

Instalar

Elige tu cliente

~/Library/Application Support/Claude/claude_desktop_config.json  · Windows: %APPDATA%\Claude\claude_desktop_config.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

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

~/.cursor/mcp.json · .cursor/mcp.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

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": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

Haz clic en el icono MCP Servers de la barra lateral de Cline y luego en "Edit Configuration".

~/.codeium/windsurf/mcp_config.json
{
  "mcpServers": {
    "puppeteer": {
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  }
}

Mismo formato que Claude Desktop. Reinicia Windsurf para aplicar.

~/.continue/config.json
{
  "mcpServers": [
    {
      "name": "puppeteer",
      "command": "npx",
      "args": [
        "-y",
        "@modelcontextprotocol/server-puppeteer"
      ]
    }
  ]
}

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

~/.config/zed/settings.json
{
  "context_servers": {
    "puppeteer": {
      "command": {
        "path": "npx",
        "args": [
          "-y",
          "@modelcontextprotocol/server-puppeteer"
        ]
      }
    }
  }
}

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

claude mcp add puppeteer -- npx -y @modelcontextprotocol/server-puppeteer

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

Casos de uso

Usos del mundo real: Puppeteer

Captura una lista de URLs para una auditoría visual

👤 QA, diseñadores, gestores de contenido ⏱ ~10 min beginner

Cuándo usarlo: Tienes una lista de páginas y necesitas revisarlas todas después de un cambio.

Flujo
  1. Navega y captura
    Para cada URL en [list], navega, espera a que se cargue, toma una captura de pantalla de página completa llamada <slug>.png.✓ Copiado
    → N capturas de pantalla guardadas
  2. Compara con baseline (opcional)
    Compara cada captura con el archivo correspondiente en ./baseline/. Marca las que difieran más del 5% en diferencia de píxeles.✓ Copiado
    → Lista de páginas cambiadas
  3. Resume los hallazgos
    Escribe un resumen de 1 párrafo: cuántas páginas, cuántas cambiaron, cuáles probablemente necesiten revisión.✓ Copiado
    → Estado rápido que puedes pegar en la descripción de un PR

Resultado: Un conjunto de capturas listo para baseline con un informe de diferencias, sin configurar un pipeline de regresión visual.

Errores comunes
  • El contenido dinámico (fechas, banners A/B) muestra diferencias falsas — Añade puppeteer_evaluate para ocultar esos elementos mediante CSS antes de la captura
Combinar con: filesystem

Rellena un formulario repetidamente con datos de prueba

👤 Ingenieros de QA, desarrolladores backend que prueban flujos de entrada ⏱ ~15 min intermediate

Cuándo usarlo: Necesitas ejercitar un formulario con 20 variaciones de entrada para verificar la validación.

Requisitos previos
  • URL de entorno de prueba — Nunca ejecutes contra producción — monta una instancia de staging
Flujo
  1. Navega al formulario
    Abre https://staging.app/signup. Toma una captura para confirmar.✓ Copiado
    → Página cargada, formulario visible
  2. Envía casos de prueba
    Para cada caso de prueba [list: {email, password, expected_error}], rellena los campos, haz clic en enviar, y captura el texto del elemento del mensaje de error.✓ Copiado
    → Por caso: real vs esperado
  3. Reporta discrepancias
    Resume: qué casos pasaron, cuáles fallaron, cuál fue la brecha. Toma una captura de cada fallo.✓ Copiado
    → Informe de prueba con evidencia

Resultado: Cobertura de validación más allá de lo que escribirías en una especificación de Playwright, en 10 minutos.

Errores comunes
  • El estado anterior del formulario persiste entre ejecuciones — Llama a puppeteer_navigate con una URL nueva entre casos, o limpia explícitamente los campos con puppeteer_fill basado en selectores pasando una cadena vacía

Encuentra imágenes rotas o faltantes en una página

👤 Mantenedores de contenido/docs ⏱ ~10 min intermediate

Cuándo usarlo: Después de una migración o tras un cambio de CMS — imágenes rotas son comunes y vergonzosas.

Flujo
  1. Carga la página
    Abre <URL>. Espera 2 segundos a que se carguen las imágenes lazy-loaded.✓ Copiado
    → Página cargada
  2. Encuentra imágenes rotas mediante evaluate
    Ejecuta page.evaluate para devolver cada <img> donde naturalWidth === 0 — esos no se cargaron. Incluye src y alt para cada uno.✓ Copiado
    → Lista de fuentes de imágenes rotas
  3. Repite en todo el sitio
    Repite para estas 20 URLs. Genera un CSV de página, fuente-imagen-rota, texto-alt.✓ Copiado
    → CSV procesable

Resultado: Una lista concreta de correcciones de imágenes rotas con la página en la que aparecen.

Errores comunes
  • Las imágenes lazy-loaded aún no se han activado — Desplázate por la página primero con window.scrollTo(0, document.body.scrollHeight) mediante evaluate, luego espera y verifica
Combinar con: filesystem

Combinaciones

Combínalo con otros MCPs para multiplicar por 10

puppeteer + filesystem

Captura cada página y guarda como archivos de imagen para revisión

Abre cada URL en urls.txt, toma una captura de página completa, guarda en ./audit/<slug>.png.✓ Copiado
puppeteer + sentry

Reproduce un error reportado en Sentry reproduciendo la ruta del usuario

El issue WEB-3a91 de Sentry tiene breadcrumbs mostrando que el usuario hizo clic en .checkout-btn luego rellenó #card-number. Reproduce eso en Puppeteer y captura la consola.✓ Copiado

Herramientas

Lo que expone este MCP

HerramientaEntradasCuándo llamarCoste
puppeteer_navigate url Abre o redirige a una URL gratuito
puppeteer_screenshot name, selector?, width?, height? Captura la página o un elemento específico espacio de disco
puppeteer_click selector Haz clic en un elemento por selector CSS gratuito
puppeteer_fill selector, value Escribe en una entrada gratuito
puppeteer_select selector, value Elige una opción de un <select> gratuito
puppeteer_hover selector Revela menús o tooltips solo al pasar el ratón gratuito
puppeteer_evaluate script Ejecuta JS arbitrario en contexto de página — último recurso para lo que los selectores no pueden hacer gratuito

Coste y límites

Lo que cuesta ejecutarlo

Cuota de API
Gratuito — ejecución local
Tokens por llamada
Las capturas no son tokens; los selectores/cadenas son pequeños (~100 tokens por llamada)
Monetario
Gratuito
Consejo
Usa puppeteer_evaluate para extraer exactamente lo que necesitas como JSON — no hagas capturas y luego OCR

Seguridad

Permisos, secretos, alcance

Almacenamiento de credenciales: Nunca pongas credenciales de usuarios reales en prompts — usa cuentas QA dedicadas
Salida de datos: El navegador va a donde lo navegues; nada al publicador de MCP

Resolución de problemas

Errores comunes y soluciones

Error: Element not found

El elemento aún no se ha renderizado. Añade una espera corta mediante puppeteer_evaluate('await new Promise(r => setTimeout(r, 1000))') o usa un selector más específico que espere implícitamente.

Chromium fails to launch on Linux/Docker

Instala las dependencias: apt-get install -y chromium-browser o usa la imagen de Playwright MCP que tiene todo preinstalado.

Screenshots are blank

La página no se ha cargado. Después de navegar, espera a un elemento conocido: puppeteer_evaluate("document.querySelector('.main') !== null") en un bucle de sondeo antes de capturar.

Alternativas

Puppeteer vs otros

AlternativaCuándo usarlaContrapartida
Playwright MCPCualquier automatización seria del navegador — la opción estrictamente mejorInstalación ligeramente más grande, pero mejor confiabilidad mediante accessibility tree
Firecrawl MCPSolo necesitas extracción de contenido, no interacciónAlojado, cuesta créditos, pero maneja mejor anti-bot
browser-tools MCPQuieres inspeccionar TU Chrome real (con sesiones iniciadas, extensiones)Requiere una extensión de Chrome; caso de uso completamente diferente

Más

Recursos

📖 Lee el README oficial en GitHub

🐙 Ver issues abiertas

🔍 Ver todos los 400+ servidores MCP y Skills