Handling Alerts Windows and Frames in Cypress

Introduction

This article will discuss Handling alert frames and windows in Cypress.

Prerequisite

• Cypress Test Automation setup needs to be done.
• Create a cypress spec file.

Handling alerts

In Cypress, we cannot handle alerts because the alerts are handled automatically by Cypress itself.

We have three types of alerts in the web application

Accept alert box

This alert displays with alert text, and we have only the ok button to accept the alert.

Confirm alert

This alert displays with alert text; we have only the ok and cancel buttons. So we can accept alerts and dismiss alerts as well.

Prompt alert

This alert displays alert text and will contain a text box where we can type a message.

Here Cypress implicitly accepts all these types of alerts when it appears on the web page. Meaning that Cypress will click the ok button.

In order to

• Dismiss the alert
• Get the alert text from the alert box
• To type a message in the prompt alert

we need to handle alerts using the cy.on event emitter function, which listens to the events that occur in the web application

cy.on function takes two arguments

• eventName is the name of the event you want to listen to. For example, a window:alert is an event triggered when an alert is displayed.
• callback is a function that gets executed when the specified event occurs. It takes one or more parameters that provide information about the event.

Syntax

cy.on('click', (element) => {
  // Handle the click event
  // You can access the clicked element using the 'element' parameter
  // Perform any necessary assertions or actions
});

Example

  it('method one', () => {
        cy.visit("https://the-internet.herokuapp.com/javascript_alerts");
        cy.on('window:alert',function(alerttext){
            expect(alerttext).eq('I am a JS Alert');
        })
        cy.contains('Click for JS Alert').click();
    });

Confirm alert

To handle confirm alert, we must pass the event 'window:confirm' and then return false will click the cancel button in the confirm alert.

   it.only('method two', () => {
        cy.visit("https://the-internet.herokuapp.com/javascript_alerts");
        cy.on('window:confirm',function(alert){
            return false;
        })
        cy.contains('Click for JS Confirm').click();
    });

Prompt alert

• cy.window() method is used to handle prompt alert.
• cy.window will get the value of the object of the prompt.
• cy.stub() command is used to create a stub for a JavaScript function or object method. Stubs allow you to control the behavior of the function or method during your test

 it.only('method three', () => {

        cy.visit("<url of the application>");
        cy.window().then(function(p){
            //stubbing prompt window p contains the object of the prompt window, using that we are typing in the prompt alert box
            cy.stub(p, "prompt").returns("testing");
            // click on the button which displays the prompt alert in the web page
            cy.get('locator').click()
            // assertion step
            cy.get('locator').contains('expected value')
         });
        
    });

Handle windows

Cypress cannot directly handle a child window, and it provides the workaround to continue our tasks on the parent window itself.

We can handle the child window in three ways. Before looking at the example, we will understand the target attribute in an anchor tag.

The target attribute in an anchor (<a>) tag is used to specify how the linked URL should be opened when the user clicks on the link. It defines the target window or frame where the linked content should be displayed.

•     _blank: Opens the linked URL in a new browser window or tab.
•     _self: Opens the linked URL in the same window or frame where the link is clicked (default behavior if target attribute is not specified).
•     _parent: Opens the linked URL in the parent frame if the current frame contains frames.

invoke() is a jquery method used to invoke functions on DOM elements or Cypress commands. It allows you to interact with functions and retrieve their results.

1. Checking the button that opens the link in a new window contains the href attribute.

  it('method one', () => {
        cy.visit("https://the-internet.herokuapp.com/windows");
        cy.get(".example > a").should('have.attr','href');
    });

2. Removing the target attribute in the anchor tag so that the child window page loads in the same parent window.

   it('method two', () => {
        cy.visit("https://the-internet.herokuapp.com/windows");
        cy.get(".example > a").invoke('removeAttr','target').click()
    });

3. Getting the anchor tag link using the jquery prop function and then opening the child window in the same parent window.

 it.only('method three', () => {

        cy.visit("https://the-internet.herokuapp.com/windows");
        cy.get('.example > a').then(newtab =>{
            //retrieve the href value using prop function
            const hrefatt=newtab.prop('href')
            //using that href function we are opening that url in a window
            cy.visit(hrefatt);
            cy.get('h3').should('have.text','New Window');
        })
        
    });

Handle Frames in cypress

cy.wrap() function is used to wrap a value into a Cypress chainable object.

It allows you to work with non-Cypress objects and apply Cypress commands and assertions to them.

Example

describe('frame example', () => {
    it('testing frame', () => {
        cy.visit('https://the-internet.herokuapp.com/iframe')
            //get the frame locator and we are using the its command to get the property of the body of the frame 
            //and then we are using wrap function to chain the cypress commands.
            // i am assigning the entire line in a variable
       const iframescope=cy.get('#mce_0_ifr').its('0.contentDocument.body').then(cy.wrap)
       //using the variable i am going to clear and type values inside the iframe
       iframescope.clear();
       iframescope.type("testing in iframe")
        
    });
    
});

Summary

I hope this article will be helpful in handling Alerts, Frames, and Windows in Cypress.

Thanks, Happy learning.