Conditionally assert element values in DOM depending on it's value in backend with Cypress?

user_3729830 0
Viewed 48

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.

cypress reactjs javascript
4 Answers

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)
  }
})
user_183667490

you can do:

cy.get('#input-expiration-date').then(element => {
//and here you can have conditions and access the DOM element

})
user_143405760

There a Chai method oneOf() you can use.

Cypress uses Chai internally, so the expression works inside .should().

cy.get('#input-expiration-date')
  .invoke('val')
  .should('have.oneOf', [expirationDate, ''])

Using Chai directly

cy.get('#input-expiration-date').then($input => {
  expect($input.val()).to.have.oneOf([expirationDate, ''])
})
user_169977070

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
    }
  })
user_45712710
Related