Intentando hacer Cypress Testing con mi aplicación React.
Estoy recuperando un objeto con un atributo fecha de caducidad del backend. Es un número entero con formato AAAAMMDD . En mi interfaz correspondiente en el componente <input> , se representa como una cadena YYYY-MM-DD .
Sin embargo, el objeto puede opcionalmente no tener una fecha de caducidad, que en su lugar se representa como el atributo -1 o -2 . Esto se presenta como una cadena vacía '' en <input> .
Por lo tanto, necesito verificar condicionalmente el valor. ¿Cómo hago para hacer esto con Cypress?
Lo más cercano que tengo ahora mismo es
cy.get('#input-expiration-date').should('have.value', expirationDate || '')Pero esto no es realmente una prueba precisa de las condiciones anteriores.
Las pruebas condicionales se pueden realizar de la siguiente manera, pero esto es una mala práctica .
cy.get('#input-expiration-date') .invoke('val') .then(val => { if (val === expirationDate) { // fails because page is still fetching ... } })La prueba se ejecuta más rápido de lo que se puede recuperar el valor del servidor.
Puede evitar el problema esperando a que se obtenga el objeto con cy.intercept() y luego realice la verificación condicional.
let expirationDate = 'YYYYMMDD' cy.intercept(url).as('object') cy.visit(...) cy.wait('@object').then(object => { if (object.expirationDate) { cy.get('#input-expiration-date') .should('have.value', expirationDate) } })O si desea verificar y realizar algunas acciones en función del valor, puede hacer algo como esto:
cy.get('#input-expiration-date') .invoke('val') .then((val) => { if (val == expirationDate) { //Do something } else if (val == '') { // Do something } else { //Do something } })tu puedes hacer:
cy.get('#input-expiration-date').then(element => { //and here you can have conditions and access the DOM element })