Handling Alerts and Popups in Cypress

Handling alerts and popups is key to testing real user interactions in web applications with Cypress.

This article explains how to handle alerts, confirms, and prompts effectively in Cypress with practical examples.

Popups in Javascript

In web browsers, Javascript handles the functional aspects of the web page. So to deliver a message to the user, we must use Javascript to do so. Pop-ups are the most used and effective way to deliver a message and get a message/input from a user, as they can be implemented and handled pretty quickly compared to other methods of communication between the browser artifacts and the end user.

There are three main types of pop-ups used inside a web browser. 

1. Alert Box
2. Confirm Box
3. Prompt Box

Alert Box

An alert box is used to convey a message to the user. When an alert is popped up on the web page, all of the other frames and layers are frozen, and then the alert popup is then displayed, prompting the user to acknowledge the message. So after reading the message, the user can click on “OK” to proceed with the current process.

Confirm Box

the Confirm box is used to convey and get a confirmation, verification, or acceptance for a particular fact or information. When the Confirm box is popped up, the user can select “Ok” or “Cancel” depending on the decision the user takes. By clicking “Ok” the user sends a TRUE statement, while by “Cancel” the user sends a FALSE statement.

Prompt Box

A prompt box prompts the user to input some value into the web page function, triggered along with the prompt popup. Usually, after a prompt box, another page is loaded with the inputs the user enters. After the user enters the input value, the user gets the option to click either “Ok” which sends the value through the function, or “Cancel” to cancel the process.

Difference between the Alert box and Confirm box

Both Alert boxes and Confirm boxes have the same job. It is to convey a specific message to the end user. But there is a difference we need to identify between these two types of pop-up boxes.

• The main difference is the context in which these two components are being used.
• The Alert box is used to give an Alert/Message to the user. It delivers the message and passes it on to the next function when the “OK” button is clicked.
• But when a Confirm box is used, the Message or the Alert sent is usually a Question or a Fact that needs to be acknowledged, so the user’s input for the pop-up will be either a “TRUE” or a “FALSE” which will use in the following function.

How to handle Alerts and Popups in Cypress?

Cypress provides native support for handling JavaScript popups like alert, confirm, and prompt using event listeners (cy.on) and method stubbing (cy.stub).

These dialogs are triggered from the window object, and Cypress allows intercepting and asserting these events without interacting with actual DOM elements.

1. Window:alert: Used for simple alert dialogs. Cypress automatically accepts alerts and allows you to assert the alert message via cy.on(‘window:alert’).

2. Window:confirm: Used for confirmation dialogs (OK/Cancel). Cypress auto-accepts them (returns true) but can be overridden to simulate a cancel action using

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

3. Window:prompt: Used for input dialogs. Cypress can simulate prompt responses using 

cy.window().then(win => cy.stub(win, 'prompt')).

Example for Handling Popup in Cypress

These examples show how Cypress simplifies handling alerts, confirms, and prompts using native browser events and controlled test flows.

Handle JavaScript Alert (window.alert)

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

  expect(text).to.eq('I am an alert box!');

});

• Cypress listens for the window:alert event when the alert appears.
• The alert text is captured and asserted using expect.
• No manual interaction is needed, Cypress auto-accepts alerts.

Handle Confirm Dialog (window.confirm)

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

  expect(text).to.eq('Press a button!');

  return false; // simulate "Cancel"

});

• Cypress listens for the window:confirm event and verifies the message.
• Returning false simulates clicking “Cancel”; true would simulate “OK”.
• The response is validated by checking the updated DOM message.

Handle Prompt Dialog (window.prompt)

cy.window().then((win) => {

  cy.stub(win, 'prompt').returns('Cypress User');

});

• Cypress stubs the window.prompt method to simulate user input.
• The prompt returns ‘Cypress User’ automatically during test execution.
• The test then verifies that the expected input was registered in the DOM.

Handling Custom Modal Dialogs in Cypress

Custom modal dialogs, often built with JavaScript libraries, can interrupt workflows during testing.

Managing them in Cypress requires targeting their unique element properties and using Cypress commands effectively. Here’s how:

• Identify the Modal: Use Cypress commands like cy.get() or cy.contains() to locate modal elements based on their classes, IDs, or text content.
• Interact with Modal Elements: Perform actions such as clicking buttons (e.g., “OK” or “Close”) or filling input fields using commands like cy.click() or cy.type().
• Assert Modal Behavior: Validate modal appearance or disappearance using .should(‘be.visible’) or .should(‘not.exist’).

Users can ensure test flows remain smooth and reliable without interruptions by properly handling custom modals.

Handling Third-Party Popups and New Browser Windows

Third-party popups and new browser windows introduce challenges in test automation since Cypress operates in a single browser context.

These scenarios can be managed with workarounds and best practices:

• Block Unwanted Popups: Use the Cypress.on(‘window:confirm’) and Cypress.on(‘window:alert’) handlers to intercept and either accept or dismiss popups automatically.
• Simulate Desired Actions: Pass responses programmatically using the same popup event handlers for popups requiring user input.
• Handle New Windows: Since Cypress does not support multi-tab testing, rewrite tests to validate content by visiting the new page URL directly with cy.visit().

Handling external popups and new browser windows effectively guarantees smoother test execution within Cypress’s constraints.

Testing on Real Device Cloud with BrowserStack Automate

Popups and alerts often behave differently depending on the browser, device, or OS version. Testing them solely on local or headless setups can lead to missed issues in real user conditions.

Validating popup behavior on real devices is crucial to ensure test accuracy and reliability across varied conditions.

With BrowserStack Automate, teams can:

• Run Cypress tests on 3500+ real devices and browser combinations on their real device cloud.
• Validate alert, confirm, and prompt dialog behavior in real-world scenarios.
• Detect device- or browser-specific inconsistencies early in the pipeline.
• Eliminate the need to maintain in-house device labs with a scalable cloud solution.

Best Practices for Managing Alerts and Popups in Cypress

Here are the key best practices for managing alerts and popups in Cypress:

• Use cy.on() to handle and assert alert and confirm dialog messages.
• Stub window.prompt to simulate and test user input in prompt boxes.
• Assert the exact text within popups to ensure expected behavior.
• Test both acceptance (OK) and rejection (Cancel) flows where applicable.
• Always test on real devices and browsers to uncover environment-specific popup issues.

Talk to an Expert

Conclusion

Effectively handling alerts and popups is essential for building reliable and user-centric test automation with Cypress.

By using Cypress’s built-in support for window:alert, window:confirm, and window:prompt, along with stubs for customized interactions, teams can simulate and verify user flows with precision.

For maximum test coverage and accuracy, always validate popup behavior on real devices using platforms like BrowserStack Automate.

Run Cypress Tests on BrowserStack

Useful Resources for Cypress

Understanding Cypress

• Cross Browser Testing with Cypress : Tutorial
• Run Cypress tests in parallel without Dashboard: Tutorial
• Handling Test Failures in Cypress A Comprehensive Guide
• Cypress Test Runner: Tutorial
• Handling Touch and Mouse events using Cypress
• Cypress Automation Tutorial
• CSS Selectors in Cypress
• Performance Testing with Cypress: A detailed Guide
• Cypress Best Practices for Test Automation
• Test React Native Apps with Cypress
• Cypress E2E Angular Testing: Advanced Tutorial
• Cypress Locators : How to find HTML elements
• Maximizing Web Security with Cypress: A Step-by-Step Guide
• Conditional Testing in Cypress: Tutorial
• Cypress Web Testing Framework: Getting Started
• Cypress Disable Test: How to use Skip and Only in Cypress
• What’s new in Cypress 10? How it will change your current testing requirements

Use Cases

• How to Record Cypress Tests? (Detailed Guide)
• How to run your first Visual Test with Cypress
• How to Fill and Submit Forms in Cypress
• How to Automate Localization Testing using Cypress
• How to run Cypress Tests in Chrome and Edge
• How to use Cypress App Actions?
• How to Run Cypress Tests for your Create-React-App Application
• How to Run Cypress Tests in Parallel
• How to handle Click Events in Cypress
• How to Test React using Cypress
• How to Perform Visual Testing for Components in Cypress
• How to run UI tests in Cypress
• How to test redirect with Cypress
• How to Perform Screenshot Testing in Cypress
• How to write Test Case in Cypress: (with testing example)

Tool Comparisons

• Cypress vs WebdriverIO: Key Differences
• Cypress vs Selenium: Key Differences
• Playwright vs Cypress: A Comparison
• Cypress vs Selenium vs Playwright vs Puppeteer: Core Differences