Automatiza Capturas de Pantalla de Sitios Web con la API de Screenshots de PageOps

Introducción

Capturar manualmente capturas de pantalla de sitios web es una tarea que consume mucho tiempo y no es confiable. Para los desarrolladores que construyen herramientas de monitoreo, pruebas de regresión visual, sistemas de seguimiento de competidores o pipelines de web scraping, es esencial disponer de una forma programática de capturar estas capturas de pantalla.

Con la Screenshot API, puedes simplemente enviar una petición HTTP y recibir una captura de pantalla renderizada. La API ejecuta un navegador headless en la nube, por lo que no necesitas gestionar ninguna infraestructura.

Por quÉ los Desarrolladores Necesitan Capturas de Pantalla Web

Las capturas de pantalla automatizadas son un requisito común en aplicaciones modernas. Los casos de uso típicos incluyen:

Monitoreo de Sitios Web: Captura capturas de pantalla periódicamente para detectar cambios en la UI, problemas de diseño o tiempos de inactividad.
Pruebas de Regresión Visual: Los equipos de QA comparan capturas de pantalla entre despliegues para encontrar errores de interfaz.
Web Scraping y Pipelines de Datos: Las capturas de pantalla pueden ser más simples y confiables que analizar estructuras DOM complejas.
Generación de Vistas Previa para Redes Sociales: Genera automáticamente imágenes para OpenGraph, Twitter Card o vistas previas de enlaces.

Cómo Funciona la Screenshot API

Usar la Screenshot API es sencillo:

Envía una petición con la URL objetivo.
El navegador headless en la nube renderiza la página.
La API captura la captura de pantalla.
Recibes la captura de pantalla o su URL.

Ejemplo en JavaScript

const response = await fetch("https://api.page-ops.com/api/v1/screenshots", {
  method: "POST",
  headers: {
    "Content-Type": "application/json",
    "Authorization": "Bearer YOUR_API_KEY"
  },
  body: JSON.stringify({
    url: "https://example.com",
    mode: "sync",
    timeoutMs: 8000,
    fullPage: false
  })
});

const data = await response.json();
console.log(data.result?.url);

Ejemplo con cURL

curl -X POST "https://api.page-ops.com/api/v1/screenshots" \
  -H "Authorization: Bearer $SCREENSHOT_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://example.com",
    "mode": "sync",
    "timeoutMs": 8000,
    "fullPage": false
  }'

Nota: En modo síncrono (mode=sync), fullPage debe ser false y timeoutMs debe estar entre 0 y 10000 ms. De lo contrario, el servidor volverá automáticamente al modo asíncrono.

Opciones Avanzadas de Captura de Pantalla

La Screenshot API admite varios parámetros avanzados:

Capturas de Pantalla de Página Completa: Captura toda la página (disponible en modo asíncrono).
Viewports Personalizados: Emula dispositivos de escritorio, móviles o tabletas.
Condiciones de Espera: Espera a elementos DOM específicos o peticiones de red antes de capturar.
Capturas por Selector: Captura únicamente un elemento específico de la página.
Cabeceras y Cookies: Pasa información de autenticación o cookies de sesión.
Retraso en la Captura: Usa delayMs para añadir un retraso extra después de la carga de la página.

{
  "url": "https://example.com/pricing",
  "selector": "#pricing"
}

Peticiones Síncronas vs Asíncronas

Modo asíncrono (por defecto): Devuelve un jobId, luego sondea GET /api/v1/screenshots/{jobId} hasta que el status sea completed, failed o expired.

Modo síncrono: La petición se bloquea hasta que la captura de pantalla está lista (o se agota el tiempo de espera), devolviendo la URL de la captura directamente. Si se agota el tiempo, la API devuelve status=processing, y puedes continuar sondeando usando el endpoint GET.

Preguntas Frecuentes (FAQ)

P1: ¿Cómo puedo capturar una página protegida?
Usa los parámetros headers o cookies para pasar la información de autenticación.
P2: ¿Puedo usar el modo síncrono para capturas de pantalla de página completa?
No, las capturas de pantalla de página completa requieren el modo asíncrono.
P3: ¿Cómo obtengo la captura de pantalla final en modo asíncrono?
Sondea GET /api/v1/screenshots/{jobId} hasta que status=completed.