Pruebas de capturas de pantalla píxel a píxel perfectas: por qué fallan y qué detecta los bugs visuales reales
Las pruebas de capturas píxel a píxel perfectas fallan dos veces: el ruido de renderizado da falsas alarmas y un umbral en porcentaje oculta bugs reales.Esto es lo que funciona.
Las pruebas de capturas de pantalla píxel a píxel perfectas comparan cada píxel de una captura con una imagen de referencia.Fallan dos veces: un ruido de renderizado inofensivo da falsas alarmas, y un umbral en porcentaje lo bastante flexible para callarlas deja pasar un dígito equivocado o un icono que falta.
¿Qué son las pruebas de capturas de pantalla píxel a píxel perfectas?
Definición
Las pruebas de capturas píxel a píxel perfectas son una comprobación visual que compara una nueva captura con una captura de referencia, píxel a píxel.
- Cualquier píxel cuyo color difiere cuenta como una diferencia.
- Una prueba falla cuando hay diferencias, o más de las que permite un umbral.
Es la forma más sencilla de las pruebas de regresión visual, y con la que empiezan la mayoría de los equipos.
La idea es buena: una persona juzga una pantalla mirándola, así que una prueba también debería mirarla.El problema es la medida.Una pantalla no se dibuja con los mismos píxeles en cada máquina, y los bugs que importan a menudo solo ocupan unos pocos píxeles.
No pasa nada malo
Algo está mal
Por qué la comparación píxel a píxel da falsos positivos
Un falso positivo es una prueba que falla mientras la aplicación funciona bien.En una comparación píxel a píxel, viene de todo lo que cambia píxeles sin cambiar lo que ve una persona.
| Fuente de ruido | Por qué difieren los píxeles |
|---|---|
| Suavizado de bordes | Los bordes del texto y de las formas se suavizan con colores intermedios, y ese suavizado varía de una máquina a otra. |
| Suavizado de fuentes | En Windows, ClearType dibuja el texto con leves bordes de color que dependen de la pantalla y de su configuración. |
| La tarjeta gráfica y su controlador | Los degradados, las sombras y las esquinas redondeadas pueden salir con un matiz distinto en otra tarjeta. |
| Grabación y compresión | Una imagen de referencia tomada de un vídeo guarda menos detalle de color del que muestra la pantalla real. |
| Un desplazamiento de 1 píxel | Una ventana o un diseño que se movió un píxel cambia todos los bordes de la imagen. |
| Un cursor de texto que parpadea | El cursor está encendido en una captura y apagado en la otra. |
| Un estado de paso del ratón o de foco | El puntero descansa sobre un botón en una ejecución y no en la otra, así que el botón solo está iluminado en una imagen. |
| Contenido dinámico | Una fecha, un reloj, un contador o una insignia de notificación cambian cada día. |
| Otro escalado de pantalla | Un portátil al 150 % y un monitor al 100 % dibujan el mismo botón con otros píxeles. |
Las pruebas inestables tienen también otras causas, como las esperas y los tiempos.Se tratan en pruebas inestables y falsos positivos.
Por qué un umbral de pruebas de regresión visual oculta bugs reales
La respuesta habitual al ruido es un umbral: dejar pasar la comparación mientras difiera menos de una proporción de la imagen, a menudo el 1 o el 2 %.Las falsas alarmas se acaban.Los bugs reales empiezan a pasar.
Los bugs reales pueden ser muy pequeños en la pantalla.
- Un dígito equivocado en un precio o en un total cambia unas pocas decenas de píxeles.
- Una mayúscula convertida en minúscula cambia unas pocas decenas más.
- Un icono pequeño que falta cambia unos cientos.
- En un panel o en una pantalla entera, cada uno queda muy por debajo del 1 %.
Los bugs que más cuestan suelen ser los más pequeños en la pantalla: un dígito de una factura, una palabra de un aviso legal.
Una proporción de la imagen es la medida equivocada
El ruido y los bugs se parecen cuando se cuentan en toda la imagen.Para una persona no se parecen.
- El ruido es lo que nadie ve: un borde más suave, un tono más claro, un cursor que parpadeó.
- Un cambio real es lo que una persona lee o reconoce: una letra, un dígito, un icono, un color.
Esperado
$12,480
Esta ejecución
$12,430
Medido como proporción de la imagen
Un dígito es una parte ínfima del panel, muy por debajo de un umbral del 2 %.
Pasa: el bug se escapa
Visto con los ojos de una persona
Una persona que lee el total ve enseguida el dígito equivocado, y GUI Test Studio también.
Falla: el bug se detecta
Así que la pregunta correcta no es cuánto de la imagen cambió.Es la pregunta que se hace una persona: ¿vería alguien que mira esta pantalla una diferencia?La respuesta no depende del tamaño de la imagen, así que vale para un icono pequeño y para un cuadro de diálogo entero.
Los remedios habituales para las pruebas de capturas inestables, y lo que cuestan
| Remedio | Lo que cuesta |
|---|---|
| Subir el umbral | El ruido pasa, y los bugs pequeños también. |
| Enmascarar las partes que cambian | Cada fecha, reloj e insignia se enmascara a mano, y un bug bajo una máscara nunca se ve. |
| Repetir una prueba fallida | Un fallo real tiene una segunda oportunidad de pasar por suerte, y cada ejecución tarda más. |
| Guardar una imagen de referencia por máquina | Cada navegador, sistema y escalado necesita sus propias imágenes, y cada una debe volver a tomarse después de cada cambio. |
| Congelar el entorno | Una sola imagen de máquina ejecuta cada prueba, y una prueba que pasa allí no dice nada de las pantallas de sus usuarios. |
En un framework con código como Playwright, toHaveScreenshot toma un umbral de color por píxel y un número o una proporción máxima de píxeles distintos para toda la imagen.Usted elige esos números, escribe las máscaras y guarda una imagen de referencia por navegador y plataforma, en código que usted mantiene.
Cómo compara GUI Test Studio las capturas de pantalla
GUI Test Studio crea pruebas de extremo a extremo de aplicaciones web, aplicaciones de escritorio de Windows, teléfonos Android y juegos a partir de una grabación, sin código.Cada elemento en el que hace clic o escribe recibe una aserción visual, una comprobación que guarda una pequeña imagen del elemento, su objetivo visual.Vea comprobaciones visuales.
Encontrar
La Fase de búsqueda
Comparar
La Fase de verificación
Segunda mirada
Análisis inteligente con IA
Informe
El Informe de confianza
Primero, encontrar el elemento
La Fase de búsqueda encuentra el elemento en la pantalla real, dondequiera que esté ahora.El GTS Engine + AI pregunta primero a la aplicación, mediante su información de accesibilidad o los propios elementos de la página, y encuentra el elemento a la vista cuando la aplicación no lo dice.Vea cómo encuentra GUI Test Studio cada elemento.
Después, la comparación se hace donde está el elemento.Una ventana que se movió, o un botón desplazado un píxel, no es ninguna diferencia.
Después, compararlo como lo mira una persona
La Fase de verificación compara el elemento con su objetivo visual de forma perceptiva, como lo hace el ojo humano.Nota lo que notaría una persona e ignora lo que nadie ve.
| En la pantalla | Lo que hace la Fase de verificación |
|---|---|
| Bordes suavizados y suavizado de fuentes | Ignorados: difieren de una máquina a otra, y nadie los ve. |
| Grabación y compresión | Ignorados: una imagen tomada de un vídeo conserva algo menos de detalle de color que la pantalla real, y una persona ve la misma pantalla. |
| Un desplazamiento de 1 píxel | Ignorado: el elemento se compara donde está ahora. |
| Un cursor de texto que parpadea | Ignorado, mientras que una letra cambiada a su lado se detecta. |
| Un dígito equivocado | Detectado: es lo primero que lee una persona. |
| Una mayúscula convertida en minúscula | Detectado: una persona lo ve enseguida. |
| Un color cambiado | Detectado, en cuanto una persona lo notaría: un icono rojo que pasó a naranja falla. |
| Un icono que falta | Detectado: una persona ve el hueco. |
Estados de paso del ratón y fechas
En una prueba grabada, la ejecución vuelve a poner el puntero del ratón donde estaba cuando se tomó la imagen.Un botón está iluminado en la ejecución exactamente cuando lo estaba en la grabación.
Un valor que cambia cada día no pertenece a un objetivo visual.Mantenga el objetivo sobre el propio elemento, y compruebe una fecha, un total o un contador con una aserción de texto dinámico, que comprueba su formato sea cual sea su valor.Vea comprobaciones de texto.
Y cuando una pantalla se ve distinta con razón en modo oscuro, en otro idioma o en otra pantalla, guarde una versión esperada por entorno con un perfil de línea base: vea pruebas en modo oscuro, en otros idiomas y en otras pantallas.
Comparación de píxeles frente a GUI Test Studio, caso por caso
| La diferencia | Una comparación de píxeles con un umbral en porcentaje | GUI Test Studio |
|---|---|---|
| Bordes suavizados en otra máquina | Falla si es estricta, pasa si es flexible | Pasa: nadie lo ve |
| Bordes de color del suavizado de fuentes | Falla si es estricta | Pasa: nadie lo ve |
| El elemento se movió 1 píxel | Falla: cada borde difiere | Pasa: el elemento se compara donde está |
| Un cursor de texto que parpadea | Falla si es estricta | Pasa: un cursor que parpadea se ignora |
| Un resaltado al pasar el ratón | Falla | Pasa: el puntero está donde estaba en la grabación |
| La fecha de hoy | Falla cada día | No se compara: una aserción de texto dinámico comprueba su formato |
| Un dígito equivocado | Pasa un umbral del 1 o el 2 % | Falla: una persona ve el dígito equivocado |
| Una mayúscula convertida en minúscula | Pasa un umbral del 1 o el 2 % | Falla: una persona ve la minúscula |
| Un icono pequeño que falta | Pasa en una imagen grande | Falla: una persona ve que el icono ya no está |
Cómo elegir la tolerancia de una comparación de imágenes
En GUI Test Studio, la tolerancia de una comprobación visual es su Exigencia de verificación, elegida en palabras sencillas: más estricta para los detalles finos, más tolerante para las pantallas cargadas.No hay ningún porcentaje que adivinar.
| Exigencia de verificación | Úsela para |
|---|---|
| Exacta | Imágenes que deben quedarse exactamente como están. |
| Estricta | Texto pequeño y detalles finos donde cualquier cambio importa. |
| Estándar | Los botones, etiquetas e iconos de todos los días.El valor por defecto. |
| Flexible | Zonas grandes y pantallas cargadas, como una página entera o una escena de juego. |
- 1
Seleccione la comprobación visual
Abra la prueba en GUI Test Studio y haga clic en la aserción visual en la línea de tiempo.Sus ajustes aparecen en el panel Propiedades.
- 2
Elija una Exigencia de verificación
Mantenga Estándar para los botones, etiquetas e iconos de todos los días.Elija un nivel más estricto para el texto pequeño y los detalles finos, uno más tolerante para las zonas grandes y las pantallas cargadas, y Exacta solo para una imagen que debe quedarse exactamente como está.
- 3
Deje activado Ignorar pequeños artefactos de renderizado
Está activado por defecto, así que los bordes suavizados que difieren entre máquinas se ignoran.Desactívelo solo cuando esos bordes sean lo que prueba.
- 4
Ejecute la prueba y lea el informe
Haga clic en Ejecutar prueba.El Informe de confianza resalta lo que cambió y dice en una frase por qué falló la comprobación.
- 5
Añada Instrucciones para la IA si se espera una diferencia
En Avanzado, escriba unas palabras como: ignora el tamaño de la fuente.El Análisis inteligente con IA las sigue cuando juzga esa comprobación.
La mayoría de las pruebas nunca necesitan más.Los ajustes exactos de cada nivel, y los avanzados para la rara comprobación que los necesita, están en comprobaciones visuales y los ajustes de una comprobación.
Pruebas visuales con IA: una segunda mirada en palabras sencillas
Una comparación visual dice que algo cambió y dónde.Una segunda opinión en palabras le ayuda a decidir qué hacer al respecto.Ese es el trabajo del Análisis inteligente con IA, que está desactivado hasta que usted lo active.
El puntero del ratón y el cursor de texto que parpadea nunca cuentan como diferencia para la IA.Una comprobación que pasa nunca se le envía.
Funciona con un modelo en la nube y su propia clave, o con un modelo de IA local en su propio ordenador: uno que le proporcionamos, o uno que usted aporta.Algunas diferencias son esperadas, y solo usted sabe cuáles: dé a una comprobación unas Instrucciones para la IA, como "ignora el tamaño de la fuente" o "el icono puede ser de cualquier color".Vea Análisis inteligente con IA.
Cómo leer un fallo visual
Después de una ejecución, el Informe de confianza muestra cada comprobación fallida con la imagen esperada, la imagen encontrada y lo que cambió resaltado en la pantalla.El veredicto dice en una frase qué cambió y dónde.
Cuando el cambio es intencionado, acepte el nuevo aspecto desde el informe, y la prueba lo espera desde entonces.
Qué bugs visuales se le escapan por completo a una comprobación con código es el tema de los bugs visuales que las pruebas automatizadas no detectan.
Lo esencial
- 1Las pruebas de capturas píxel a píxel perfectas fallan dos veces: el ruido de renderizado hace fallar pantallas correctas, y un umbral en porcentaje deja pasar bugs reales.
- 2El ruido es lo que nadie ve, un cambio real es lo que nota una persona: un dígito, una letra, un icono, un color.
- 3Una proporción de la imagen es la medida equivocada. Pregúntese en cambio qué vería una persona que mira la pantalla.
- 4GUI Test Studio encuentra primero el elemento y después lo compara como lo hace el ojo humano, así que el suavizado, la compresión y un cursor que parpadea nunca hacen fallar una prueba.
- 5El Análisis inteligente con IA añade una segunda mirada en palabras sencillas, y su respuesta es el veredicto final cuando usted lo activa.
Preguntas
¿Qué son las pruebas píxel a píxel perfectas?
Las pruebas píxel a píxel perfectas comparan una captura de pantalla de una aplicación con una captura de referencia, píxel a píxel, y fallan cuando difieren.Ven cada cambio, incluidos los que nadie puede ver.Por eso dan falsas alarmas en pantallas correctas.
¿Por qué fallan las pruebas de comparación de capturas cuando nada cambió?
Porque la misma pantalla no se dibuja con los mismos píxeles en todas partes.Los bordes suavizados, el suavizado de fuentes, la tarjeta gráfica, el escalado de la pantalla, un cursor de texto que parpadea o un resaltado al pasar el ratón cambian algunos píxeles sin cambiar nada que una persona notaría.Una comparación píxel a píxel los cuenta todos.
¿Cuál es un buen umbral para las pruebas de regresión visual?
Ningún porcentaje sirve para todas las imágenes.Una proporción lo bastante pequeña para detectar un dígito equivocado en un panel grande falla con un ruido inofensivo, y una lo bastante flexible para ignorar el ruido deja pasar ese dígito.Hágase en su lugar la pregunta que se hace una persona: ¿vería alguien que mira la pantalla una diferencia?Así es como compara GUI Test Studio.
¿El suavizado de bordes causa falsos positivos en las pruebas visuales?
Sí, es una de las causas más comunes.Los bordes del texto y de las formas se suavizan con colores intermedios, y ese suavizado difiere entre máquinas, tarjetas gráficas y configuraciones.GUI Test Studio compara como una persona mira una pantalla, así que el suavizado que nadie ve se ignora.
¿Puede un umbral de diferencia de píxeles ocultar un bug real?
Sí.Un dígito equivocado, una mayúscula convertida en minúscula o un icono pequeño que falta cambia de unas pocas decenas a unos cientos de píxeles, una proporción mínima de una imagen grande.Un umbral del 1 o el 2 % los deja pasar a todos.
¿Cómo compara GUI Test Studio las capturas de pantalla?
En dos fases.La Fase de búsqueda encuentra el elemento en la pantalla, dondequiera que se haya movido.La Fase de verificación lo compara después con lo que usted espera, como lo hace el ojo humano: detecta un dígito equivocado, una palabra cambiada, un icono que falta u otro color, e ignora el ruido de renderizado que nadie ve.
¿Son mejores las pruebas visuales con IA que la comparación de píxeles?
Funcionan mejor juntas.Una comparación visual cuidadosa es rápida y repetible, y decide por sí sola la mayoría de las comprobaciones.En GUI Test Studio, el Análisis inteligente con IA echa una segunda mirada solo a una comprobación fallida, dice en palabras sencillas qué cambió y da el veredicto final cuando usted lo activa.
¿Cómo manejar fechas y contadores en las pruebas visuales?
Déjelos fuera de la imagen que compara una aserción visual, y compruébelos con una comprobación de texto.Una aserción de texto dinámico comprueba que un valor tiene el formato correcto, como una fecha o un importe, sea cual sea su valor hoy.
Playwright, ClearType y Windows son marcas comerciales de Microsoft Corporation.
Sigue leyendo
Todos los artículos
Pruebas visuales
Pruebas en modo oscuro, otros idiomas, otras pantallas: una sola prueba para todas las variantes
10 min de lectura
Pruebas visuales
Errores visuales que sus pruebas no detectan: probar lo que ve el usuario
10 min de lectura
Automatización de pruebas
Pruebas manuales frente a pruebas automatizadas: por qué las pruebas manuales se quedan cortas en las pruebas de extremo a extremo
15 min de lectura