Esperas y Timeouts en Cypress: Uso Eficiente y Práctico

¿Cómo espera Cypress por los elementos?

Cypress es una herramienta automatizada que simplifica las pruebas de interfaz de usuario al esperar automáticamente por los elementos en nuestras pruebas. Pero, ¿alguna vez te has preguntado cómo manejar situaciones donde los elementos tardan más de lo esperado en estar disponibles? Aquí exploraremos las opciones que nos ofrece Cypress para manejar estos casos, entender los tiempos de espera y cuándo es mejor utilizarlos.

¿Qué es esperar por un tiempo definido?

Una de las opciones más básicas que nos ofrece Cypress es esperar por un tiempo definido utilizando el comando .wait(). Aunque puede parecer una forma fácil de garantizar que un elemento estará listo, debemos tener en cuenta que:

• Utilización restringida: Este comando debería considerarse como último recurso.
• Duración: Se especifica en milisegundos, por ejemplo, cy.wait(5000) para esperar 5 segundos.
• Responsabilidad: Recuerda que un gran poder conlleva una gran responsabilidad. Es un método útil, pero debes usarlo con sabiduría para evitar impactos negativos en el rendimiento de tus pruebas.

¿Cómo esperar por un elemento específico?

Para esperar por un elemento específico, Cypress brinda la función cy.get(). Este método espera automáticamente hasta 4 segundos por defecto (ajustable) a que el elemento esté disponible en el DOM.

• Uso típico: cy.get('.button-login') espera al botón de inicio de sesión en la página de Platzi.
• Personalización: Puedes ajustar el "timeout" específico de un elemento pasando un objeto como segundo parámetro: cy.get('.button-login', { timeout: 6000 }).

¿Cómo realizar una aserción al esperar por un elemento?

Realizar una aserción mientras se espera un elemento garantiza que el estado del elemento sea el esperado. La forma común de realizar esto es usando should().

cy.get('.button-login', { timeout: 6000 }).should('be.visible');

• Principios importantes:
  • Aunque un "timeout" se puede aplicar al método get, no altera el tiempo de espera de la aserción should.
  • Esto es útil para verificar rápidamente si el elemento es visible sin esperar demasiado.

¿Cómo deshabilitar los reintentos automáticos?

Cypress tiene la capacidad de reintentar automáticamente cuando no encuentra un elemento. Sin embargo, hay situaciones en las que deseamos deshabilitar esta opción. Para ello, ajustamos el timeout a cero.

cy.get('.slide-banner', { timeout: 0 });

• Beneficio: Deshabilitar los reintentos es útil cuando queremos comprobar inmediatamente y con precisión si un elemento está presente desde el principio.

Consejos finales para el manejo de timeouts

Al trabajar con Cypress, elegir el tiempo de espera y los ajustes de timeout adecuados es vital para equilibrar rendimiento y eficiencia.

• wait explícito vs. implícito: Aunque esperar explícitamente con wait asegura pausas, ajustar el timeout de un elemento es generalmente más eficiente.
• Impacto en rendimiento: Un timeout alto puede ralentizar pruebas, mientras que un timeout bien ajustado asegura rapidez sin perder precisión.

Recuerda que el manejo efectivo de los tiempos de espera es fundamental para una automatización exitosa. Ajústate a las prácticas recomendadas y sigue mejorando tus habilidades en lenguaje script con Cypress. ¡Nos vemos en la próxima clase donde aprenderemos sobre el modo headless!