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 de Generación de Datos

Para el ejercicio de la semana 7 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 las tres técnicas de generación de datos: 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 utilizó la creación de conjuntos de datos previamente construidos para los diferentes escenarios de prueba que se iban a realizar con esta técnica. Los casos específicos realizados con esta técnica son los siguientes:

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

Pool de datos (pseudo) aleatorio dinámico

Para la generación de datos pseudo aleatorios, se utilizó la herramienta Mockaroo donde se crearon esquemas y endpoints de la API para cada uno de los casos de prueba trabajados con esta técnica. 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, con lo cual nos permite establecer las reglas de cada caso para que cumpla con lo requerido por el contexto. Los casos de prueba que trabajaron un pool de datos pseudo aleatorio fueron:

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

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. Sin embargo, cabe resaltar que a pesar de que los datos sigan patrones coherentes, puede llegar a darse la posibilidad que se genere un dato inválido ya que no tenemos mayor control (adicional a la categoría) sobre los datos producidos. Los casos que trabajaron la técnica de generación de datos aleatoria fueron:

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