Cypress - Alerts

Cypress can work with alerts 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 the 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.

However, the execution logs will show the presence of the alert.

Implementation Alerts

The implementation of alerts in Cypress is given below −

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch url
      cy.visit("https://register.rediff.com/register/register.php");
      // click submit
      cy.get('input[type="submit"]').click();
   });
});

Execution Results

The output is as follows −

Cypress Execution Logs

The alert message gets displayed on the Cypress execution logs.

Cypress has the ability to fire the window:alert event by utilising the method on. Then, we can verify the alert text.

However, this event shall happen in the back end and will not be visible during the execution.

Implementation Alert text verification

Given below is the implementation for the alert text verification in Cypress −

describe('Tutorialspoint Test', function () {
   // test case
   it('Scenario 1', function (){
      // launch url
      cy.visit("https://register.rediff.com/register/register.php");
      // click submit
      cy.get('input[type="submit"]').click();
      // fire event with method on
      cy.on('window:alert',(t)=>{
         //assertions
         expect(t).to.contains('Your full name');
      })
   });
});

Execution Results

The output is mentioned below −

Implementation Alert Text Verification

The output logs show the successful verification of the alert text, produced by firing the alert event by Cypress.

For a confirmation pop-up, the browser event window:confirm is triggered. Just like alert pop-ups, Cypress can fire this event with the method on and clicks on the OK button by default.

Example

Let us have a look at the below example. Here, on clicking the Click for JS Confirm button, a confirmation pop up gets displayed.

JavaScript Alerts

The following confirmation pop-up with OK and Cancel buttons getting displayed.

JS Confirm.jpg

On clicking the OK button, the following is displayed −

You clicked: Ok

An image like the one given below will be displayed −

JS Alerts.jpg

On clicking the Cancel button, the following is displayed below Result −

You clicked: Cancel

An image like the one given below will be displayed −

JS Cancel

Implementation Confirmation verification

Given below is an implementation for the confirmation verification of alerts in Cypress −

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      //URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //fire confirm browser event and accept
      cy.get(':nth-child(2) > button').click()
      cy.on("window:confirm", (t) => {
         //verify text on pop-up
         expect(t).to.equal("I am a JS Confirm");
      });
   });
});

Execution Results

The output is stated below −

Implementation Confirmation Verification

Implementation Confirmation verification

Given below is an implementation for the confirmation verification of alerts in Cypress −

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      //URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //fire confirm browser event and accept
      cy.get(':nth-child(2) > button').click()
      cy.on("window:confirm", (t) => {
         //verify text on pop-up
         expect(t).to.equal("I am a JS Confirm");
      });
   });
});

Execution Results

The output is stated below −

Clicked Ok

The output logs show the successful verification of the confirmation text, produced by firing the confirm event by Cypress.

Implementation Cancel click

The implementation of cancel click on confirmation pop up in Cypress is as follows −

describe('Tutorialspoint Test', function () {
   // test case
   it("Scenario 1", function () {
      // URL launched
      cy.visit("https://the-internet.herokuapp.com/javascript_alerts")
      //fire confirm browser event
      cy.on("window:confirm", (s) => {
         return false;
      });
      // click on Click for JS Confirm button
      cy.get(':nth-child(2) > button').click()
      // verify application message on Cancel button click
      cy.get('#result').should('have.text', 'You clicked: Cancel')
   });
});

Execution Results

The output is given below −

Implementation Cancel Click

The output logs show the successful verification of the text You clicked: Cancel, which is produced on clicking the Cancel button on the confirmation pop up.

Advertisements