CODEWITHSUNDEEP
javascriptmodal-dialogcypress
Zuno
Zuno

Reputation: 461

Cypress modal doesn't close

I've read 5-6 relevant Stackoverflow threads, none appear to pertain to this (famous last words).

Cypress 12.3.0 (was happening on v9 so I upgraded, but the issue persists).

Problem only occurs in automation.

Test conducted in headed mode (Cypress > Edge).

  1. Click delete icon
  2. Modal appears
  3. Click delete button in modal

Expected result:

Action performed, modal closes.

Actual result:

Action performed, modal doesn't close.

Troubleshooting:

I added a command to close the modal using the modal's X button = Cypress can't find it.

If I don't add the above command, the succeeding test steps cannot click on elements because the modal that allegedly doesn't exist is covering them!

In Cypress > Edge, I can interact with and inspect the modal's elements.

This is crazy.

Code:

cy.contains('button', 'Delete Queue')
.click();

No iframes involved.

I'm enquiring internally to establish what JavaScript event or logic is closing the modal so I can trigger that. Or close the modal if it can be found with JavaScript...

Just wondered if you guys have any ideas?

Thanks

Upvotes: 1

Views: 902

Answers (3)

user23820655
user23820655

Reputation: 11

Added cy.wait after the modal was opened and before selecting an element on modal.

This resolved the issue for me:

cy.get('.sc-gsDKAQ.sc-dUbtfd.exemMH.dTJusa.glowButton').click() --> this opens the modal
cy.wait(5000)


cy.get('.newElement').contains('Text Input').click() --> selecting an element on modal

Upvotes: 1

Zuno
Zuno

Reputation: 461

For whatever reason the app wouldn't close the modal after deleting the queue so I closed it myself using the correct CSS selector.

Upvotes: 0

Grogu
Grogu

Reputation: 1

Maybe this can resolve your problem :

cy.contains('button', 'Delete Queue')
.click();
cy.get('[data-test-id="modal-close-button"]')
.click();

Let me know if it works.

Upvotes: -2

Related Questions