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.

Elevate Your Software Quality with Our Cypress Expertise

Our software Quality Assurance Services are here to elevate your testing framework with advanced Cypress solutions. Partner with us to refine your QA strategy and achieve impeccable software quality.

Request a Consultation

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 testand give consistent results.

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

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. 

this image shows the button Open Tab

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


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.


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 pageClicking the button will open the child window as shown below: 

this image shows the Clicking the button will open the child window - Child Windows

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’)

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.  

Further Reading: Getting Started With Webdriver IO

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:

this image shows the npm install -D cypress-iframe - Child Windows
  1. Next, import that plugin into your test file to use it.
this image shows the import that plug–in into your test file
  1. 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:
this image shows the navigate to a menu inside the iframe to do the validation - Child Windows



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. 

Further ReadingMS Dynamics CRM – Automation Testing: Handling Iframes

Master Test Automation Challenges with Our QA Expertise

We provide tailored Cypress solutions that address your specific needs, guiding you towards mastering your QA challenges with confidence.

Request a Consultation


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.

Explore Recent Blog Posts

Infographics show the 2021 MSUS Partner Award winner

Related Posts

Receive Updates on Youtube