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.
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 −
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.
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 −
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.
The following confirmation pop-up with OK and Cancel buttons getting displayed.
On clicking the OK button, the following is displayed −
You clicked: Ok

An image like the one given below will be displayed −
On clicking the Cancel button, the following is displayed below Result −
You clicked: Cancel

An image like the one given below will be displayed −
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 −
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 −
The output logs show the successful verification of the confirmation text, produced by firing the confirm event by Cypress.
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 −
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.

    73 Lectures 
     12 hours 

 Rahul Shetty
 Print
 Add Notes
 Bookmark this page