Creación de plugins en Cypress para compartir datos entre tests

¿Cómo replicar pruebas sin usar CI Origin en Cypress?

Al trabajar con pruebas automatizadas en Cypress, una herramienta indispensable para desarrolladores, la capacidad de replicar pruebas sin recurrir al CI Origin ni funciones experimentales es un desafío interesante. Aquí te enseñaré a hacerlo creando un plugin sencillo en tu archivo de configuración, garantizando así que tus pruebas sean más versátiles y adaptables a diferentes entornos.

¿Cómo configurar un plugin en Cypress?

Para comenzar, modifica tu archivo de configuración de Cypress. Aunque en versiones anteriores se utilizaba un archivo exclusivo para plugins, ahora puedes añadir tu código directamente en la sección de configuración. El objetivo es manejar datos entre diferentes tests.

1. Inicializa un objeto: Primero, crea una constancia que actúe como un almacén de llaves y valores.

   const almacenamiento = {};
   

2. Define tareas o "tasks": Elabora funciones para guardar y obtener valores usando onTask. Este método recibe un objeto con propiedades y sus respectivos callbacks.

   on('task', {
     guardar(valor) {
       const key = Object.keys(valor)[0];
       almacenamiento[key] = valor[key];
       return null;
     },
     obtener(key) {
       console.log(almacenamiento);
       return almacenamiento[key] || null;
     }
   });
   

Recuerda que siempre debes retornar algo en los plugins, y si no necesitas retornar un dato en particular, utiliza null para evitar errores.

¿Cómo compartir información entre tests?

El siguiente paso es implementar un flujo que permita compartir información en distintos tests dentro de Cypress, sin recurrir al CI Origin. Para esto, vas a necesitar visitar diferentes páginas y usar los "tasks" previamente definidos.

1. Crea el primer test: Visita una página, obtén el texto deseado y guarda el valor utilizando el task guardar.

   cy.visit('https://tu-pagina.com');
   cy.get('h1').invoke('text').then(text => {
     cy.task('guardar', { texto: text });
   });
   

2. Crea el segundo test: Visita otra página y usa el task obtener para recuperar el valor guardado anteriormente.

   cy.visit('https://otra-pagina.com');
   cy.task('obtener', 'texto').then(valor => {
     cy.get('input#title').type(valor);
   });
   

Con esta técnica, logras compartir información entre tests sin usar el CI Origin, permitiéndote realizar pruebas más flexibles.

¿Qué pasa con los enlaces que abren nuevas pestañas?

Otro desafío común al usar Cypress es manejar enlaces que abren nuevas pestañas. Cypress, a diferencia de Puppeteer o Selenium, no ofrece una función nativa para cambiar de pestañas. Sin embargo, puedes:

• Interceptar eventos de clic en estos enlaces y cambiar la propiedad target a _self para evitar la apertura de una nueva pestaña.
• Utilizar métodos como cy.window() para manipular el comportamiento del navegador y mantener todo dentro del mismo contexto.

A medida que desarrollas tus habilidades con Cypress, te darás cuenta de la importancia de crear soluciones elegantes para superar sus limitaciones. ¡Sigue explorando y aprendiendo! Tu dominio de esta herramienta será un activo preciado en cualquier equipo de desarrollo.