Handling Child Windows/Tabs and iFrames using cypress

In this article, you will learn how to effectively handle child windows/tabs & iframes when working with cypress for web app automation. Anyone who has done some reasonable amount of automation using cypress knows that, cypress does not support child tabs. Child windows are usually opened in a web application when we perform click operations on certain web elements. So, these are basically opened inside a parent window. 

Similarly, an iframe is an HTML document embedded in another document on a website to incorporate content from external sources into your pages.

Handling Child Windows/Tabs 

Cypress does not knoany child tabs. If you want to work on child tabs opened by a parent tab, you just cannot do it directly through cypress unlike other automation tools, i.e., selenium, protractor which will help you to move to the child browser. Buin cypress, there is no concept of switching to the child windows. 

Their architecture is designed like that so they can avoid non flaky automation tests and give consistent results

There are couple of approaches to handle child windows/tabs: 

1. Removing target attribute 

Whenever we click on a web element and it opens the link in the child tab, it means target attribute is applied to that web element. So, now, the easiest way is to open the link on the same browser window by deleting the target attribute. 

Let’s assume we have web page as shown below, and there is a button Open Tab. 

image001

Now we are going to manipulate the DOM and delete the target attribute. We are going to invoke the jquery function removeAttr(). 

cy.get('#opentab').invoke('removeAttr','target').click()

So, we get the web element using cy.get(‘id’). Afterwards, we invoke the jquery method and pass the attribute name using invoke(‘removeAttr’,’target’), and then perform the click operation by calling click().

Similarly, you can go back to the same URL by calling the below command.

cy.go('back')

2. Grab HREF attribute and open URL 

To handle the child windows/tabs, you can simply copy the URL for the new window and open it in the original browser window because we need to work on the latest URL. We are doing this because cypress does not support child windows. 

Suppose there is an ‘Open Tab’ button on web page. Clicking the button will open the child window as shown below: 

image003

Now we will grab the href attribute that contains the URL and hit the same browser window. 

cy.get('#opentab').then(function($e1) {const url = $e1.prop('href')
cy.visit(url)
})

We have used the jquery prop() method by resolving the promise (when cypress commands are used with non-cypress commands) to grab the value of href attribute and then click the URL.

Note: There is a limitation with this method, we cannot use cross domain URLs, so this method is not recommended.  

Handling iFrames 

An HTML document embedded in another HTML document is referred to as a frame. We can handle iframes in cypress very easily. Initially, this feature was not available in cypress, so automation engineers found it very difficult to deal with frames. 

1. First, we should install a plugin which you can easily install by running below command in your IDE terminal: 

npm install -D cypress-iframe 

image004

2. Next, import that plugin into your test file to use it.

image006

3. Now lets say we have a webpage, and there is an iframe embedded in it and we want to navigate to a menu inside the iframe to do the validation:

image008

cy.frameLoaded('#courses-iframe')
cy.iframe().find("a[href*='mentorship']").eq(1).click()

In the above code, we have used the frameloaded() method and got the ID of iframe. Next, we used the iframe() method, and got the required web element, and performed click operation. So, this is how you can play with the iframes. 

Conclusion 

Working with child tabs and iframes is comparatively easy for the users who work on selenium or protractor. When  working with cypress, handling child windows/tabs is a bit difficult as native support is not available. So, by following the process given in this article, we can easily handle iframes and child tabs, and can save a lot of time by doing avoiding unnecessary R&D. Anyone can do automation but doing it efficiently is a tricky part. 

Hope this article helped you understand how to handle child windows/tabs using cypress. Did we miss anything? Let us know in the comment section below. 

 

Leave a Reply

Your email address will not be published.