Captura de ventana gráfica

Una captura de ventana gráfica registra solo la parte de una página web visible en la ventana del navegador, es decir, la ventana gráfica (viewport), con su tamaño y posición de desplazamiento actuales. El contenido situado por encima o por debajo del área visible no se incluye. El tamaño de la imagen es igual al de la ventana gráfica multiplicado por el factor de escala del dispositivo, por ejemplo 1920×1080 con 1x o 3840×2160 con 2x.

En el desarrollo web, la ventana gráfica es el área donde se renderiza la página, medida en píxeles CSS. No incluye los elementos del navegador, como la barra de pestañas y la barra de direcciones. Por eso una captura de ventana gráfica muestra la página tal como la ve primero un visitante, sin la interfaz del navegador alrededor.

Captura de ventana gráfica frente a captura de página completa

Una captura de ventana gráfica muestra una pantalla de contenido, igual que la que ve un visitante al llegar. Una captura de página completa renderiza todo el documento de arriba abajo en una sola imagen. Las capturas de ventana gráfica son más pequeñas, más rápidas y más fáciles de comparar. Las capturas de página completa muestran todo, pero pueden ser muy altas y pueden romper maquetaciones basadas en la altura de la ventana gráfica.

Dónde se usan las capturas de ventana gráfica

• Revisión de la primera pantalla de una página de inicio.
• Miniaturas y vistas previas de enlaces.
• Pruebas de regresión visual centradas en la cabecera y en la zona principal.
• Comprobaciones responsivas con tamaños de dispositivo fijos.

Tamaños de ventana gráfica y captura responsiva

El ancho de la ventana gráfica determina qué maquetación responsiva muestra la página. Una ventana gráfica de 390 píxeles de ancho activa la maquetación de teléfono, mientras que 1920 muestra la de escritorio. Website Capture de Temposhot ofrece Desktop 1920×1080, Tablet 768×1024 y Mobile 390×844, con Area definido como Viewport o Full page para cada URL.

Errores comunes con las capturas de ventana gráfica

• Capturar antes de que la página termine de cargar o de animarse.
• Dejar un banner de cookies que cubre la ventana gráfica.
• Esperar que aparezca contenido que está por debajo del pliegue.
• Comparar capturas tomadas con factores de escala distintos.

¿Tomas las mismas capturas una y otra vez?

Añade las URL en Website Capture, define Viewport y un dispositivo, e inicia una ejecución con hasta 10 Concurrent browsers. Consulta las opciones de captura.

Preguntas frecuentes

¿Qué significa "above the fold"?

El contenido visible sin desplazarse, que es lo que muestra una captura de ventana gráfica.

¿Una captura de ventana gráfica incluye la barra de direcciones?

No. Solo contiene la página renderizada.

Fuentes

• Viewport (MDN glossary)
• Playwright screenshots guide

Recursos relacionados

• Inicio rápido de Website Capture: primera ejecución con una lista de URL.
• Opciones de Website Capture: ajustes de dispositivo, área y espera.
• Comprobador de resolución de capturas: verifica el tamaño de la imagen.