El artículo se publica en nombre de Alexander Kochetkov y Crasse Snejana.¿Cuántas diferencias encontrarás en 10 segundos?
Nuestro probador encontrará TODAS las diferencias. E incluso aquellos que no son visibles. A continuación hablaré sobre cómo lo hará, pero primero te presentaré el curso de las cosas.
Nuestra empresa está desarrollando varias aplicaciones web. Tomemos, por ejemplo, una aplicación web cliente típica con una interfaz de usuario rica, varios cientos de páginas, diseño receptivo y soporte para todos los navegadores populares. En este escenario, la prueba de regresión de la interfaz de usuario existente se convierte en AD y lleva mucho tiempo. Para no volverse loco y no revolcarse en este atolladero, automatizamos este proceso y creamos una nueva herramienta:
QVisual .
¿Cómo prueba una persona el diseño (UI)? Toma la implementación actual y la compara con un estándar abstracto construido sobre la base de su propia experiencia, conveniencia y miles de páginas web vistas anteriormente. Escribir su propia IA para probar diseños sería, por supuesto, genial. Pero esta idea parece disparar desde un cañón a los gorriones. Por lo tanto, lo hicimos más fácil: como referencia, comenzamos a aceptar la misma página previamente verificada por una persona (en la mayoría de los casos, esta es una página de un lanzamiento exitoso anterior). Por lo tanto, toda la tarea se redujo a comparar dos páginas.
Por supuesto, ya se han publicado muchas soluciones que le permiten comparar dos imágenes píxel por píxel. ¿Por qué escribimos "otra bicicleta"? La respuesta es simple: no queríamos limitarnos a la comparación píxel por píxel, queríamos poder comparar bloques individuales en una página y recibir un informe significativo sobre el número y los tipos de diferencias en estos bloques. Por lo tanto, la herramienta que hemos implementado puede comparar no solo las imágenes en sí, sino también elementos de página individuales, si es necesario. Por lo tanto, no operamos con capturas de pantalla de dos páginas, sino con instantáneas de estas páginas.
Ventajas del enfoque
Una instantánea es una captura de pantalla de toda la página más datos sobre los estilos y propiedades de algunos elementos web en esta página. Implementamos la búsqueda de diferencias en las instantáneas con una aplicación de servidor con una API abierta.
Enfoque: la comparación de elementos, no imágenes, nos permite resaltar errores típicos, como:
- IMAGEN : el elemento en la página no corresponde visualmente al elemento en el estándar;
- MOVIDO - elementos desplazados, el elemento es idéntico a la referencia, pero con diferentes coordenadas;
- Redimensionado : muy similar a un desplazamiento, pero en lugar de la posición del elemento, su tamaño es diferente;
- TEXTO - errores en el texto;
- CSS y ATRIBUTOS : las diferencias en estilos y atributos no siempre son visibles visualmente y no siempre son un error. Pero controlar los cambios en ellos es bastante útil, ya que en algunos casos ayuda encontrar errores asociados con ellos.
Un pequeño análisis de ejemplos con una serie de errores comunes:
Como funciona
Puede eliminar la instantánea de la página utilizando sus propias herramientas, y puede transferir una
captura de pantalla y datos sobre los
elementos al servidor con dos solicitudes POST normales.
Si sus pruebas están escritas en Java, será más fácil usar nuestra biblioteca para estos fines, que se encargarán de crear una instantánea y transferir datos al servidor.
Antes de comenzar, deberá especificar varias variables (dirección del servidor, tipo y versión del navegador, etc.). En la prueba en sí, debe especificar la dirección de la página desde la que desea tomar una instantánea y una lista de localizadores en formato Xpath o CSS para buscar los elementos que necesitamos (opcional). Eso es todo!
Dentro de la biblioteca, utilizamos los comandos internos de Selenium WebDriver y los scripts de JavaScript para tomar una instantánea. Los comandos internos de WebDriver le permiten tomar capturas de pantalla de la página de manera rápida y precisa (sin pegar y desplazarse), y js: encuentre los elementos necesarios y agregue datos sobre ellos en la instantánea. Después de eliminar la instantánea, la transferimos a nuestra aplicación de servidor, que guardará datos sobre los elementos en mongo y las capturas de pantalla en el disco del servidor. Ahora esta instantánea se puede comparar con el estándar. Los datos de los elementos se compararán como objetos normales y capturas de pantalla, píxel por píxel con
OpenCV .
Ahora puede obtener un informe sobre la comparación de dos instantáneas. Para hacer esto, debe enviar una
solicitud GET y obtener los datos de comparación en forma de JSON en respuesta, o utilizar nuestra aplicación front-end, que generará un informe detallado y, lo más importante, convenientemente legible.
¿Y qué hay del informe?
La página principal del informe contiene información sobre las pruebas aprobadas y reprobadas (resaltadas en rojo) y consta de tres listas:
- lista de pruebas (historia) en las que se verificó el diseño. Aquí, por conveniencia, los nombres de las pruebas corresponden a la url de las páginas de las cuales se tomó la instantánea;
- lista de estados (estado): cada historia puede contener varios estados, por ejemplo, una captura de pantalla antes de completar el formulario y después. Cada estado puede contener varias instantáneas en diferentes resoluciones y versiones del navegador;
- lista con diferentes navegadores y permisos y estadísticas breves.
En la parte superior hay íconos que le permiten filtrar los resultados según el tipo de errores y el porcentaje de discrepancia en la comparación píxel por píxel. Esta implementación acelera la verificación de errores.
Las estadísticas breves en los bloques de la última lista contienen tres parámetros:
- píxeles : la diferencia entre las dos imágenes en porcentaje con respecto al tamaño de la página completa;
- elementos : el número de elementos diferentes (de los encontrados por los localizadores aprobados en la prueba);
- error : errores internos que ocurrieron al comparar instantáneas (por ejemplo, una de las imágenes no se encontró para comparar o no hay datos en las instantáneas).
El informe para cada página es dos capturas de pantalla y trazos separados de los elementos en los que se encontró diff. El texto emergente al pasar el mouse sobre diferentes elementos indica el tipo de error y el localizador por el cual se encontró el elemento. También puede configurar el filtrado por tipo de error, ocultar una de las capturas de pantalla y habilitar / deshabilitar el resultado de la comparación píxel por píxel.
Como se mencionó anteriormente, también comparamos capturas de pantalla píxel por píxel, lo que para algunas tareas es muy efectivo. Por ejemplo, para páginas nuevas con un DOM inestable, no tiene sentido pasar tiempo escribiendo y manteniendo localizadores.
En conclusión, quiero decir sobre el verdadero escape de esta herramienta para la empresa: todos los días
QVisual ayuda a nuestros evaluadores a mantenerse al tanto de todos los cambios en el diseño de las aplicaciones. Ahorramos mucho tiempo comparando aterrizajes creando automáticamente capturas de pantalla (hasta 1500+ aterrizajes en 3 navegadores en 6 resoluciones de pantalla).
PD : Esta es una breve descripción de nuestra herramienta. Puede encontrar más información sobre
GitHub , así como participar en el desarrollo de la herramienta.
PPS Para aquellos que quieren probarse a sí mismos, estas son todas las diferencias en la imagen del encabezado:
Canal de soporte de herramientas de Telegram:
t.me/qvisual