Webpage Screenshot MCP Server

Captura de pantalla de la página web del servidor MCP

Un servidor MCP (Protocolo de Contexto de Modelo) que captura capturas de pantalla de páginas web con Puppeteer. Este servidor permite a los agentes de IA verificar visualmente las aplicaciones web y ver su progreso al generarlas.

Características

• Capturas de pantalla de página completa : captura páginas web completas o solo la ventana gráfica
• Capturas de pantalla de elementos : seleccione elementos específicos mediante selectores CSS
• Múltiples formatos : Compatibilidad con formatos PNG, JPEG y WebP
• Opciones personalizables : establezca el tamaño de la ventana gráfica, la calidad de la imagen, las condiciones de espera y los retrasos
• Codificación Base64 : devuelve capturas de pantalla como imágenes codificadas en base64 para una fácil integración
• Soporte de autenticación : inicio de sesión manual y persistencia de cookies
• Integración del navegador predeterminado : utilice el navegador predeterminado de su sistema para una experiencia más natural
• Persistencia de la sesión : mantenga abiertas las sesiones del navegador para flujos de trabajo de varios pasos

Instalación

Uso

Herramientas

Este servidor MCP proporciona varias herramientas:

1. iniciar sesión y esperar

Abre una página web en una ventana visible del navegador para el inicio de sesión manual, espera a que el usuario complete el inicio de sesión y luego guarda las cookies.

• url (obligatorio): La URL de la página de inicio de sesión
• waitMinutes (opcional): Máximo de minutos de espera para iniciar sesión (predeterminado: 5)
• successIndicator (opcional): selector CSS o patrón de URL que indica un inicio de sesión exitoso
• useDefaultBrowser (opcional): si se debe utilizar el navegador predeterminado del sistema (valor predeterminado: verdadero)

2. página de captura de pantalla

Captura una captura de pantalla de una URL determinada y la devuelve como una imagen codificada en base64.

• url (obligatorio): La URL de la página web de la que se capturará la captura de pantalla.
• fullPage (opcional): si se debe capturar la página completa o solo la ventana gráfica (valor predeterminado: verdadero)
• width (opcional): Ancho de la ventana gráfica en píxeles (predeterminado: 1920)
• height (opcional): altura de la ventana gráfica en píxeles (predeterminado: 1080)
• format (opcional): Formato de imagen: "png", "jpeg" o "webp" (predeterminado: "png")
• quality (opcional): Calidad de la imagen (0-100), solo aplicable para jpeg y webp
• waitFor (opcional): cuándo considerar que la página está cargada: "load", "domcontentloaded", "networkidle0" o "networkidle2" (predeterminado: "networkidle2")
• delay (opcional): retraso adicional en milisegundos después de la carga de la página (predeterminado: 0)
• useSavedAuth (opcional): si se deben utilizar cookies guardadas del inicio de sesión anterior (valor predeterminado: verdadero)
• reuseAuthPage (opcional): si se debe utilizar la página autenticada existente (predeterminado: falso)
• useDefaultBrowser (opcional): si se debe utilizar el navegador predeterminado del sistema (predeterminado: falso)
• visibleBrowser (opcional): si se debe mostrar la ventana del navegador (predeterminado: falso)

3. elemento de captura de pantalla

Captura una captura de pantalla de un elemento específico en una página web utilizando un selector CSS.

• url (obligatorio): La URL de la página web
• selector (obligatorio): selector CSS para el elemento que se va a capturar en captura de pantalla
• waitForSelector (opcional): si se debe esperar a que aparezca el selector (valor predeterminado: verdadero)
• format (opcional): Formato de imagen: "png", "jpeg" o "webp" (predeterminado: "png")
• quality (opcional): Calidad de la imagen (0-100), solo aplicable para jpeg y webp
• padding (opcional): relleno alrededor del elemento en píxeles (predeterminado: 0)
• useSavedAuth (opcional): si se deben utilizar cookies guardadas del inicio de sesión anterior (valor predeterminado: verdadero)
• useDefaultBrowser (opcional): si se debe utilizar el navegador predeterminado del sistema (predeterminado: falso)
• visibleBrowser (opcional): si se debe mostrar la ventana del navegador (predeterminado: falso)

4. borrar cookies de autenticación

Borra las cookies de autenticación guardadas para un dominio específico o para todos los dominios.

• url (opcional): URL del dominio para el que se borrarán las cookies. Si no se proporciona, se borran todas las cookies.

Modo de navegador predeterminado

El modo de navegador predeterminado te permite usar el navegador habitual de tu sistema (Chrome, Edge, etc.) en lugar del Chromium incluido en Puppeteer. Esto es útil para:

1. Usando sus sesiones y extensiones de navegador existentes
2. Iniciar sesión manualmente en sitios web con sus credenciales guardadas
3. Tener una experiencia de navegación más natural para flujos de trabajo de varios pasos
4. Prueba con el mismo entorno de navegador que tus usuarios

Para habilitar el modo de navegador predeterminado, configure useDefaultBrowser: true y visibleBrowser: true en los parámetros de su herramienta.

Cómo funciona el modo de navegador predeterminado

Cuando habilita el modo de navegador predeterminado:

1. La herramienta intentará localizar el navegador predeterminado de su sistema (Chrome, Edge, etc.)
2. Inicia su navegador con la depuración remota habilitada en un puerto aleatorio
3. Puppeteer se conecta a esta instancia del navegador en lugar de iniciar la suya propia.
4. Sus perfiles, extensiones y cookies existentes están disponibles durante la sesión
5. La ventana del navegador permanece visible para que puedas interactuar con ella manualmente.

Este modo es particularmente útil para flujos de trabajo que requieren autenticación o interacciones complejas del usuario.

Persistencia del navegador

El servidor MCP puede mantener una sesión de navegador persistente en múltiples llamadas de herramientas:

1. Cuando utiliza login-and-wait , la sesión del navegador se mantiene abierta
2. Las llamadas posteriores a screenshot-page o al screenshot-element con reuseAuthPage: true utilizarán la misma página
3. Esto permite flujos de trabajo de varios pasos sin tener que volver a autenticarse.

Gestión de cookies

Las cookies se guardan automáticamente para cada dominio que visites:

1. Después de usar login-and-wait , las cookies se guardan en el directorio .mcp-screenshot-cookies en su carpeta de inicio
2. Estas cookies se cargan automáticamente al visitar nuevamente el mismo dominio con useSavedAuth: true
3. Puede borrar las cookies utilizando la herramienta clear-auth-cookies

Ejemplo de flujo de trabajo: capturas de pantalla de páginas protegidas

A continuación se muestra un ejemplo de flujo de trabajo para tomar capturas de pantalla de páginas que requieren autenticación:

1. Fase de inicio de sesión manual

Esto abrirá su navegador predeterminado con la página de inicio de sesión. Puede iniciar sesión manualmente y, una vez completado (ya sea al detectar el indicador de éxito o al salir de la página de inicio de sesión), se guardarán las cookies de sesión.

2. Tomar capturas de pantalla usando una sesión guardada

Esto tomará una captura de pantalla de la página de la cuenta utilizando las cookies de autenticación guardadas en la misma ventana del navegador.

3. Tomar capturas de pantalla de elementos específicos

4. Borrar cookies cuando termine

Este flujo de trabajo le permite interactuar con páginas protegidas como si fuera un usuario normal, completando el flujo de autenticación completo en su navegador predeterminado.

Modo sin cabeza vs. modo visible

• Modo sin cabeza ( visibleBrowser: false ): más rápido y más adecuado para flujos de trabajo automatizados donde no se necesita interacción del usuario.
• Modo visible ( visibleBrowser: true ): Muestra la ventana del navegador, lo que permite la interacción del usuario y la verificación manual. Obligatorio para useDefaultBrowser: true .

Soporte de plataforma

La detección del navegador predeterminado funciona en:

• macOS : Detecta Chrome, Edge y Safari
• Windows : detecta Chrome y Edge a través del registro o rutas de instalación comunes
• Linux : Detecta Chrome y Chromium mediante comandos del sistema

Solución de problemas

Problemas comunes

1. Navegador predeterminado no encontrado : si el sistema no puede encontrar su navegador predeterminado, recurrirá al Chromium incluido en Puppeteer.
2. Problemas de conexión : si hay problemas al conectarse al puerto de depuración del navegador, verifique si otra instancia ya está usando ese puerto.
3. Problemas con las cookies : si la autenticación no funciona, intente borrar las cookies con la herramienta clear-auth-cookies .

Depuración

El servidor MCP registra mensajes de error útiles en la consola cuando se producen problemas. Consulte estos mensajes para obtener información sobre la solución de problemas.