Alerts and Popups in CypressIO

CypressIO has the capability of auto-handling browser events. Cypress automatically handles the popups.

There are three types of popups namely,

  • Alert popup
  • Confirmation popup
  • Prompt

Let us understand how cypress automatically handles the popups with the help of an example. When cypress automatically handles, it always selects the OK button

Example program for alert and confirm :

describe("Handling alerts and popups", () => {
  it("should handle the alerts automatically", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from
      // failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/popups");
    //clicking the button which throws the alert popup
   //As we are not handling,cypress selects OK 
    cy.get('[name="alert"]').click();
  });
});

Output :
alert-cypress

In the output, We won't understand how cypress automatically handles the alert and confirmation popup by clicking the OK button. By default, the cypress selects the ok button for the alert and confirmation popups.

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.

Let us understand how cypress internally triggers these events and handles popups with the help of an example by manually triggering the events.

Handling Alerts Example program:

describe("Handling alerts and popups", () => {
  it("should handle the alerts automatically", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      // returning false here prevents Cypress from failing the test
      return false;
    });
    cy.visit("https://chercher.tech/practice/popups");
    cy.on("window:alert", (str) => {
    //window:alert is the event which get fired on alert open
      expect(str).to.equal("I am alert");
    cy.get('[name="alert"]').click();
    });
  });
});

Output: The assertion whatever we are using in the program, to manually fire the event, it is internally created by cypress itself and handles the popup events by clicking the OK button.

alerts-cypressio

CypressIO Interview questions

Handling the Confirm popup

When a confirmation alert message occurs window:confirm is the browser event that is triggered. In 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.

Clicking the OK button in the confirmation popup :

describe("Handling confirm button", () => {
  it("should handle the alerts automatically", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      return false;
    });
    cy.visit("https://chercher.tech/practice/popups");
    //window:confirm is the event which get fired on alert open
    cy.get('[name="confirmation"]').click();
    cy.on("window:confirm", (str) => {
      expect(str).to.equal("I am confirm");
    });
  });
});

Output :

confirm-true-output-cypressio

Clicking the CANCEL [X] button in the confirmation popup :

describe("Handling confirm button", () => {
  it("should handle the alerts automatically", () => {
    Cypress.on("uncaught:exception", (err, runnable) => {
      return false;
    });
    cy.visit("https://chercher.tech/practice/popups");
    //window:confirm is the event which get fired on alert open
    cy.on("window:confirm", (str) => {
      return false;
    });
    cy.get('[name="confirmation"]').click();
  });
});

Output: To verify whether the alert returns true or false, right-click on the particular event and select the inspect element [open the console and verify the occurring event].

confirm-false-otput-cypressio

Handling prompts in CypressIO

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

In the below program,

  • 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.

Example program :

it("prompt type", function () {
  Cypress.on("uncaught:exception", (err, runnable) => {
    return false;
  });
  cy.visit("https://chercher.tech/practice/popups");
  cy.window().then(function(promptelement){
    cy.stub(promptelement, "prompt").returns("Hello");
    cy.get('[name="prompt"]').click()
  });
});

Output :

prompt-output-cypress

Cucumber BDD in CypressIO

0 results
Comment / Suggestion Section
Point our Mistakes and Post Your Suggestions