Runnerty y Cypress para comprobar que tu app está online
Tags: lowcode, automation, javascript, workflow
Published: 2021-04-21 09:22:08

![YDXJ0351](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mu9rqsovoryrjinacmxv.JPG)

[Do you want to read this article in English?](https://medium.com/runnerty/runnerty-and-cypress-to-check-that-your-app-is-online-193c1f7712e7)

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.
![image3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p14n1bkjnc6keig7nrca.png)

## ¿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. 

![Runnerty y Cypress logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sxblt45z0y0rauj443rq.png)

Para quien no lo conozca, [Runnerty](https://runnerty.io), 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](https://dev.to/runnerty/por-que-usar-runnerty-3ce1) 👀.

## 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

```bash
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](https://app.runnerty.io), 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:

```bash
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:

```bash
./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:

```javascript
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](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 
```javascript
expect(true)to.equal(false);
```

Podemos probar nuestros tests con Cypress con el comando:  

```bash
npm run cypress:open
```

Veremos 2 test de ejemplo desde la consola de Cypress

![Captura de pantalla 2021-04-06 a las 15.00.30](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsg9e0rch7cnoqdw9nuc.png)
 

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

![runnerty-cypress](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u805en1qhv96jcdqvmmv.gif) 


## Planificar tests con Runnerty

🔎 Nota: Para quien no esté familiarizado con la sintaxis de Runnerty, os recomiendo este [artículo de introducción.](https://dev.to/runnerty/como-empezar-a-usar-runnerty-3ki0)

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**

```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 😉.

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

🤔 Recuerda conectar el proyecto con [Runnerty Platform](https://app.runnerty.io) para poder ejecutar la cadena desde ahí y ver qué ha pasado. 

Ya solo tenemos que arrancar Runnerty 🎉

```
npm start
```

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ldg1kpqgr57efnhj8zmu.png)
 
Ahora podemos entrar en [Runnerty Platform](https://app.runnerty.io), 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).

![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1lljb7ff0is32y7af7pe.png)
 
Y veremos cómo se van ejecutando nuestros tests cada hora o cada vez que los lancemos nosotros manualmente.
![image](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gjnuplvqhak2axkzmyap.png)

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](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](https://github.com/runnerty/runnerty) ⭐️ o mandarnos un mensaje por [Twitter](https://twitter.com/runnerty_io).

#enjoy