Introducción al curso

1

Automatización de Pruebas UI con Cypress

Conociendo Cypress

2

Pruebas Automatizadas con Cypress: Ventajas y Desventajas

3

Automatización de Pruebas con Cypress: Instalación y Configuración

Crea tu primer prueba

4

Estructuración y Configuración de Pruebas en Cypress

5

Navegación y recarga de páginas con Cypress

Elementos y localizadores

6

Uso de Cypress para Localizar Elementos en Formularios Web

7

Búsqueda y Selección de Elementos en Cypress con Contains y Find

8

Uso de Cypress: Guardar e Interactuar con Elementos DOM

Creando una Prueba

9

Aserciones en Cypress: TDD, BDD y Chai para Pruebas Efectivas

10

Optimización de pruebas con hooks en desarrollo web

11

Debugging en Cypress: Herramientas y Técnicas Esenciales

Esperar por elementos

12

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

Ejecución de Cypress

13

Modos de Ejecución de Pruebas con Cypress

Interactuando con elementos

14

Uso de Cypress: Click y Eventos en Pruebas Automatizadas

15

Manejo de Inputs de Texto en Cypress: Escribir y Limpiar Eficazmente

16

Interacción con Radiobotones y Checkboxes en Cypress

17

Extracción y manejo de datos en pruebas con Cypress

18

Interacción con Selects y Dropdowns Dinámicos en Formularios

19

Interacción y validación de tablas HTML con Cypress

20

Manejo e Interacción con Date Pickers en Formularios

21

Interacción con Pop-ups, Modales y Tooltips en Cypress

22

Simulación de Drag and Drop con Eventos del Mouse

Próximos pasos

23

Automatización de Pruebas Web con Cypress: Proyecto Final

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

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

12/23
Recursos

¿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!

Aportes 1

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Comando Wait

📚 Documentación
.
Cypress nos expone un comando para manipular la ejecución secuencial de nuestras pruebas.
.
Con wait podemos manipular dos oepraciones:

  • .wait(time) Timer en milisegundos
  • .wait(alias) Alias de elementos identificados como .as()

.

Nota.
La mayoría de las veces, no deberíamos expresar de manera arbitraria la espera ✨ Buenas prácticas

.
Como fue visto en sesión, podemos definir un tiempo en milisegundos un bloque de código. Sin embargo, el uso del comando wait luce más mediante la ejecución en conjunto con formato alias.
.
Por ejemplo, podemos esperar por la resolución de una petición a una página basada por indice y realizar alguna operación de prueba:

cy.intercept('/accounts/*').as('getAccount')
cy.visit('/accounts/123')
cy.wait('@getAccount').then((interception) => {})

O, supongamos que podamos esperar un código de respuesta en específico:

cy.wait('@getAccount').its('response.statusCode').should('eq', 200)

.

Practica

Del sitio de pruebas en la sección de Waiting, tenemos el caso donde automatizamos un formulario que posteriormente, inspeccionamos la respuesta de ejecución con wait.

    it('wait test"', () => {
        cy.visit('/commands/waiting')

        cy.get('.wait-input1').type('Wait 1000ms after typing')
        cy.wait(1000)
        cy.get('.wait-input2').type('Wait 1000ms after typing')
        cy.wait(1000)
        cy.get('.wait-input3').type('Wait 1000ms after typing')
        cy.wait(1000)

        cy.intercept('GET', '**/comments/*').as('getComment')
        cy.get('.network-btn').click()
        cy.wait('@getComment').its('response.statusCode').should('be.oneOf', [200, 304])

    })