Cypress Alerts and Popups

Web pages sometimes display browser alerts, confirmation dialogs, or custom popup windows. Cypress handles these differently depending on their type. This topic explains how to manage each kind of popup during a test.

Browser Alerts

A browser alert is a small system dialog showing a message with an OK button. Cypress automatically accepts these alerts by default, so tests continue without extra code.

cy.get('#delete-button').click()
// Cypress auto-accepts the following alert

A Simple Way to Picture It

Think of a browser alert as a security guard who nods and lets you pass without asking questions. Cypress plays that guard role automatically for basic alerts. You only need extra code when you want to check the alert's message first.

Checking Alert Text

Cypress lets you listen for the window alert event and inspect its message before it closes.

cy.on('window:alert', (text) => {
  expect(text).to.equal('Are you sure you want to delete this item?')
})
cy.get('#delete-button').click()

This pattern confirms the exact wording shown to the user during a critical action.

Confirmation Dialogs

A confirmation dialog offers both OK and Cancel buttons instead of a single OK button. Cypress automatically accepts these dialogs by default, similar to regular alerts.

cy.get('#logout-button').click()
// Confirmation dialog gets accepted automatically

Rejecting a Confirmation Dialog

Some tests need to simulate a user clicking Cancel instead of OK. Cypress allows overriding the default behavior using window:confirm.

cy.on('window:confirm', () => false)
cy.get('#logout-button').click()

Returning false simulates a Cancel click, while returning true simulates an OK click.

Alert Handling Flow

Button Click Triggers Alert
     |
     v
Cypress intercepts the alert event
     |
     v
Default: auto-accept
Custom: check text or override response
     |
     v
Test continues normally

Custom Popups Built in HTML

Many modern websites use custom popup windows built from regular HTML elements instead of browser alerts. These popups behave like any other element on the page, since they do not use the browser's native dialog system.

cy.get('.modal').should('be.visible')
cy.get('.modal .close-button').click()
cy.get('.modal').should('not.exist')

Difference Between Native and Custom Popups

Native Browser Alert
  - Built into the browser itself
  - Handled with window:alert or window:confirm

Custom HTML Popup
  - Built from divs and buttons
  - Handled with regular cy.get selectors

Handling Popups That Block the Page

A custom popup sometimes covers the page with a semi-transparent background layer. Tests must close this popup before interacting with elements underneath it, since the layer can block clicks.

cy.get('.overlay').should('not.exist')

Confirming the overlay disappears prevents accidental click failures on hidden elements.

Testing Cookie Consent Banners

Many websites show a cookie consent banner on first visit, which counts as a custom popup requiring dismissal before further testing.

cy.get('.cookie-banner').find('button').contains('Accept').click()

Dismissing this banner early in a test avoids interference with later steps.

Key Points

• Cypress automatically accepts browser alerts and confirmation dialogs by default.
• window:alert and window:confirm allow inspecting or overriding dialog behavior.
• Custom HTML popups get handled using regular selectors like any other element.
• Overlay layers should be confirmed closed before interacting with elements beneath them.
• Cookie consent banners often need dismissal early in a test.