Captura de pantalla de Safari

Un servidor MCP Node.js para capturar capturas de pantalla usando Safari en macOS.

Características

• Capturar capturas de pantalla de ventanas en tamaños específicos

• Admite diferentes niveles de zoom

• Tiempos de espera configurables para la carga de la página

• Limpiar después de la captura

• Calidad de captura de pantalla nativa de macOS

Related MCP server: Website Screenshot MCP

Uso

import { takeScreenshot } from './screenshot.js';

// Basic window screenshot
await takeScreenshot({
	url: 'https://www.apple.com',
	outputPath: './screenshot.png',
	width: 1024, // Optional: window width (default: 1024)
	height: 768, // Optional: window height (default: 768)
	waitTime: 3, // Optional: seconds to wait for load (default: 3)
	zoomLevel: 1, // Optional: page zoom level (default: 1)
});

// Responsive design testing
await takeScreenshot({
	url: 'https://www.apple.com',
	outputPath: './mobile.png',
	width: 375, // iPhone SE width
	height: 667, // iPhone SE height
	zoomLevel: 1,
});

// High-resolution capture
await takeScreenshot({
	url: 'https://www.apple.com',
	outputPath: './desktop-hd.png',
	width: 1920, // Full HD width
	height: 1080, // Full HD height
	waitTime: 5, // Wait longer for HD content
	zoomLevel: 0.8, // Zoom out slightly
});

Requisitos

• macOS

• Safari

• Node.js >= 14.0.0

• El terminal necesita permisos de accesibilidad (Preferencias del Sistema → Seguridad y Privacidad → Privacidad → Accesibilidad)

Instalación

npm install safari-screenshot

Opciones

Tamaños de ventana gráfica comunes

El módulo se prueba con estos tamaños de ventana gráfica comunes:

• Escritorio: 1920×1080 (Full HD)

• Portátil: 1366×768

• Tableta horizontal: 1024×768

• Tableta vertical: 768×1024

• Móvil grande: 428×926 (iPhone 12 Pro Max)

• Móvil Medio: 390×844 (iPhone 12 Pro)

• Móvil pequeño: 375×667 (iPhone SE)

Cómo funciona

1. Abre Safari con el tamaño de ventana especificado

2. Carga la URL y espera a que se cargue la página.

3. Aplica nivel de zoom si se especifica

4. Utiliza la captura de pantalla nativa de macOS para obtener resultados con píxeles perfectos.

5. Verifica que la captura de pantalla se haya realizado correctamente

6. Limpia las ventanas de Safari

Permisos

Este paquete requiere permisos de Eventos del sistema para funcionar:

1. Abra Preferencias del Sistema > Seguridad y privacidad > Privacidad > Accesibilidad

2. Agregue Terminal (o su IDE) a la lista de aplicaciones permitidas

Uso con cursor

Configuración en el cursor

1. Cursor abierto

2. Vaya a configuración, "Agregar servidor MCP"

3. En el cuadro de diálogo de configuración:

   • Nombre: safari-screenshot

   • Tipo: command

   • Comando: npx -y @rogerheykoop/mcp-safari-screenshot

   O para el desarrollo local:

   • Comando: npx -y /path/to/mcp-safari-screenshot/server.js

Comandos de ejemplo

Después de conectarse al servidor en Cursor, puede utilizar estos comandos:

Take a screenshot of https://apple.com at desktop size

Respuesta: Capturará a 1920×1080

Capture https://apple.com on iPhone 12 Pro

Respuesta: Capturará a 390×844

Screenshot github.com at 50% zoom

Respuesta: Capturará con zoomNivel: 0,5

Parámetros admitidos

El servidor MCP entiende estos conceptos:

• Nombres de dispositivos (por ejemplo, "iPhone", "iPad", "escritorio")

• Dimensiones (por ejemplo, "1024x768")

• Niveles de zoom (por ejemplo, "zoom 50%", "zoom 2x")

• Tiempos de espera (por ejemplo, "esperar 5 segundos")

Flujos de trabajo de ejemplo

1. Pruebas de respuesta

   Take screenshots of apple.com on iPhone, iPad, and desktop

2. Prueba de Zoom

   Capture github.com at 75% zoom and 125% zoom

3. Tamaño personalizado

   Screenshot example.com at 1440x900

Consejos

• Las capturas de pantalla se guardan en el directorio screenshots de forma predeterminada.

• Los nombres de los dispositivos establecen automáticamente las dimensiones apropiadas

• El servidor se encarga de la limpieza de las ventanas de Safari.

• Utilice "esperar X segundos" para páginas de carga lenta

Solución de problemas

Si encuentra problemas:

1. Comprobar que la terminal tiene permisos de accesibilidad

2. Verificar que Safari no esté en modo de navegación privada

3. Asegúrese de que el directorio de trabajo sea escribible

4. Verifique la consola de Cursor para ver si hay mensajes de error

Licencia

Instituto Tecnológico de Massachusetts (MIT)

Pruebas locales

Puede probar la implementación de MCP directamente:

# Test discovery
echo '{"type":"discover"}' | npx -y ./server.js

# Test screenshot
echo '{"type":"execute","tool":"take_screenshot","input":"Take a screenshot of https://apple.com","requestId":"123"}' | npx -y ./server.js

Respuestas esperadas:

1. Discover recuperará las capacidades

2. Se ejecutará:

   • Registrar el progreso en stderr

   • Devuelve el resultado JSON a la salida estándar

   • Guardar captura de pantalla en ./screenshots/