Home

Pruebas automatizadas con Cypress y Kraken

¡Bienvenidos a la Wiki de pruebas automatizadas E2E para la aplicación Ghost! En esta wiki encontrarás información detallada sobre las pruebas automatizadas realizadas en la aplicación Ghost, utilizando dos herramientas populares de pruebas E2E: Cypress y Kraken. En total, se llevaron a cabo 50 escenarios de prueba, 30 utilizando Cypress y 20 utilizando Kraken, para asegurar que la aplicación Ghost funcione de manera óptima y libre de errores. De los 20 escenarios realizados con Cypress inicialmente, 10 fueron modificados para la versión de Ghost 4.44.0 y posteriormente para realizar Visual Regression Testing entre versiones.

Pros y contras de cada herramienta E2E

Cypress

Pros

• No hay necesidad de instalar dependencias adicionales, las pruebas se pueden hacer directamente en un navegador web.
• Tracking de cada paso de las pruebas por medio de pantallazos
• Grande cantidad de métodos para buscar y seleccionar elementos HTML
• Fácil de usar e implementar
• Buena visibilidad de las pruebas, sus pasos y sus estados

Contras

• Difícil trabajar con herramientas que utilicen frecuentemente funciones asíncronas que necesiten de awaits
• Curva de aprendizaje mediana
• No hay soporte para Given, When, Then sin herramientas externas. (Solo se pueden realizar comentarios)

Kraken

Pros

• Fácil de trabajar usando el patrón Given, When, Then
• Facilidad de ejecución de pruebas en paralelo
• Tracking detallado de la ejecución de escenarios mediante reportes

Contras

• Documentación limitada
• Tiene problemas para correr más de un escenario secuencialmente
• Demasiadas dependencias necesitadas, incluso varias que no se utilizan si solo haces testing de aplicaciones web
• Curva de aprendizaje lenta
• Menos opciones para operar sobre HTML que cypress. No reconoce ciertos elementos que cypress sí.

Pros y contras de las herramientas de regresión visual

ResembleJS

Pros

• Identifica de manera rápida y precisa si ha habido cambios en la apariencia visual de la aplicación.
• Puede comparar imágenes de diferentes tamaños y formatos, lo que permite trabajar con diversas capturas de pantalla.
• Ofrece la posibilidad de establecer umbrales de diferencia, lo que ayuda a reducir los falsos positivos.
• Permite generar imágenes de diferencias para comprender visualmente los cambios en la aplicación.
• Es compatible con varias herramientas de automatización de pruebas, como Cypress y Puppeteer.

Contras

• Sensibilidad a cambios menores.
• Solo puede comparar dos imágenes a la vez, lo que puede ser una limitación si se desea comparar varias imágenes con un patrón común.
• La calidad de la imagen puede afectar la precisión de la comparación.
• Requiere ser integrada en el código de prueba automatizado.
• Falta de documentación.

BackstopJS

Pros

• Fácil de usar y configurar, lo que hace que la automatización de pruebas de regresión visual.
• Generación de informes de las pruebas realizadas.
• Compatibilidad con múltiples navegadores y dispositivos.
• Integración con herramientas de automatización como Cucumber.
• Enmascaramiento que permite a los usuarios excluir elementos específicos de la comparación de imágenes.
• Es escalable y puede utilizarse para pruebas de regresión visual en proyectos pequeños y grandes.

Contras

• Requiere cierta curva de aprendizaje al utilizarla por primera vez.
• Configuración inicial puede ser un poco complicada, especialmente si se tienen proyectos grandes o complejos.
• Crea una gran cantidad de archivos de imagen, lo que puede ocupar mucho espacio en el disco duro y aumentar el tiempo de ejecución de las pruebas.
• Posible necesidad de herramientas adicionales para poder ver las diferencias entre las imágenes.
• El proceso de comparación de imágenes puede ser lento en proyectos grandes con muchas páginas y/o elementos visuales complejos.

Estrategias usadas

Para el ejercicio de esta semana se plantearon 120 casos de prueba que vienen de 40 escenarios previamente diseñados los cuales fueron realizados con la herramienta de automatización Cypress. Para la mayoría de los escenarios se trabajaron técnicas de generación de datos, buscando utilizar las técnicas A-priori, Pseudo Random y Random, a continuación se detalla la distribución de escenarios utilizados:

Pool de datos a-priori

Para la generación de datos a-priori, se utilizaron la creación arreglos de datos previamente construidos para los diferentes escenarios de prueba que se iban a realizar con esta técnica.

ID	ESCENARIO
1	[A Priori] Login con ambas credenciales inválidas
4	[A Priori] Login con correo válido, password inválida
7	[A Priori] Login con credenciales inválidas, superando límites de caracteres
10	[A Priori] Crear nueva tag válida
13	[A Priori] Intentar crear nueva tag inválida
16	[A Priori] Editar perfil válido
19	[A Priori] Editar perfil inválido
22	[A Priori] Editar settings generales válidos (publication info)
25	[A Priori] Editar settings generales inválidos (publication info)
28	[A Priori] Agregar code injection válido en header
31	[A Priori] Agregar code injection válido en footer
34	[A Priori] Agregar integración
37	[A Priori] Agregar navegación
40	[A Priori] Agregar navegación inválida
43	[A Priori] Agregar a un post un author inexistente
46	[A Priori] Agregarle canonical URL de metadata inválida a un post
49	[A Priori] Agregarle canonical URL de metadata válida a un post
52	[A Priori] Editar un post con hora de publicación inválida
55	[A Priori] Editar un post con hora de publicación válida
58	[A Priori] Crear member inválido
61	[A Priori] Crear member válido
64	[A Priori] Staff invite people inválido
67	[A Priori] Staff invite people válido
70	[A Priori] Agregar una bio válida
73	[A Priori] Agregar una bio inválida
76	[A Priori] Buscar en el sitio una página aleatoria
79	[A Priori] Ingresar meta title inválido en general settings
82	[A Priori] Crear Page válida
85	[A Priori] Crear Post válido
88	[A Priori] Editar Page con título de más de 255 caracteres
91	[A Priori] Editar Post con Excerpt de más de 301 caracteres
94	[A Priori] Agregar code injection válido en header desde la configuración de un post
97	[A Priori] Editar metadata de general settings (Validation Error)
100	[A Priori] Editar metadata de general settings (Meta description excede 1000 caracteres )
103	[A Priori] Editar link de facebook de general settings válido
106	[A Priori] Editar link de facebook de general settings inválido
109	[A Priori] Editar usuario de twitter en general settings válido
112	[A Priori] Editar usuario de twitter en general settings inválido
115	[A Priori] Crear post con metatitle inválido
118	[A Priori] Login con credenciales válidas

Pool de datos (pseudo) aleatorio dinámico

Para la generación de datos pseudo aleatorios, se utilizó principalmente la herramienta Mockaroo y su respectiva librería para usar en node.js. El API de Mockaroo permite generar datos realistas, lo que ahorra tiempo y esfuerzo en la creación manual de conjuntos de datos de prueba. Además, es flexible y se integra fácilmente en flujos de trabajo. También ofrece opciones de personalización para adaptarse a los requisitos específicos de cada escenario.

ID	ESCENARIO
2	[Pseudo Random] Login con ambas credenciales inválidas
5	[Pseudo Random] Login con correo válido, password inválida
8	[Pseudo Random] Login con credenciales inválidas, superando límites de caracteres
11	[Pseudo Random] Crear nueva tag válida
14	[Pseudo Random] Intentar crear nueva tag inválida
17	[Pseudo Random] Editar perfil válido
20	[Pseudo Random] Editar perfil inválido
23	[Pseudo Random] Editar settings generales válidos (publication info)
26	[Pseudo Random] Editar settings generales inválidos (publication info)
29	[Pseudo Random] Agregar code injection válido en header
32	[Pseudo Random] Agregar code injection válido en footer
35	[Pseudo Random] Agregar integración
38	[Pseudo Random] Agregar navegación
41	[Pseudo Random] Agregar navegación inválida
44	[Pseudo Random] Agregar a un post un author inexistente
47	[Pseudo Random] Agregarle canonical URL de metadata inválida a un post
50	[Pseudo Random] Agregarle canonical URL de metadata válida a un post
53	[Pseudo Random] Editar un post con hora de publicación inválida
56	[Pseudo Random] Editar un post con hora de publicación válida
59	[Pseudo Random] Crear member inválido
62	[Pseudo Random] Crear member válido
65	[Pseudo Random] Staff invite people inválido
68	[Pseudo Random] Staff invite people válido
71	[Pseudo Random] Agregar una bio válida
74	[Pseudo Random] Agregar una bio inválida
77	[Pseudo Random] Buscar en el sitio una página aleatoria
80	[Pseudo Random] Ingresar meta title inválido en general settings
83	[Pseudo Random] Crear Page válida
86	[Pseudo Random] Crear Post válido
89	[Pseudo Random] Editar Page con título de más de 255 caracteres
92	[Pseudo Random] Editar Post con Excerpt de más de 301 caracteres
95	[Pseudo Random] Agregar code injection válido en header desde la configuración de un post
98	[Pseudo Random] Editar metadata de general settings (Validation Error)
101	[Pseudo Random] Editar metadata de general settings (Meta description excede 1000 caracteres )
104	[Pseudo Random] Editar link de facebook de general settings válido
107	[Pseudo Random] Editar link de facebook de general settings inválido
110	[Pseudo Random] Editar usuario de twitter en general settings válido
113	[Pseudo Random] Editar usuario de twitter en general settings inválido
116	[Pseudo Random] Crear post con metatitle inválido

Pool de datos aleatorio

Para la generación de datos aleatorios, se utilizó datos de faker, provistas propiamente por faker.js. Faker permite simular datos realistas y variados. Los datos generados con Faker son aleatorios pero siguen patrones y formatos coherentes, lo que facilita la creación de casos de prueba. Además, Faker proporciona una amplia gama de opciones para generar datos en diferentes idiomas, regiones y categorías.

ID	ESCENARIO
3	[Random] Login con ambas credenciales inválidas
6	[Random] Login con correo válido, password inválida
9	[Random] Login con credenciales inválidas, superando límites de caracteres
12	[Random] Crear nueva tag válida
15	[Random] Intentar crear nueva tag inválida
18	[Random] Editar perfil válido
21	[Random] Editar perfil inválido
24	[Random] Editar settings generales válidos (publication info)
27	[Random] Editar settings generales inválidos (publication info)
30	[Random] Agregar code injection válido en header
33	[Random] Agregar code injection válido en footer
36	[Random] Agregar integración
39	[Random] Agregar navegación
42	[Random] Agregar navegación inválida
45	[Random] Agregar a un post un author inexistente
48	[Random] Agregarle canonical URL de metadata inválida a un post
51	[Random] Agregarle canonical URL de metadata válida a un post
54	[Random] Editar un post con hora de publicación inválida
57	[Random] Editar un post con hora de publicación válida
60	[Random] Crear member inválido
63	[Random] Crear member válido
66	[Random] Staff invite people inválido
69	[Random] Staff invite people válido
72	[Random] Agregar una bio válida
75	[Random] Agregar una bio inválida
78	[Random] Buscar en el sitio una página aleatoria
81	[Random] Ingresar meta title inválido en general settings
84	[Random] Crear Page válida
87	[Random] Crear Post válido
90	[Random] Editar Page con título de más de 255 caracteres
93	[Random] Editar Post con Excerpt de más de 301 caracteres
96	[Random] Agregar code injection válido en header desde la configuración de un post
99	[Random] Editar metadata de general settings (Validation Error)
102	[Random] Editar metadata de general settings (Meta description excede 1000 caracteres )
105	[Random] Editar link de facebook de general settings válido
108	[Random] Editar link de facebook de general settings inválido
111	[Random] Editar usuario de twitter en general settings inválido
117	[Random] Crear post con metatitle inválido
119	[Random] Cambio de contraseña con contraseñas distintas (Error)
120	[Random] Hacer el sitio privado y cambiar por contraseña válida