Tengo un div donde se realiza una llamada API, y el div se completa con datos de "éxito" si la llamada API tiene éxito, o falla si falla o si se agota el tiempo de espera (no sucede a menudo, pero puede suceder).
Digamos que el tiempo de espera global en Cypress está establecido en 30 segundos.
Esto es lo que tengo:
cy.get(failureElementSelector).should("not.exist"); cy.get(successElementSelector).should("exist");El problema con esto es que la afirmación del elemento de falla siempre pasa instantáneamente, y luego, incluso si la falla ocurre en 5 segundos, Cypress solo espera que aparezca el elemento de éxito, por lo que la prueba falla lentamente en 30 segundos en lugar de rápido. en 5 segundos
Del mismo modo, si acaba de cambiar el orden de las dos declaraciones, incluso si el elemento de falla aparece en 5 segundos, Cypress no puede esperar a que aparezca el elemento de éxito y la prueba falla en 30 segundos en lugar de 5 segundos.
Sería genial si pudiera hacer que Cypress observara ambas afirmaciones al mismo tiempo: siga comprobando si ha aparecido el elemento de éxito, en cuyo caso consideraría todo un éxito, mientras que al mismo tiempo Esté atento si el elemento de falla apareció para tratarlo inmediatamente como una falla de prueba.
¿Cómo puedo conseguir esto?
De esa manera, la única vez que necesitaría esperar 30 segundos es si la solicitud de API realmente se agota.
La mejor manera es interceptar la llamada a la API antes de hacer su afirmación.
cy.intercept('https://theDoaminName/pathName').as('aliasName') cy.click('button') cy.wait('@aliasName') cy.get(failureElementSelector).should("not.exist"); cy.get(successElementSelector).should("exist");Si está seguro de que eventualmente aparece uno u otro selector, combínelos en un selector múltiple.
Ref jQuery selector múltiple .
El primero que aparezca será pasado
cy.get(`${successElementSelector}, ${failureElementSelector}`) .should($el => { expect($el.text()).to.include('Success!') // whatever success data looks like })Sí, este es un problema común, buscar que algo no exista se resuelve instantáneamente y no puede evitarlo, a menos que haga algo como cy.wait() , lo cual no es recomendable.
Si tiene control sobre el código fuente de su aplicación, puede representar un div o un lapso que podría contener los indicadores de éxito y falla, y colocarle un atributo data-cy="status-container" .
Luego modifica su prueba de ciprés para buscar primero el contenedor, algo como esto:
cy.get('[data-cy="status-container"]').should('exist') // The success/failure indicators should be there now: cy.get(failureElementSelector).should("not.exist"); cy.get(successElementSelector).should("exist");La otra forma es usar el mismo elemento para mostrar el error/falla y verificar su contenido para determinar si es un éxito o una falla. Eso es básicamente lo mismo que lo anterior.