Guardando elementos

¿Cómo podemos guardar elementos en Cypress para reutilizarlos?

La eficiencia y la reutilización del código son conceptos clave al escribir pruebas en Cypress. Saber cómo guardar y manipular elementos permite evitar la repetición innecesaria de la misma sintaxis, optimizando así el proceso de prueba. Vamos a descubrir cómo hacerlo.

¿Cuál es la diferencia entre Cypress y otras herramientas como Selenium?

En otras herramientas, como Selenium o Puppeteer, es habitual asignar elementos a variables para manipularlos posteriormente. Algo como:

let input = driver.findElement(By.name('input-name'));
// Realizar acciones con 'input'

Sin embargo, en Cypress, aunque podrías intentarlo, esto no es recomendado. Al definir las variables de esta manera y tratar de manipularlas, en muchos casos no funcionarán como se espera, especialmente cuando se tratan de validaciones o aserciones.

¿Cómo se utiliza .then() en Cypress?

Cypress proporciona un comando .then() que se asemeja al manejo de promesas en Javascript. Este comando devuelve elementos en un callback y te permite operar con ellos de forma eficaz. Por ejemplo:

cy.get('form').then(($form) => {
  // A partir del elemento 'form', buscar los 'input'
  const inputs = $form.find('input');
  expect(inputs.length).to.equal(15);
});

Este enfoque asegura que el código sea más legible y directo en su lógica de manipulación de elementos.

¿Cómo podemos usar el comando wrap en Cypress?

El comando .wrap() es vital cuando trabajamos con elementos de jQuery que Cypress te devuelve. Los elementos devueltos son manipulados como jQuery, pero si se desea que estos elementos sean nuevamente tratados bajo la sintaxis de Cypress, utilizamos .wrap().

cy.get('form').then(($form) => {
  const inputs = $form.find('input');
  cy.wrap(inputs).should('have.length', 15);
});

Esto permite acceder nuevamente a las funciones propias de Cypress sobre un elemento que inicialmente era de jQuery, ampliando así las capacidades de aserción dentro de nuestras pruebas.

¿Qué aserciones podemos usar en Cypress?

Las aserciones permiten comprobar que los elementos que estamos manipulando cumplen con nuestras expectativas. Por ejemplo, usando expect para verificar la cantidad de inputs:

expect(inputs.length).to.equal(15);

Por otro lado, usando .should() con elementos envueltos mediante wrap también podemos realizar aserciones directamente dentro del flujo de Cypress:

cy.wrap(inputs).should('have.length', 15);

Las aserciones son cruciales para verificar el correcto funcionamiento de tu aplicación y confirmar que los resultados son los esperados. En la siguiente clase, profundizaremos en los distintos tipos de aserciones para robustecer aún más las pruebas.

Recomendaciones prácticas

• Evita las repeticiones: Usa .then() para reutilizar elementos y evitar la repetición de código.
• Utiliza .wrap() cuando trabajes con elementos jQuery: Esto te permitirá continuar usando la sintaxis de Cypress con estos elementos.
• Familiarízate con las aserciones: Estas son fundamentales para comprobar el comportamiento esperado de tus aplicaciones y asegurar la estabilidad del código.

Con estas herramientas y técnicas, tus pruebas en Cypress serán más eficientes y mantenibles. ¡Continúa explorando nuevas formas de mejorar tus habilidades en testing!