Tutorial 22 – Handle child windows in cypress – Part 1
What you will Learn :
What are child windows or tabs?
Use case to automate
Target attribute in HTML document
removeAttr function in jquery
Invoke method in cypress
go() method in cypress
What are child windows or child tabs
You may have a link on your website or a button, which, when you click, opens up a new tab or child window.
To understand this, let us go to https://the-internet.herokuapp.com/windows
Click ‘Click Here’ link that you see in the website. A new tab or child window opens, see below
So, the window that comes up when you launch https://the-internet.herokuapp.com/windows , that is the parent window. However the window that comes up when you click a button or link inside a parent website, that’s the child window or child tab.
Use case to automate
Now, the use case that we are interested in is: when we click a button on a parent website, we have to validate whether a new child tab or new child window comes up or not. How will you automate this using cypress, knowing the fact that cypress architecture does not allow us to work on a child tab (unlike selenium). The reason is, cypress team wants to maintain the consistency throughout the script. The team does not want the script to keep switching the child and parent windows.
Cypress has the ability to manipulate DOM (document object model). For the basic DOM understanding, refer https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Introduction
So cypress has the power to modify the HTML content of the browser page as desired.
Target attribute in HTML document
Let us inspect ‘Click Here’ link
When you mouse hover over the href link 
in the html, it displays the child window url https://the-internet.herokuapp.com/windows/new (see below).
This is the url of the child window, see below
Notice below that there is a ‘target’ attribute and it’s value is blank. This is the HTML code 
that enables the url 
to open in a new blank window.
Now, let us click ‘Fork me on GitHub’ link seen on the RHS
Notice this time there is no child window, the link opens on the same page
Inspect ‘Fork me on GitHub’ link, it does not have the ‘target’ attribute. So that’s the difference.
Let us see another example website https://www.standardbank.com/
Click ‘Investor Relations’, a new child window comes up
Inspect ‘Investor Relations’. Notice the presence of “target” attribute
One more final example: Launch https://way2automation.com/
Click ‘LIFETIME MEMBERSHIP’ button. Notice below that a new tab (new child window) is opened
If you inspect ‘LIFETIME MEMBERSHIP’ button, you will again see the “target” attribute having blank value
So, using cypress, if we can remove the “target” attribute from HTML DOM for a particular element and click it, the page would then open in the same window. So we have to manipulate the behaviour of child window.
‘removeAttr’ function in jquery
There is a “remove attribute” function in jquery that can remove any desired attribute from the HTML.
Launch https://www.w3schools.com/jquery/html_removeattr.asp
See above the definition of removeAttr() method. Remember, this is a jquey method. This function is not part of cypress commands.
Also let us inspect ‘Try it Yourself’ button that you see above. Notice below that it too has “target” attribute having value as blank
So let us click ‘Try it Yourself’ button. Notice below that a new child window comes up
Just for understanding purpose, let us click ‘Remove the style attribute from all p elements’ button seen on right hand side. Notice that the red and blue coloured styles change to normal black style, see below
Invoke method in cypress
The invoke method in cypress helps us to invoke any jquery function. Go to https://docs.cypress.io/api/commands/invoke.html#Syntax
You can see the cypress inbuilt invoke method. Also see below description
go() method in cypress
Before we implement the script to open a child window, we should also know a little about the cypress go() command. The reason being, once we are on the child page, the go() command will help us navigating back to the parent url. We will then be able to validate the page urls of parent and child windows respectively.
To understand the go() command https://docs.cypress.io/api/commands/go.html#Syntax
As you can see below, the commands are self-explanatory. You can either use directions back/forward or the numbers -1/1 to navigate backward/forward respectively.
To understand the go() command, below script launches the parent website https://way2automation.com/ and clicks the logo image
When you run the script, notice below that the url changes to https://way2automation.com/index.html
Now, in the below script, cy.go(‘back’) command navigates back to the parent website https://way2automation.com/
Run the script, notice below the main website url
So, this is how the go() command behaves.
In our next tutorial, we will actually be implementing the child window tab handling mechanism using a cypress script.
Thank you for reading!
