CODEWITHSUNDEEP
javascriptcypress
archer
archer

Reputation: 83

How do I get the content in javacript popups with Cypress?

I am using sweetalert2 on my website for creating popups. The sweetalert2 library adds DOM nodes to the page with JavaScript when a trigger is fired e.g. by clicking a button. The parent node of everything that is added is a div tag:

<div class="swal2-container">
   ...
</div>

In my Cypress test, I load the page and click the button that triggers the popup. However, the added DOM node (and its child nodes) are not found by Cypress:

it('Get content of popup', () => {
    cy.get("[id='popup_trigger_button']").click()
    cy.get("[class='swal2-container']", {timeout: 10000})
})

The test fails at the last row since the (added) node with the class "swal2-container" is not found on the page by Cypress. How can I get Cypress to find it?

Upvotes: 2

Views: 1074

Answers (1)

user14783414
user14783414

Reputation:

The class swal2-container is not the only class on the element you seek, so an exact match does not work.

Add a wildcard to the attribute match

it('Get content of popup', () => {
  cy.get('[id="popup_trigger_button"]').click()
  cy.get('class*="swal2-container"]')
})

or use the more conventional (partial) dot selector

it('Get content of popup', () => {
  cy.get('[id="popup_trigger_button"]').click()
  cy.get('.swal2-container')
})

This test runs against the SweetAlert2 demo page

it('works with partial attribute selector', () => {
  cy.visit('https://sweetalert2.github.io/')
  cy.contains('button', 'Show success message').click()
  cy.get("[class*='swal2-container']")                    // passes
})

And this

it('works with class selector', () => {
  cy.visit('https://sweetalert2.github.io/')
  cy.contains('button', 'Show success message').click()
  cy.get('.swal2-container')                              // passes
})

But his one fails because the class is incorrectly specified

it('works with partial attribute selector', () => {
  cy.visit('https://sweetalert2.github.io/')
  cy.contains('button', 'Show success message').click()
  cy.get("[class='swal2-container']")                    // fails
})

Upvotes: 2

Related Questions