jdrada/TSDC-Issue-Tracker

E2E Project - University

TSDC-Issue-Tracker

Semana 5 - Proyecto de Pruebas Automatizadas en GHOST con Kraken y Cypress

El proyecto de automatización de pruebas End-to-End (E2E) para la aplicación GHOST durante la Semana 5 se enfoca en la implementación de pruebas E2E automatizadas, una estrategia clave para detectar errores y fallos en la aplicación sin intervención humana. Tradicionalmente, las pruebas E2E para GHOST se han realizado manualmente, lo cual puede ser propenso a errores y falta de documentación. Para superar estos desafíos, nuestro equipo ha decidido utilizar Kraken, una herramienta recomendada para pruebas E2E con enfoque en Testing Conductual (BDT), y Cypress. El objetivo es implementar y automatizar escenarios de prueba seleccionados, utilizando ambas herramientas para cada escenario.

Integrantes del Proyecto del equipo 10:

• Pedro Buitrago - p.buitrago@uniandes.edu.co
• Juan Ardila - jd.ardila12@uniandes.edu.co
• Juan Ortiz - j.ortiz@uniandes.edu.co
• Irina Sinning - i.sinning@uniandes.edu.co

Requisitos Previos

Previamente instale Ghost como se indica en la guía: Guía de Instalación de Ghost

La versión que se debe utilizar es Ghost v5.72.2

Una vez instalado Ghost:

• Configurar la instalación local en http://localhost:2368/ghost/#/setup

Configurando los campos de la imagen de arriba así:

• Site title: MISO Entrega 5
• Full Name: Pepito Perez
• Email address: pmbtgun@gmail.com
• Password: QAZwsx01@2023

En este punto tendrá el sitio así:

Instalación y Ejecución de Pruebas

Asegúrese de tener Node.js (versión 16.20.2) instalado en su máquina. NVM (Node Version Manager) debe estar instalado para manejar las versiones y evitar conflictos de compatibilidad. Para instalar nvm puedes seguir los pasos del repositorio oficial aquí. NPM (Node Package Manager) debe estar instalado para manejar las dependencias. Tener Git instalado para clonar el repositorio del proyecto.

Pasos de Instalación

Para Kraken:

• Funciona para Node 16: nvm use v16
• Seguir el manual de instalación de Kraken en su ambiente aquí
• Instalar android-platform-tools, en nuestro caso: brew install android-platform-tools
• Instalar npm install chai
• Clonar este repositorio https://github.com/pbuitragom/TSDC-Issue-Tracker.git
• npm install
• cd TSDC-Issue-Tracker/kraken
• Ejecutar ./node_modules/kraken-node/bin/kraken-node run

Para Cypress:

• Verificar Node.js: Asegúrate de tener Node.js instalado en tu máquina. Puedes descargarlo desde el sitio web oficial de Node.js.
• Ir a la ubicacion de cypress cd cypress
• Ejecuta el siguiente comando para instalar dependencias: npm install
• en el archivo cypress.env.json cambiar los valos de email y password por los configurados en Ghost
• Abrir la Interfaz de Usuario de Cypress npx cypress open
• Ejecutar las pruebas en la inderfaz de cypress (recomendado) o ejecutar npx cypress run

---

Semana 6 - Proyecto de Pruebas Automatizadas en GHOST con Kraken y Cypress modificados para tomar screenshots, resemble y backstop

Previamente instale Ghost como se indica en la guía: Guía de Instalación de Ghost

Se deben utilizar dos versiones de ghots Ghost v5.72.2 y Ghost 4.44

Para cada una de las versiones es requerido configurar ghost con estos datos

Configurando los campos de la imagen de arriba así:

• Site title: MISO Entrega 6
• Full Name: Pepito Perez
• Email address: pmbtgun@gmail.com
• Password: QAZwsx01@2023

Es importante asegurar que en la aplicación ghost no existan posts, pages, tags ni members.

Pasos de Instalación

Para Kraken:

Funciona para Node 16: nvm use v16

• Seguir el manual de instalación de Kraken en su ambiente aquí
• Instalar android-platform-tools, en nuestro caso: brew install android-platform-tools
• Instalar npm install chai
• Clonar este repositorio https://github.com/pbuitragom/TSDC-Issue-Tracker.git

En este punto para kraken tendrá dos carpetas

• kraken: Pruebas para la version ghost v5.72.2
• kraken-v2: Pruebas para la version ghots v4.44

Para la ejecución de las pruebs de la versión ghost v5.72.2:

• Asegúrese de subir el servicio de ghost v5.72.2
• cd kraken
• npm install
• ./node_modules/kraken-node/bin/kraken-node run

Para la ejecución de las pruebs de la versión ghost v4.44:

Nota: Es importante tener en cuenta que los archivos kraken-2/a_create_post.feature, kraken-2/b_update_post.feature , kraken-2/c_delete_post.feature , kraken-2/d_create_page.feature y kraken-2/e_update_page.feature actualmente apunta a una máquina en AWS en la sentencia Given I navigate to page "http://ec2-18-191-54-169.us-east-2.compute.amazonaws.com:2368/ghost/#/signin", es necesario que quién realice las pruebas haga la configuración de la url según aplique ya que la url http://ec2-18-191-54-169.us-east-2.compute.amazonaws.com:2368/ghost/#/signin NO está disponible para terceros.

• Asegúrese de subir el servicio de ghost v4.44
• cd kraken-2
• npm install
• ./node_modules/kraken-node/bin/kraken-node run

Traas la ejecución tendrá cerca de 60 imágenes que corresponden a los screenshots de referencia de cada una las versiones para cada uno de los scenarios y steps definidos.

A continuación y video con la explicación de las configuraciones para kraken: https://uniandes-my.sharepoint.com/:v:/g/personal/p_buitragom_uniandes_edu_co/EbyUksKM_e9DtZHDtbCckUABJOLopTZDSI5bZG5P1bsIfA?nav=eyJyZWZlcnJhbEluZm8iOnsicmVmZXJyYWxBcHAiOiJPbmVEcml2ZUZvckJ1c2luZXNzIiwicmVmZXJyYWxBcHBQbGF0Zm9ybSI6IldlYiIsInJlZmVycmFsTW9kZSI6InZpZXciLCJyZWZlcnJhbFZpZXciOiJNeUZpbGVzTGlua0RpcmVjdCJ9fQ&e=ggIbsm

WIKI

Herramienta de Regresión Visual Resemble.js

Carpeta de Herramienta

Readme Resemble

Ejecución de la Herramienta

Pasos para ejecutar:

1. Clonar el repositorio: git clone https://github.com/pbuitragom/TSDC-Issue-Tracker.git
2. Navegar al directorio: cd TSDC-Issue-Tracker
3. Cambiar al directorio de pruebas de resemble: cd resemble
4. Instalar dependencias:
   • npm install playwright
   • npm install resemblejs
5. Ejecutar con: node index.js

Se generará el directorio results/prueba Carpeta con imágenes de comparación.

Generación de Reportes

Genera automáticamente report.html en ./results/prueba para comparaciones visuales y analíticas.

Pasos de Instalación

Para Cypress:

Asegúrese de tener Node.js instalado. Si no lo tiene, puede instalarlo desde https://nodejs.org/.

Clone el repositorio Cypress del proyecto:

git clone https://github.com/pbuitragom/TSDC-Issue-Tracker.git
cd TSDC-Issue-Tracker

En este punto, tendrá dos carpetas relevantes para Cypress:

• cypress: Pruebas para la versión ghost v5.72.2
• cypress-4.44: Pruebas para la versión ghost v4.44

Para la ejecución de las pruebas de la versión ghost v5.72.2:

• Asegúrese de tener el servicio de ghost v5.72.2 en funcionamiento.
• Navegue a la carpeta de pruebas:

  cd cypress

• Instale las dependencias:

  npm install

• Ejecute las pruebas:

  npx cypress open

Para la ejecución de las pruebas de la versión ghost v4.44:

Nota: Asegúrese de que los archivos cypress-4.44/a_create_post.feature, cypress-4.44/b_update_post.feature, cypress-4.44/c_delete_post.feature, cypress-4.44/d_create_page.feature y cypress-4.44/e_update_page.feature estén configurados correctamente para apuntar al entorno de prueba. Actualmente, apuntan a una máquina en AWS en la declaración "Given I navigate to page "http://ec2-18-191-54-169.us-east-2.compute.amazonaws.com:2368/ghost/#/signin"". Ajuste las URL según sea necesario, ya que la URL proporcionada no estará disponible para terceros.

• Asegúrese de tener el servicio de ghost v4.44 en funcionamiento.
• Navegue a la carpeta de pruebas:

  cd cypress-4.44

• Instale las dependencias:

  npm install

• Ejecute las pruebas:

  npx cypress open

Después de la ejecución, encontrará las imágenes correspondientes a las capturas de pantalla de referencia para cada versión, escenario y paso definido.

Detalles del Informe

• Encabezado con resultadol informe
• Imágenes de Comparación: originales (versión ghots v5.72.2), de comparación (versión ghots v4.44) y de diferencias.
• Análisis: Métricas de comparación, dimensiones, porcentajes de desajuste y tiempos.

Videos del Proyecto

• Resemble
• Ejecución y Reporte

Análisis de Resemble.js: Herramienta de Comparación Visual/Pruebas VRT

• Análisis de Resemble.js: Herramienta de Comparación Visual/Pruebas VRT

Herramienta de Regresión Visual con BackstopJS

Carpeta de la Herramienta

• Carpeta: backstop

Instrucciones de Uso

Configuración Inicial

1. Instalar BackstopJS localmente:

   npm install backstopjs

2. Configurar BackstopJS con el comando:

   backstop init

3. Personalizar la configuración en el archivo backstop.json según las necesidades de tu proyecto.

Hosting Local de Imágenes con HTTP-Server

Pre-requisitos

• Asegúrate de tener Node.js instalado desde nodejs.org.

Pasos

1. Instalación de http-server:

   • Abre una terminal o línea de comandos.
   • Instala http-server globalmente usando npm:

     npm install -g http-server

2. Organiza tus Imágenes:

   • Crea una carpeta para almacenar las imágenes que desees hostear, como "mis_imagenes".
   • Coloca todas las imágenes en esta carpeta.

3. Iniciar el Servidor HTTP:

   • Abre la terminal y navega a la carpeta de imágenes:

     cd ruta/a/mis_imagenes

   • Inicia el servidor con el comando:

     http-server

   • El servidor se iniciará y mostrará las direcciones para acceder a los archivos, generalmente algo como http://127.0.0.1:8080.

4. Acceder a las Imágenes:

   • Abre un navegador y visita la dirección proporcionada por http-server.
   • Verás un listado de tus imágenes. Haz clic en cualquier imagen para visualizarla.

5. Detener el Servidor:

   • Cuando hayas terminado, detén el servidor presionando Ctrl + C en la terminal.

Notas

• Para características específicas (CORS, caché, etc.), http-server ofrece opciones de configuración. Consulta la documentación de http-server.

Ejecución de Pruebas

Desde la línea de comandos:

1. Para realizar una referencia de pantallas:

   backstop reference

2. Para ejecutar pruebas y comparar pantallas:

   backstop test

Usando NPM Scripts:

Añade los siguientes scripts a tu archivo package.json:

"scripts": {
  "reference": "backstop reference",
  "test": "backstop test"
}

Comparación de Imágenes:

Utilizando BackstopJS, se analizan las imágenes y se almacenan los resultados.

Para más detalles consulte README Backstop

Videos del Proyecto

• Creación de referencias

• Creación de diferencias

Análisis de BackstopJS

• Análisis de BackstopJS: Herramienta de Comparación Visual Pruebas VRT

Videos Explicativos Generales

• Configuraciones para kraken
• Resemble
• Ejecución y Reporte

• Creación de referencias BackStop

• Creación de diferencias BackStop

Semana 7 - Proyecto de Pruebas Automatizadas en GHOST con Kraken y Cypress modificados para utilizar data pools apriori, automatizados y dinámcios

Previamente instale Ghost como se indica en la guía: Guía de Instalación de Ghost

La versión que se debe utilizar es Ghost v5.72.2

Una vez instalado Ghost:

• Configurar la instalación local en http://localhost:2368/ghost/#/setup

Configurando los campos de la imagen de arriba así:

• Site title: MISO Entrega 5
• Full Name: Pepito Perez
• Email address: pmbtgun@gmail.com
• Password: QAZwsx01@2023

En este punto tendrá el sitio así:

Pasos de Instalación

Para Kraken:

• Funciona para Node 16: nvm use v16
• Seguir el manual de instalación de Kraken en su ambiente aquí
• Instalar android-platform-tools, en nuestro caso: brew install android-platform-tools
• Instalar npm install chai
• Clonar este repositorio https://github.com/pbuitragom/TSDC-Issue-Tracker.git
• npm install
• cd TSDC-Issue-Tracker/kraken
• Ejecutar ./node_modules/kraken-node/bin/kraken-node run

Reporte de Incidencias

• TSDC-Issue-Tracker