Handling Alerts with Cypress

Cypress has a unique way of working with alerts unlike other automation tools like Selenium or Protractor. Cypress basically automatically accepts alerts and we don’t have to write logic to handle them.

There are two types of pop up, the alert pop up (with only OK button) and confirmation pop up (with OK and Cancel buttons). Cypress is designed in such a way that it shall click on the OK button on the pop up without needing any manual intervention. It has the feature of firing browser events.

Example

Code Implementation to handle alerts.

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case3', function (){
      // launch the url
      cy.visit("https://register.rediff.com/register/register.php?FormName=user_details");
      // click on submit button to produce the alert pop up
      cy.get('input[type="submit"]').click();
   });
});

On execution of the above code, we don’t find the appearance of any alerts as the test case was running, however the Test logs clearly show the evidence of the alert message.

Now how to validate the text on the alert pop ups. There exists a window: alert event triggered by browsers while pop ups are opened. This event can be used to verify the alert text. Cypress accepts this alert by default and we cannot modify this behavior without firing the browser event.

Cypress shall trigger the window:alert event with the help of the on() method and then capture the text on the alert ( which can be later verified with assertion) but the whole incident shall not be visible on screen.

Example

Code Implementation for text validation on alert.

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case3', function (){
      // launch the url
      cy.visit("https://register.rediff.com/register/register.php?FormName=user_details");
      // click on submit button to produce the alert pop up
      cy.get('input[type="submit"]').click();
      // firing window: alert event with on() method
      cy.on('window:alert',(txt)=>{
         //Mocha assertions
         expect(txt).to.contains('Your full name cannot be blank.');
      })
   });
});

On investigation of the Test Runner logs, we shall find the alert pop up details.

Now how to validate the text on the confirmation alert pop ups. There exists a window: confirm event triggered by browsers while confirmation pop ups are opened. False is returned from this event to cancel the confirmation. Cypress by default accepts the confirmations.

Cypress shall trigger the window:confirm event with the help of the on() method and then capture the text on the alert ( which can be later verified with assertion) but the whole incident shall not be visible on screen.

Example

Code Implementation for text validation on confirmation pop up.

describe('Tutorialspoint Test', function () {
   // test case
   it('Test Case3', function (){
      // launch the url
      cy.visit("https://www.tutorialspoint.com/selenium      /selenium_automation_practice.htm");
      // click on submit button to produce the confirmation alert pop up
      cy.get('button[name="submit"]').click();
      // firing window: alert event with on() method
      cy.on('window:confirm',(txt)=>{
         //Mocha assertions
         expect(txt).to.contains('You are submitting information to an external page.');
      })
   });
});

On investigation of the Test Runner logs, we shall find the confirmation pop up details.

Debomita Bhattacharjee

e

Updated on: 05-Aug-2020

2K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started