Captura de antes y después
Cómo funcionan los pares de capturas de antes y después, dónde se usan y cómo crear comparaciones eficaces.
Una captura de antes y después es un par de imágenes del mismo sujeto, una tomada antes de un cambio y otra después. El par se muestra lado a lado, apilado o como una superposición con un control deslizante, para que la diferencia se vea de un vistazo.
Una comparación justa mantiene todo constante excepto el cambio. Las dos imágenes necesitan la misma área de captura, el mismo tamaño de ventana gráfica, la misma densidad de píxeles, la misma posición de desplazamiento y el mismo estado de la aplicación, como la misma cuenta con sesión iniciada y los mismos datos de prueba. Si la segunda imagen se desplaza aunque sea unos pocos píxeles, el contenido sin cambios también parece distinto en una comparación de píxeles.
Por qué importa el antes y el después
Una captura individual muestra un estado. Un par muestra un cambio, que es lo que suelen necesitar los revisores, los clientes y los responsables para evaluarlo. Además, registra cómo se veía la pantalla antes del cambio, algo difícil de reconstruir más tarde.
Dónde se usan las capturas de antes y después
- Notas de versión y registros de cambios que muestran una pantalla rediseñada.
- Informes de errores y confirmaciones de correcciones.
- Revisiones de diseño y accesibilidad, como una corrección de contraste.
- Informes para clientes sobre actualizaciones del sitio.
Cómo crear pares eficaces de antes y después
- Captura primero la imagen de "antes", antes de que se publique cualquier cambio.
- Registra los ajustes: tamaño de la ventana, área, nivel de zoom, tema y datos de prueba.
- Captura la imagen de "después" con los mismos ajustes.
- Exporta ambas en el mismo formato y preséntalas con etiquetas equivalentes.
En páginas web, ejecuta Website Capture de Temposhot dos veces con la misma URL y los mismos ajustes de Device y Area. En aplicaciones de escritorio, usa la fuente Custom Area en Auto Capture. El selector se abre en el área guardada, así que la segunda captura usa el mismo rectángulo.
Errores comunes
- Comparar una captura Retina con una captura 1x. Cada píxel tiene un tamaño distinto.
- Cambiar el zoom del navegador, el tema o el tamaño de la ventana entre capturas.
- Olvidarse de capturar el "antes" hasta que el cambio ya está publicado.
- Recortar las dos imágenes de forma distinta.
¿Tomas las mismas capturas una y otra vez?
Mantén una lista de URL guardada en la automatización de capturas de sitios web y vuelve a ejecutarla antes y después de cada versión.
Preguntas frecuentes
¿Debo usar JPG o PNG para los pares de comparación?
PNG. La compresión con pérdida añade pequeñas diferencias que aparecen en las comparaciones de píxeles.
¿Cómo encuentro diferencias pequeñas?
Carga ambos archivos en Compare Images para resaltar los píxeles que cambiaron.
Fuentes
Recursos relacionados
- Opciones de Website Capture: ajustes de dispositivo, área y espera.
- Fuentes de captura: reutilizar un Custom Area guardado.
- Stitch Screenshots: une dos imágenes en un solo archivo.
¿Repites las mismas capturas de pantalla una y otra vez?
Temposhot captura una pantalla, una ventana o un área con temporizador y exporta el conjunto como PDF, imágenes, ZIP o MP4. Las herramientas gratuitas para navegador solo sirven para imágenes sueltas.
Recursos relacionados
Términos relacionados
- Comparación de capturas de pantallaQué es la comparación de capturas de pantalla, cómo funciona la diferenciación visual y dónde la usan los equipos de QA.
- Pruebas de regresión visualQué son las pruebas de regresión visual, cómo la comparación de capturas detecta errores de interfaz y los errores habituales.
- Superposición de imagenUna superposición es cualquier elemento colocado encima de una imagen: texto, flechas, un logotipo o un marco de dispositivo. Tipos principales, cómo funciona la transparencia y errores comunes.
- Captura de pantalla como pruebaQué es una captura de pantalla como prueba, en qué contextos legales y de QA se usa y cómo capturarla correctamente.
- Flujo de trabajo con capturas de pantallaQué es un flujo de trabajo con capturas de pantalla y cómo crear un proceso repetible desde la captura hasta la entrega.
- Monitorización de sitios webQué significa la monitorización de sitios web con capturas de pantalla, cómo las capturas programadas siguen los cambios visuales y los errores comunes.