How to check if element was shown in cypress-CodePudding

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.

CodePudding user response：

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'
)

CodePudding user response：

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');