Do you want to read this article in English?

Cypress es una herramienta para hacer tests e2e que ha revolucionado el panorama de los tests que ha conseguido facilitar la configuración, escritura, ejecución y depuración de este tipo de tests.

¿Qué vamos a ver en este artículo?

Vamos a ver cómo podemos desarrollar unos tests con Cypress y planificarlos con Runnerty para chequear el estado de nuestra app o web.

Para quien no lo conozca, Runnerty, es una tecnología "low code" que permite integrar y automatizar aplicaciones online & offline, infraestructura de sistemas y servicios con terceros de manera simple, rápida y segura, creando flujos de trabajo y ofreciendo una nueva forma de desarrollar.

Si quieres saber un poco más acerca de por qué deberías usarlo, aquí te dejo este post 👀.

Show me the code!

En la web de Cypress podemos encontrar documentación y casos de ejemplo muy útiles, os dejo enlace para que le echéis un ojo, muy interesante: https://docs.cypress.io/guides/getting-started/writing-your-first-test.

Nosotros vamos a ejecutarlo directamente desde un proyecto de Runnerty, para dejarlo listo y planificado para que se lance cada X horas contra nuestra web en producción 😎.

Setup

En primer lugar vamos a crear el proyecto de Runnerty

npx runnerty-cli new runnerty-cypress-test

🔎 Nota: Antes de continuar, yo siempre enlazo mis proyectos de Runnerty con la plataforma, para gestionarlo desde ahí.
Solo entras en Runnerty Platform, creas el proyecto y copias el API key generado en nuestro archivo config.json, es muy sencillo (y gratis, claro 😉).

Una vez creado el proyecto, usamos el CLI de Runnerty para añadirle Cypress:

Desde dentro de nuestro proyecto ejecutamos:

npx runnerty-cli add @runnerty/executor-cypress

Esto nos habrá dejado el proyecto listo para empezar a usar Cypress y un Workflow de ejemplo de Runnerty con los procesos de ejemplo listos para probar.

También nos habrá creado un script en nuestro package.json para ejecutar Cypress.

Nuestros tests están en la carpeta por defecto que Cypress crea para sus tests. Dentro tendremos los 2 tests creados:

./cypress/integration/sample-a.spec.js
./cypress/integration/sample-a.spec.js

Estos tests, como veis, son extremadamente sencillos, aunque no estemos muy acostumbrados podremos saber qué hacen:

describe('Runnerty IO Home Test A', () => {
 beforeEach(() => {
   cy.visit('/');
 });

 it('Should have a h1 with the text "Log in" [A-1]', () => {
   cy.get('h1').contains('Log in');
 });

 it('Should fail (Fail forced) [A-2]', () => {
   cy.get('#mat-input-0').type(Cypress.env('username'));
   cy.get('#mat-input-1').type(Cypress.env('password'));
   expect(true).to.equal(false);
 });
});

Lo "único" que hacen estos tests es conectarse a app.runnerty.io, variable que, por cierto, está definida en el archivo cypress.json y en el primer bloque comprueba la página tiene un un 'h1' con el texto 'Log in' y un segundo caso que después de escribir en el campo usuario y contraseña falla intencionadamente con un

expect(true)to.equal(false);

Podemos probar nuestros tests con Cypress con el comando:

npm run cypress:open

Veremos 2 test de ejemplo desde la consola de Cypress

Una vez lanzados desde esta consola, podremos ver su ejecución:

Planificar tests con Runnerty

🔎 Nota: Para quien no esté familiarizado con la sintaxis de Runnerty, os recomiendo este artículo de introducción.

Nosotros "simplemente" vamos a aprovechar estos tests y meterlos en la planificación de Runnerty. El CLI de Runnerty ya nos ha creado un plan de ejemplo plan_executor-cypress_sample.json con 2 procesos para ejecutar los 2 tests, solo tenemos que copiarlo y pegarlos en nuestro plan.json

...
"processes": [
  {
    "id": "CYPRESS_SIMPLE_SPEC_B_TEST",
    "name": "CYPRESS SIMPLE SPEC B TEST",
    "exec": {
      "id": "cypress_default",
      "spec": "./cypress/integration/sample-b.spec.js"
    }
  },
  {
    "id": "CYPRESS_SIMPLE_INTEGRATION_TESTS_1_FAIL",
    "name": "CYPRESS SIMPLE INTEGRATION TESTS 1 FAIL",
    "depends_process": ["CYPRESS_SIMPLE_SPEC_B_TEST"],
    "exec": {
      "id": "cypress_default",
      "browser": "chrome",
      "config": {
        "video": true
      }
    }
  }
]
...

También vamos a cambiar el scheduler para que se ejecute cada hora, no hace falta que se ejecuten todos los tests cada minuto 😉.

...
"triggers": [
  {
    "id": "schedule_default",
     "schedule_interval": "0 */1 * * *"
   }
],
...

🤔 Recuerda conectar el proyecto con Runnerty Platform para poder ejecutar la cadena desde ahí y ver qué ha pasado.

Ya solo tenemos que arrancar Runnerty 🎉

npm start

Ahora podemos entrar en Runnerty Platform, seleccionar nuestro proyecto, ir al listado de cadenas y forzar que se lancen nuestros tests (para no esperar a la siguiente hora a que se ejecuten).

Y veremos cómo se van ejecutando nuestros tests cada hora o cada vez que los lancemos nosotros manualmente.

Si entramos al detalle, veremos que el primer test ha pasado correctamente pero que el segundo ha fallado (intencionadamente).

TLDR;

Con Runnerty podemos automatizar nuestros tests de Cypress para tener control en todo momento de que nuestra plataforma no tiene ningún problema.

Os dejo este repo para que os lo descargáis y con un npm start veréis que cada 5 min tenéis runnerty.io funcionando 🚀.

https://github.com/alo/runnerty-cypress

¿Y ahora?

Te animo a que le eches un ojo y si te parece interesante puedes apoyarnos en Github ⭐️ o mandarnos un mensaje por Twitter.

enjoy