Hola
En este artículo, me gustaría hablar sobre mi experiencia en la automatización de pruebas de regresión visual.
Introduccion
Decidí automatizar las pruebas visuales después de descubrir accidentalmente un pequeño error en el diseño. El proyecto cambió el diseño de una página, y los cambios tocaron páginas que no son de tarea.
Habiendo decidido que comprobar manualmente la apariencia de las páginas del sitio no era una opción, comencé la automatización.
Necesitábamos una solución simple con informes convenientes. Para poder escribir autotests sin restricciones, compare capturas de pantalla de páginas y elementos del sitio y use diferentes navegadores.
Después de una breve búsqueda de una solución / marco listo para usar, se decidió que sería más fácil escribir su propia solución con la funcionalidad y el formato necesarios de los informes. De las opciones que vi, solo Galen Framework parecía adecuado, pero lo encontré después de escribir mi solución.
Después de implementar y probar las pruebas automáticas, decidí refinar las pruebas un poco y crear un proyecto separado, para poder usarlo más tarde en otros sitios y proyectos.
Sobre el proyecto
VisualRegressionBoilerplate es un proyecto relativamente simple con una estructura específica.
Algo así como una plantilla / proyecto repetitivo para autotests visuales.
El proyecto está destinado a pequeños sitios / proyectos. Para aquellos que necesitan una solución simple, sin marcos complejos.
Las posibilidades
- Comparación de capturas de pantalla de las páginas del sitio. Puede especificar uno o más elementos ignorados.
- Comparación de capturas de pantalla de elementos del sitio.
- Las pruebas se pueden ejecutar con diferentes anchos de pantalla: móvil - 360px, tableta - 768px, escritorio - 1920px
- De manera predeterminada, hay dos navegadores disponibles: Chrome y Firefox + los mismos navegadores en modo sin cabeza .
- Generador de informes: se crean 4 capturas de pantalla para cada prueba: actual, esperado, diferencia, gif. Si no hay capturas de pantalla esperadas, las capturas de pantalla reales se guardarán como se esperaba.
Tecnologías utilizadas
- Java
- Testng
- Maven
- Selenio webdriver
- aShot: una biblioteca para comparar imágenes
Cómo comenzar a trabajar con un proyecto
- Instalar java, maven, navegadores.
- En el constructor de la clase DriverWrapper , puede agregar o eliminar navegadores si es necesario
- La clase TestConfig almacena todas las configuraciones del proyecto: navegador, tamaño de ventana predeterminado del navegador, etc. Aquí puede agregar o cambiar la configuración.
- En la clase BasePage , establezca la dirección del sitio probado. Puede establecer una dirección diferente para diferentes entornos (dev, stage, prod). BasePage y el resto de las clases en el módulo de la aplicación son un ejemplo del patrón de objeto de página . Usarlo es opcional.
- Examine la clase de prueba TestExample y cree sus propias clases de prueba como ejemplo.
- Agregar nuevas clases de prueba a testng.xml
- Ejecute pruebas con los parámetros necesarios a través de Maven
- Verificar informe en la carpeta de informes
En el proyecto
README , todo se describe con más detalle.
Como escribir pruebas
En general, como quieras. No hay restricciones Puede usar el patrón de
objeto de página o algo más.
Todo lo que necesita es usar las siguientes funciones para comparar capturas de pantalla:
Para las páginas:Comparación de capturas de pantalla de la página:
comparePageScreenshots("index_page");
Comparación de capturas de pantalla de la página con ignorar un elemento:
comparePageScreenshots("index_page_ignored_element", IndexPage.MACKBOOK_BLOCK);
Comparación de capturas de pantalla de la página con ignorar varios elementos:
comparePageScreenshots("index_page_ignored_element", new String[]{"section.panel.features.dark", "div.macbook"});
Comparación de capturas de pantalla del elemento de página: el elemento se puede buscar mediante el localizador CSS
compareElementScreenshots("index_page_element", IndexPage.FORGE_BLOCK);
O puede pasar un objeto de clase
WebElement compareElementScreenshots("index_page_element", driver.findElement(By.cssSelector("a.full.forge")));
Posibles problemas
- Las pruebas pueden fallar debido al contenido dinámico en la página. El problema se resuelve ignorando elementos con contenido dinámico.
- Las pruebas pueden fallar debido a la diferencia de algunos píxeles. Puede solucionar esto editando la configuración: TestConfig.allowableDiffSize .
- A veces, todas las imágenes o algunos elementos del sitio no tienen tiempo para cargarse. Para solucionar esto, escribí la función preparePageForScreenshot () en la que, usando javaScript, la página se desplaza hacia arriba y hacia abajo. Pero esto no siempre ayuda.
Resumen
Por el momento, el proyecto tiene alrededor de 50 pruebas: páginas y diferentes elementos de página.
A través del script bash, se inician las pruebas automáticas y el sitio se prueba de inmediato en tres extensiones (móvil, tableta, escritorio).
Hay algunos problemas debido al contenido dinámico y al hecho de que algunos elementos del sitio no siempre tienen tiempo para cargarse a tiempo, pero las pruebas automáticas pueden hacer frente a su tarea.
Cualquier cambio en el diseño es inmediatamente visible.
Enlace al repositorio del proyecto -
VisualRegressionBoilerplate