Trying to do Cypress Testing with my React app.
I'm retrieving an object with an attribute expirationDate from the backend. It's an integer with format YYYYMMDD. In my corresponding frontend in the <input> component, it's rendered as an YYYY-MM-DD string.
However the object may optionally not have an expiration date at all, which is instead represented as the attribute being -1 or -2. This is presented as an empty string '' in the <input>.
I thus need to conditionally check the value. How do I go about doing this with Cypress?
Closest I have right now is
cy.get('#input-expiration-date').should('have.value', expirationDate || '')
But this is not really an accurate test of the above conditions.
Conditional testing can be done as follows, but this is bad practice.
cy.get('#input-expiration-date')
.invoke('val')
.then(val => {
if (val === expirationDate) { // fails because page is still fetching
...
}
})
The test runs faster than the value can be fetched from the server.
You can avoid the issue by waiting for the object fetch with cy.intercept() and do the conditional check then.
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)
}
})
Or if you want to check and further do some actions based on the value, you can do something like this:
cy.get('#input-expiration-date')
.invoke('val')
.then((val) => {
if (val == expirationDate) {
//Do something
} else if (val == '') {
// Do something
} else {
//Do something
}
})
you can do:
cy.get('#input-expiration-date').then(element => {
//and here you can have conditions and access the DOM element
})