Portals testing with Cypress.io

Este dibujo resume todos los tipos de testing que puedes realizar en tu aplicación. Puedes empezar desde cosas simples como lo que se denomina testeo estático, cubriendo esto con las herramientos como ESLint o Prettier, y así moverte a testeos más profundos como End to End Testing (E2E). Siempre está bien tener un poco de ellos en tu aplicación, sin embargo, no te sobreexcedas con ellos, ya que muchos tests son innecesarios si con unos pocos estás cubriendo el 100% de los errores que puedas tener.

Hoy vamos a hablar de los E2E Testing dentro de Portals, y para esa tarea vamos a usar Cypress.io. Tiene una documentación increíble y es super simple de seguir. Si has usado Selenium alguna vez en tu vida, estos tests te van a parecer más o menos iguales variando en algun aspecto de su sintaxis, pero es extremadamente potente.

Como opinión personal, ¿por qué recomiendo realizar tests cuando a nadie le gusta crear tests? Te lo venderé de este modo, como desarrollador, ¿qué prefirías? clickar los botones a,b,c,d,e o escribir algo de código una vez y poder repetirlo sin esfuerzo muchas veces?

Se lo tienes que vender a tu superior/a como un El testing no es una pérdida de tiempo, es una inversión de tipo para tí y tus compis

Cypress

Pero, que es Cypress? Cypress es una herramiento que se va a usar para el E2E Testing. Este tipo de testeo es 99% realizado por tí, (si no has usado una herramienta similar a esta antes). Si, lo que me refiero es, esta herramienta realizará el mismo testing que cuando haces el típico Rellenar nombre con ‘Victor’ entonces rellena la contraseña con ‘micontraseñaperfecta’, entonces yo clicko el botón y finalmente espero ver una página con un ‘Hola Victor’

E2E Testing te da esa confianza para realizar los mismos pasos que haces manualmente de un modo automatizado para reservar ese tiempo y puedas gastar en otras tareas más importantes.

Sin embargo, por qué nadie usa el E2E testing? Hay varias razones, como que es lento, necesitas realizarlas con un ordenador abierto y son “caros” de escribir. Por otra parte, ellos te dan la confianza y te ahorran ese tiempo en la que podrias gastar tu tiempo en realizar la misma tarea una y otra vez.

Voy a cubrir un escenario que puede parecerte familiar:

Vas a crear una nueva página web con algo de HTML y Javascript, entonecs necesitas ir a _services/about para limpiar la caché del portal, entonces vas a ir a la página principal y vas a ir a esa página y validas que ese Javascript funciona.

¿Cómo te quedas si te dijera que todos esos pasos se pueden completar con Cypress, y solamente presionando un botón.?

Instalando Cypress

Te diría que si vas a la documentación de Cypress y sigues algo de ello para familiarizarte con ello y hacer una instalación más limpia.

Empezaré desde el principio, como si no tuvieramos ningún proyecto por el momento.

Primero, vayamos a la ruta en la que instalar esto:

cd ../yourpath/portalscypress

NOTA: No llames tu package.json como la dependencia que quieres instalar, por ejemplo no llames a tu paquete cypress

npm init

Ponemos todos los componentes que queramos e instalamos cypress

npm install cypress --save-dev

Esperamos unos momentos mientras cypress se descarga. La pantalla que obtendrás será algo parecido a:

Una vez instalado, abre tu IDE favorito, yo usaré VSCode para esto.

code .

Tendremos algo como esto:

Cypress

Para ver que podemos usar con Cypress, vamos a usar npx. Npx es instalado también con npm (Instala la última versión de npm si no lo has hecho.) Esta herramienta es un npm package runner, que te ayudará a correr tu aplicación de cypress.

npx cypress --help

Como puedes comprobar, tenemos todos los comandos que podemos usar con cypress. Sin embargo, vamos a usar uno que va a ser open

npx cypress open

La primera cosa que nos percatamos es que tenemos una nueva carpeta que ha aparecido en la raíz llamada cypress y un cypress.json que ha aparecido también.

Una nueva aplicación va a aparecer:

Si clickamos el botón, obtendremos los Integration Tests. ¿De dónde viene? Bien, cuando te dije que había aparecido una nueva carpeta con el nombre de cypress, vino con subcarpetas debajo de esta,y una llamada integration/examples Puedes echarles un vistazo para ver como se realizan los tests de ejemplo. Por el momento, vamos a crear una nueva carpeta denominada portals_testing y dentro de esta se creará un archivo llamado my_first_cypress.js

En este archivo vamos a crear el siguiente código:

describe("Portals Testing for log in", () => {
  it("Logins correctly with user", () => {
    cy.visit("yourpowerportals.powerappsportals.com/signin");
    cy.get("#Username")
      .type("myuser")
      .should("have.value", "myuser");

    cy.get("#Password")
      .type("mysecretpassword")
      .should("have.value", "mysecretpassword");
    cy.get("button#submit-signin-local").click();
    cy.url().should("include", "profile");
  });
});

Vamos a clickar en el test que queremos correr y este será hecho por si mismo automáticamente.

Como puedes ver, Cypress espera para cada carga de página, es increíble sin saber lo que a veces tomar Portals para cada carga, eso significa que puedes realizar tus tests sin ningún dolor.

A la izquierda, tenemos los pasos de cada uno de los tests que hemos realizado, ahora tenemos el navegador embebido dentro de la iteración de cada test.

Incluyamos otro test:

describe("Portals Testing for log in", () => {
    it("Logins correctly with user", () => { ... })
    it("Logins wrongly", () => {
    cy.visit("yourpowerportals.powerappsportals.com/signin");
    cy.get("#Username")
      .type("myuser")
      .should("have.value", "myuser");
    cy.get("#Password")
      .type("wrongpassword")
      .should("have.value", "wrongpassword");
    cy.get("button#submit-signin-local").click();
    cy.get("#loginValidationSummary").should(
      "include.text",
      "Invalid sign-in attempt"
    );
  });
});

En este último, estamos intentando loguearnos con un usuario erróneo y que como puedes ver está en el mismo Describe, por lo que realizará la acción después del primer test.

Cosas en el código

Como puedes ver tenemos algunas cosas que deberíamos de ver.

Describe. Pondrá el nombre de nuestro test.

it. Clave para poner la tarea específica que queremos testear.

cy. Objecto acompañado a cada test y que contiene varias funciones para obtener elementos…etc

get. Podemos obtener elementos con el query selector.

should. El primer parámetro tiene un gran rango de valores que puedes coger, el segundose refiere al texto que esperas.

Conclusión

Dentro de Cypress puedes encontrar muchos objetos y muchos eventos que van a hacer tu vida más fácil. Probablemente haré algún video acerca de esto y como podemos realizar un mejor testeo con Cypress dentro de nuestros portales con ejemplso reales, sobretodo por la WebAPI. Como siempre, puedes encontrarme en LinkedIn o Twitter. También, puedes enviarme un mail a me@victorsolaya.com si quieres y podemos opinar sobre el contenido de arriba.

Espero que que os guste este post. Nos vemos pronto!