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.
- 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
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í:
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.
- 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
- 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.
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 versionghost v5.72.2
kraken-v2
: Pruebas para la versionghots v4.44
- Asegúrese de subir el servicio de
ghost v5.72.2
cd kraken
npm install
./node_modules/kraken-node/bin/kraken-node run
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
Pasos para ejecutar:
- Clonar el repositorio:
git clone https://github.com/pbuitragom/TSDC-Issue-Tracker.git
- Navegar al directorio:
cd TSDC-Issue-Tracker
- Cambiar al directorio de pruebas de resemble:
cd resemble
- Instalar dependencias:
npm install playwright
npm install resemblejs
- Ejecutar con:
node index.js
Se generará el directorio results/prueba
Carpeta con imágenes de comparación.
Genera automáticamente report.html
en ./results/prueba
para comparaciones visuales y analíticas.
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ónghost v5.72.2
cypress-4.44
: Pruebas para la versiónghost v4.44
- 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
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.
- 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.
- Carpeta: backstop
-
Instalar BackstopJS localmente:
npm install backstopjs
-
Configurar BackstopJS con el comando:
backstop init
-
Personalizar la configuración en el archivo
backstop.json
según las necesidades de tu proyecto.
- Asegúrate de tener Node.js instalado desde nodejs.org.
-
Instalación de http-server:
- Abre una terminal o línea de comandos.
- Instala http-server globalmente usando npm:
npm install -g http-server
-
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.
-
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.
- Abre la terminal y navega a la carpeta de imágenes:
-
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.
-
Detener el Servidor:
- Cuando hayas terminado, detén el servidor presionando Ctrl + C en la terminal.
- Para características específicas (CORS, caché, etc.), http-server ofrece opciones de configuración. Consulta la documentación de http-server.
-
Para realizar una referencia de pantallas:
backstop reference
-
Para ejecutar pruebas y comparar pantallas:
backstop test
Añade los siguientes scripts a tu archivo package.json
:
"scripts": {
"reference": "backstop reference",
"test": "backstop test"
}
Utilizando BackstopJS, se analizan las imágenes y se almacenan los resultados.
Para más detalles consulte README 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í:
- 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