Home
¡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.
- Son pruebas económicas y rápidas.
- Puede detectar errores que pasarían desapercibidos en otras pruebas.
- Puede generar varias entradas y escenarios de uso.
- No se requiere una planificación exhaustiva para probar.
- No da resultados muy dicientes en cuanto a su funcionamiento se refiere.
- Solo detecta errores superficiales y no profundiza en ellos.
- No puede reemplazarse por pruebas detalladas y bien definidas.
- Alta cantidad de eventos inválidos o inexistentes.
- Bajo nivel de cobertura de la aplicación analizada.
- Facilidad en la instalación.
- Ejecución en varios navegadores.
- Facilidad en la extracción de la información.
- Automatizar pruebas repetitivas.
- Facilidad en el descubrimiento de nuevas vistas.
- Consumo de memoria y recursos del sistema.
- Ejecución lenta de las herramientas.
- 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
- 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)
- 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
- 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í.
- 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.
- 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.
- 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.
- 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.
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:
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. Estos datos pregenerados se encuentran en la carpeta src/cypressTests/cypress/e2e/dataGeneration/aprioriData. Los datos específicos de cada caso se encuentran en el archivo de su sección respectiva.
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] Crear post con metatitle válido | 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] Ingresar meta title válido en general settings | 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 |
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.
Nuestro equipo creó un proyecto de Mockaroo donde se guardaron todos los esquemas y endpoints utilizados para cada uno de los casos, el proyecto se ve de la siguiente manera en la página de mockaroo:
Un ejemplo de cómo se ve uno de los muchos esquemas trabajados en esta técnica de pruebas se ve de la siguiente manera:
NOTA IMPORTANTE: El key de Mockaroo tiene un límite de 200 usos diarios, es posible que si intentan ejecutar todas las pruebas al tiempo se bloquee el API de Mockaroo, impidiendo generar más datos y fallando así las pruebas.
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] Crear post con metatitle válido | Pages |
| 92 | [Pseudo Random] Crear post con metatitle válido | Posts |
| 95 | [Pseudo Random] Agregar code injection válido en header desde la configuración de un post | Code Injection |
| 98 | [Pseudo Random] Ingresar meta title válido en general settings | 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 |
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] Crear post con metatitle válido | 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] Ingresar meta title válido en general settings | 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 |