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

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.

CodePudding user response：

you can do:

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

})

CodePudding user response：

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, ''])
})