Navegar entre diferentes dominios en diferentes tests y compartir información entre ambas páginas

How to replicate tests without using CI Origin in Cypress?

When working with automated tests in Cypress, an indispensable tool for developers, the ability to replicate tests without resorting to CI Origin or experimental functions is an interesting challenge. Here I will show you how to do it by creating a simple plugin in your configuration file, thus ensuring that your tests are more versatile and adaptable to different environments.

How to set up a plugin in Cypress?

To start, modify your Cypress configuration file. While previous versions used a dedicated file for plugins, you can now add your code directly in the configuration section. The goal is to handle data between different tests.

1. Initialize an object: First, create a const that acts as a key and value store.

   const storage = {};

2. Define tasks: Create functions to store and retrieve values using onTask. This method receives an object with properties and their respective callbacks.

   on('task', { store(value) { const key = Object.keys(value)[0]; storage[key] = value[key]; return null; }, get(key) { console.log(storage); return storage[key] || null; } } });

Remember that you should always return something in plugins, and if you don't need to return a particular data, use null to avoid errors.

How to share information between tests?

The next step is to implement a flow that allows sharing information in different tests within Cypress, without resorting to the Origin CI. For this, you will need to visit different pages and use the previously defined tasks.

1. Create the first test: Visit a page, get the desired text and save the value using the save task.

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

2. Create the second test: Visit another page and use the get task to retrieve the previously saved value.

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

With this technique, you manage to share information between tests without using the Origin CI, allowing you to perform more flexible tests.

What about links that open new tabs?

Another common challenge when using Cypress is handling links that open new tabs. Cypress, unlike Puppeteer or Selenium, does not offer a native feature to switch tabs. However, you can:

• Intercept click events on these links and change the target property to _self to prevent opening a new tab.
• Use methods like cy.window() to manipulate the browser behavior and keep everything within the same context.

As you develop your skills with Cypress, you will realize the importance of creating elegant solutions to overcome its limitations. Keep exploring and learning! Your mastery of this tool will be a valuable asset on any development team.