Skip to main content

Pruebas de regresión visual con capturas de pantalla

Los equipos de desarrollo usan Webshot para detectar el tipo de errores que las pruebas unitarias se pierden: maquetaciones rotas, fuentes de respaldo, iconos faltantes, estados responsive estropeados. Captura staging, captura producción, compara el par. Adjunta el diff como comentario en un PR como prueba de que tu cambio es seguro (o como prueba de que acaba de aparecer un nuevo error).

🖥️ Página completa de escritorio (PNG, diffs nítidos) 📱 Página completa móvil ⚙️ Usa mejor la API gratis

Todos los botones abren el formulario de captura ya configurado. Puedes cambiar el formato y el viewport una vez que cargue la página.

Por qué Webshot para esto

Capturas precisas píxel a píxel

El modo PNG conserva el texto y los bordes nítidos: ideal para herramientas de pixel-diffing (`pixelmatch`, el `compare` de ImageMagick) donde el ruido de la compresión JPG generaría falsos positivos.

El mismo viewport en cada captura

Webshot captura exactamente con el mismo viewport, la misma posición de desplazamiento y el mismo tiempo de espera de carga de fuentes en cada ejecución: los resultados del diff son fiables.

Compatible con la API

Conecta la API gratis de Webshot a tu CI: captura antes y después del despliegue, compara con `pixelmatch` y haz que el build falle si los píxeles cambiados superan tu umbral.

Sin código repetitivo de Chrome headless

Olvídate de configurar Puppeteer, instalar fuentes y ajustar flags del sandbox. Webshot tiene todo eso funcionando en nuestra infraestructura. Tu CI solo hace una llamada HTTP.

Cómo capturar pruebas de regresión visual

  1. Elige la página o páginas que quieres monitorear: la página principal, las landing pages clave, el flujo de pago, cualquier sitio donde una regresión cause daño.
  2. Captura cada una en PNG + desktop_full + mobile_full para crear el baseline de tu aspecto actual en producción.
  3. Después de tu siguiente despliegue, vuelve a capturar las mismas URL. Compara las antiguas con las nuevas usando `pixelmatch` o ImageMagick: cualquier cambio de píxeles superior al 1 % merece revisión humana.
  4. Conéctalo a CI: un hook previo al despliegue captura staging, un hook posterior al despliegue captura producción y el build falla si el diff supera tu umbral.

Preguntas frecuentes

Usar Chrome headless en CI implica instalar Chromium, fuentes, los flags del kernel para el sandbox y, además, mantenerlo todo actualizado. Con Webshot te ahorras la instalación por completo: tu CI hace una llamada HTTP a nuestra API y recibe un PNG de vuelta. Nosotros nos encargamos de las actualizaciones de Chrome, la caché de fuentes y la protección contra SSRF.

Sí, siempre que uses PNG + el mismo viewport + la misma estrategia de espera. Webshot fija el tamaño del viewport y espera a fonts.ready + network-idle + cualquier animación declarada mediante la consulta `prefers-reduced-motion`. Las animaciones aleatorias (bucles de lottie, fondos con Date.now()) generarán un diff distinto en cada ejecución; congélalas en tu entorno de pruebas.

No en una sola llamada: capturas cada URL por separado y luego las comparas con una biblioteca aparte. Mantenemos la API centrada en la captura; el diffing es un script de 30 líneas. Consulta `/developers` para ver código de ejemplo.

Sí. Webshot espera a network-idle (sin peticiones durante 500ms) y a fonts.ready antes de capturar, de modo que las apps de React, Vue, Svelte y Next.js se renderizan por completo antes de la captura. Para sitios que nunca alcanzan network-idle (long polling, websockets), puedes pasar un parámetro `maxWait` a través de la API.

El formulario público gratis permite 5 cada 15 minutos por IP: demasiado poco para CI. El nivel gratuito de la API es más generoso; consulta `/developers`. Para pruebas de regresión de alto volumen (más de 50 capturas por build), el plan comercial de la API elimina los límites por IP.

Webshot solo captura: la capa de diffing la pones tú. Solución en dos líneas: `npx pixelmatch baseline.png new.png diff.png`. O usa un servicio gestionado de visual-diff (Percy, Chromatic, BackstopJS) y aliméntalo con los PNG de Webshot.

¿Listo para capturar?

Gratis, sin registro, sin marca de agua. Solo pega una URL.

📸 Abrir el formulario de captura

Otros casos de uso: Capturas de Google Maps · Capturas de WordPress · QA de landing pages · Capturas como prueba legal · Capturas de redes sociales · Ver todos →

Share: 𝕏 Twitter Facebook LinkedIn