How to run next Cypress cy commands while other is still processing?

Question

I am maintaining a react project that uses Cypress. Cypress by default is asynchronous. How to perform next cy commands while the above cy command is still processing?

Example:

cy.get('showDialog').click()               // Instantly closes due to some react states
cy.get('showDialogCloseButton').click()    // still loading looking for showDialogCloseButton which eventually fails 

// need to execute this again to show dialog and complete above cy command:
cy.get('showDialog').click()

However, the last command can't be executed since it needs the above command to be finished (which resulted to failure)

Answer 1

Using cy.wait() after the cy.get('showDialogCloseButton').click()

ex:

cy.get('showDialogCloseButton').click();
cy.wait(1000);

With this 3rd command will execute after 1s, always but will make your test suite unnecessarily slow.

So then you can try by increase the timeout(s)

cy.get('showDialog',{timeout: 30000}).click({timeout: 30000});

This command will only fail after 30 seconds of not being able to find the object, or, when it finds it, 30 seconds of not being able to click it.

You can try your own timeout So you can easily do that with validate also,

cy.get('showDialog', { timeout: 30000 }).should('be.visible').then(() => {
      cy.get('showDialog').click();
   })