An: Quick Overview of Handling Alerts and popups with Cypress

Reading Time: 2 minutes

Alerts and popup in cypress: 

Cypress can work with alert by default. The pop-up can be an alert or confirmation popup. Cypress is designed in such a way that it shall always click on the OK button on the pop-up. Moreover, Cypress has the ability to fire browser events.

An alert is triggered by window:alert event. This is by default handled by Cypress and the OK button on the alert gets clicked, without being visible during execution.

There are 3 types of alerts:

  1. Simple alerts with alert text, Ok button
  2. Confirm alerts with alert text, Ok & Cancel button
  3. Prompt alerts with alert text box, Ok & Cancel button

1. Simple alerts with alert text, Ok button

When the alert occurs window:alert is the browser event that is triggered by default for the alert event. Cypress automatically handles the event by clicking the OK button.

2. Confirm alerts and popup with alert text, Ok & Cancel button

When a confirmation alert message occurs window:confirm is the browser event that is triggered. In addition, the confirmation popup by default cypress clicks the OK button. But we can also click the cancel button in the confirmation popup by returning false in the events.

3. Prompt alerts with alert text box, Ok & Cancel button

Prompt is used to get value from the user in text format. It provides a text bar for user input; Prompt is a rarely used alert type.

  • cy.window() command fetches the object value of the currently active window.
  • In the below program since manual promises are resolved, cy.window() fetches the object value of the remote window which is the prompt window.
  • Like the alert and confirmation, there is no event named “window: prompt”. So to handle the prompt cy.stub() is used.
  • cy.stub() is used when we know what object will be exactly returned. Instead of calling the original function or method cy.stub() is replaced with the original function.

Code :

/// <reference types="cypress" />


   // url of website


cy.on('window:alert',function(AlertText) // for alert type

{expect(AlertText).eql('I am a JS Alert')

cy.contains('Click for JS Alert').click()

cy.get('#result').should('contain','You successfully clicked an alert') 

cy.on('window:confirm',function(ConfirmAlertText) // for Confirm-type alert

   expect(ConfirmAlertText).eql('I am a JS Confirm')

cy.contains('Click for JS Confirm').click()

cy.get('#result').should('contain','You clicked: Ok')

cy.window().then(function($promptelement){   // for prompt-type alert

   cy.stub($promptelement, "prompt").returns("Hello");

   cy.contains('Click for JS Prompt').click()

   cy.get('#result').should('contain','You entered: Hello')




Written by 

I am a software Consultant-QA at knoldus Inc in test automation studio. She is familiar with the core concepts of manual testing and automated testing using Selenium and cypress. She is always eager to acquire new tech skills and learn new & advanced concepts to advance herself. She likes to watch web series and listening music.