How to check if element was shown in cypress

user_8677593 0
Viewed 59

I have a problem with cypress + react.

I have a situation where I Request data from EP after blurring of input and it will show a message that the data is validating, the message disappears right after the request is done.

I have to test that message is visible after input blur but it disapears so fast that cypress can't detect it / not assert it

part of test code:

  cy.get('.some-input').type('some-value')
  cy.get('body').click(); // hacky way to blur from input
  cy.get('.message')
    .contains('Please wait whilst we validate your details')
    .should('be.visible');

part of react code:

{accountNumberValidationInProgress && renderMessage(t('Please wait whilst we validate your details'))}

so accountNuberValidationInProgress is true when I blur from some input and the request started, after I receive data from EP this variable is set again to false.

cypress reactjs javascript
2 Answers

You can first check for the toast message to be visible and then not to be visible.

cy.contains('Please wait whilst we validate your details').should('be.visible')

cy.contains('Please wait whilst we validate your details').should(
  'not.be.visible'
)
user_45712710

You can try to freeze-frame the app with cy.clock(). It should work if the toast is using setTimeout().

  cy.clock()

  cy.get('.some-input').type('some-value')
  //cy.get('body').click(); // hacky way to blur from input
  cy.get('.some-input').blur()
  
  cy.tick(100)  // tick 100ms, also try other times

  cy.get('.message')
    .contains('Please wait whilst we validate your details')
    .should('be.visible');

Delaying request

Since the toast is controlled by a request, try adding an intercept with delay.

  cy.intercept(url-of-request, (req) => {
    req.on('response', (res) => {
      res.delay(1000)                // allow time for toast to show
    })
  })

  cy.get('.some-input').type('some-value')
  cy.get('.some-input').blur()
  
  cy.get('.message')
    .contains('Please wait whilst we validate your details')
    .should('be.visible');
user_183667490
Related