Cypress - Alerts

Cypress - Handling Alerts, Confirmations, and Prompts

Cypress provides robust mechanisms for interacting with native browser dialogs like alerts, confirmation pop-ups, and prompts. By default, Cypress handles these dialogs automatically, but you can also control their behavior and verify their content.

Window Alerts (window:alert)

A browser alert (window.alert()) displays a message and an ‘OK’ button. Cypress automatically clicks ‘OK’ on alerts without the alert dialog being visually displayed during the test run. However, the occurrence of the alert is logged in the Cypress Command Log.

To verify the text of an alert, you need to listen for the window:alert event using cy.on(). This event listener must be registered before the action that triggers the alert.

Verifying Alert Text

Here’s how to verify the text content of an alert:

describe('Alert Handling', () => {
    beforeEach(() => {
        // Visit a page with an alert-triggering button
        // For example, a page with: <button onclick="alert('Please fill out all fields!')">Submit</button>
        cy.visit('/path-to-your-test-page.html'); // Replace with your actual test page
    });

    it('should display an alert with specific text', () => {
        // Listen for the window:alert event
        cy.on('window:alert', (alertText) => {
            // Assert the text of the alert
            expect(alertText).to.equal('Please fill out all fields!');
        });

        // Trigger the action that causes the alert
        cy.get('button#submit-button').click(); // Example selector
    });
});

In the Cypress Command Log, you will see the window:alert event logged, along with your assertion results. The alert itself won’t visually interrupt the test.

Confirmation Pop-ups (window:confirm)

A confirmation pop-up (window.confirm()) presents a message with ‘OK’ and ‘Cancel’ buttons. By default, Cypress automatically clicks ‘OK’. You can verify the confirmation message and also control whether ‘OK’ or ‘Cancel’ is clicked.

Verifying Confirmation Text and Clicking ‘OK’ (Default)

To verify the text and accept the confirmation (click ‘OK’):

describe('Confirmation Pop-up Handling', () => {
    beforeEach(() => {
        cy.visit('https://the-internet.herokuapp.com/javascript_alerts');
    });

    it('should verify confirmation text and accept', () => {
        // Listen for the window:confirm event
        cy.on('window:confirm', (confirmText) => {
            expect(confirmText).to.equal('I am a JS Confirm');
            // Cypress clicks 'OK' by default, but returning true explicitly also works
            // return true;
        });

        cy.contains('button', 'Click for JS Confirm').click();

        // Verify the result message after clicking 'OK'
        cy.get('#result').should('have.text', 'You clicked: Ok');
    });
});

Verifying Confirmation Text and Clicking ‘Cancel’

To click ‘Cancel’ on a confirmation pop-up, you must return false from the cy.on('window:confirm', ...) event handler. This overrides Cypress’s default behavior of clicking ‘OK’.

describe('Confirmation Pop-up Handling', () => {
    beforeEach(() => {
        cy.visit('https://the-internet.herokuapp.com/javascript_alerts');
    });

    it('should verify confirmation text and cancel', () => {
        // Listen for the window:confirm event and return false to click 'Cancel'
        cy.on('window:confirm', (confirmText) => {
            expect(confirmText).to.equal('I am a JS Confirm');
            return false; // This simulates clicking the 'Cancel' button
        });

        cy.contains('button', 'Click for JS Confirm').click();

        // Verify the result message after clicking 'Cancel'
        cy.get('#result').should('have.text', 'You clicked: Cancel');
    });
});

Key takeaway: Register cy.on() event listeners before the action that triggers the dialog. This ensures Cypress can intercept the event correctly.

For further reading on event handling, refer to the official Cypress documentation on events: Cypress Events.