Cypress - Prompt Pop-up Window

Cypress - Handling Prompt Pop-up Windows

Cypress can effectively manage JavaScript prompt pop-up windows (window.prompt()), which allow users to input text. Unlike alerts or confirmations where Cypress can only accept or dismiss, prompts require a way to programmatically provide input. This is achieved using cy.window() in conjunction with cy.stub().

cy.window() grants access to the window object of the application under test. cy.stub() then replaces the native window.prompt function with a version that you control, allowing you to specify the text that should be ‘entered’ into the prompt.

Example: Interacting with a JS Prompt

Consider a webpage with a button that, when clicked, triggers a JavaScript prompt. For instance, a page at https://the-internet.herokuapp.com/javascript_alerts has a ‘Click for JS Prompt’ button.

When this button is clicked, a prompt appears asking for input. If the user types ‘Hello Cypress!’ and clicks ‘OK’, a message like ‘You entered: Hello Cypress!’ might appear on the page.

Implementation in Cypress

To automate this interaction, including providing text to the prompt and verifying the outcome, you would write a Cypress test like this:

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

    it('should enter text into a prompt and verify the result', () => {
        const inputText = 'Hello Cypress!';

        cy.window().then((win) => {
            // Stub window.prompt before it's called
            // This stub will automatically be called when the prompt is triggered
            // and will return the specified 'inputText'
            cy.stub(win, 'prompt').returns(inputText);
        });

        // Click the button that triggers the prompt
        cy.contains('button', 'Click for JS Prompt').click();

        // Verify that the application displays the entered text
        cy.get('#result').should('have.text', `You entered: ${inputText}`);
    });

    it('should handle cancelling a prompt', () => {
        cy.window().then((win) => {
            // To simulate clicking 'Cancel', the stub should return null
            cy.stub(win, 'prompt').returns(null);
        });

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

        // Verify the result when 'Cancel' is chosen (or no input is given)
        // The application might show 'You entered: null' or an empty string depending on its logic
        cy.get('#result').should('have.text', 'You entered: null');
    });
});

Execution Analysis:

1. cy.visit(): Navigates to the page with the JavaScript alerts.

2. cy.window().then((win) => { ... }): Gets access to the application’s window object.

3. cy.stub(win, 'prompt').returns(inputText): This is the crucial step. It replaces the browser’s native prompt function with a stub. When the application code calls window.prompt(), our stub is executed instead. It immediately returns the inputText value (or null for cancel), simulating what a user would type and then click ‘OK’ (or ‘Cancel’).

4. cy.contains('button', 'Click for JS Prompt').click(): This action triggers the (now stubbed) prompt.

5. cy.get('#result').should(...): Verifies that the application reacted correctly to the input provided via the stubbed prompt.

The Cypress Command Log will show the stub being applied and the subsequent actions and assertions. This method provides full control over prompt interactions without any visual pop-up interrupting the test flow.

For more details on stubbing, refer to the Cypress documentation on cy.stub(): cy.stub().