Handling Alerts, Modals, and Popups in Cypress

In modern web applications, UI elements like alerts, modals, and popups are commonly used for notifying users, capturing input, or prompting confirmation. For test automation engineers using Cypress, it’s essential to handle these dynamic elements effectively to ensure robust and reliable end-to-end tests.

In this blog, we’ll explore how to handle JavaScript alerts, browser popups, and modal windows using Cypress, with practical examples and best practices.

🔔 1. Handling JavaScript Alerts (window.alert)

JavaScript alerts are simple browser-native popups triggered using window.alert().

Example:

javascript

Copy

Edit

alert("This is a test alert!");

Cypress automatically handles alerts by auto-accepting them. However, you can assert that an alert was called:

js

Copy

Edit

cy.on('window:alert', (text) => {

  expect(text).to.equal('This is a test alert!');

});

No need to manually click "OK"—Cypress dismisses alerts behind the scenes.

✅ 2. Handling Confirmation Boxes (window.confirm)

Confirmation dialogs appear when the app asks for user approval (like delete confirmations).

Example:

javascript

Copy

Edit

confirm("Are you sure you want to delete?");

Cypress automatically clicks "OK" by default. To simulate clicking "Cancel," override the behavior like this:

js

Copy

Edit

cy.on('window:confirm', () => false); // Simulates clicking "Cancel"

To assert the message:

js

Copy

Edit

cy.on('window:confirm', (message) => {

  expect(message).to.equal('Are you sure you want to delete?');

  return true; // Simulate clicking "OK"

});

🪟 3. Handling Modal Windows (Custom UI Popups)

Unlike alerts, modals are usually HTML elements styled to appear like popups. These do not block code execution and can be interacted with like any DOM element.

Example HTML Modal:

html

Copy

Edit

<div id="myModal" class="modal">

  <p>Are you sure?</p>

  <button class="confirm">Yes</button>

  <button class="cancel">No</button>

</div>

Test Example:

js

Copy

Edit

cy.get('#myModal').should('be.visible');

cy.get('.confirm').click();

Cypress treats modals just like any other part of the page, so use standard commands (get, click, contains, etc.).

🚫 4. Blocking or Skipping Unwanted Popups

Some tests might be interrupted by popups from chat widgets, cookies, or surveys. You can:

Use CSS selectors to hide them via invoke('hide')

Close them with .click() if a close button exists

Stub the source script if it's a third-party tool

Example:

js

Copy

Edit

cy.get('.popup-close-button').click();

Or:

js

Copy

Edit

cy.get('.annoying-popup').invoke('hide');

💡 Best Practices

Use cy.on() only when needed – don’t overload tests with unnecessary alert handlers.

Don’t rely on alert timing – Cypress auto-queues actions, so alerts should be handled gracefully.

Use data attributes for better modal targeting (e.g., data-cy="confirm-btn").

Avoid testing browser behavior like native alerts too deeply—focus on your app’s response to those alerts.

✅ Conclusion

Cypress makes handling alerts, modals, and popups seamless and developer-friendly. Whether it's native browser dialogs or custom modal windows, Cypress provides the flexibility to interact with or assert on these elements effectively. By mastering these techniques, you can write cleaner, more robust test suites and cover critical user interactions without flaky workarounds.

Learn Cypress Training

Read More: Writing Reusable Custom Commands in Cypress
Read More: Cypress vs Playwright: Which is Better?
Read More: Testing Forms and Input Fields with Cypress

Visit IHUB Talent Training Institute in Hyderabad
Get Direction