Handle child windows in cypress – Part 2

Tutorial 23​​ ​​ Handle​​ child windows​​ in cypress​​ – Part​​ 2 ​​​​ 

What you will Learn :

  • Automate test without​​ Invoke method

  • Automate script using invoke and removeAttr methods

  • "chromeWebSecurity": false

  • Verify child window url using should() assertion

  • Verify parent window url using should() assertion

  • Perform a simple operation on child window

Automate test without​​ Invoke method

In the previous tutorial, we had learn about the basics of child windows. This is the concluding tutorial​​ and we will create a script that would open the child​​ inside the same parent application’s browser.​​ 

But, before we do the actual use case implementation,​​ let us first automate the below use case:​​ 
1)​​ 
Launch​​ https://way2automation.com/​​ 

2)​​ Click ‘LIFETIME MEMBERSHIP’ button.​​ A​​ new tab (new child window)​​ should open, see below

Inspect ‘LIFETIME MEMBERSHIP’ button

Notice below, that​​ we can use the xpath to identify this element:​​ 
//a[normalize-space()='LIFETIME MEMBERSHIP']​​ 

So​​ the script below launches the application and simply clicks the ‘LIFETIME MEMBERSHIP’ button

Open test runner & let us run the script

Notice that the cypress executes the Test and a new child window tab is opened

If you notice above, the control is right now on the child window. Cypress does not have​​ a way to switch to parent window.

Now, let us see, how to open the child window in the same parent browser by removing the​​ “target” attribute​​ from the HTML DOM

 

Automate script​​ using invoke and​​ removeAttr​​ methods

Recall that​​ “remove attribute” function in jquery can remove​​ any desired attribute from the HTML​​ DOM.​​ 

The invoke method in cypress helps us to invoke​​ jquery​​ function​​ “remove attribute”.​​ 

So to that,​​ before we perform the ‘click’ operation, we will fire the method​​ invoke('removeAttr','target'). So basically, this means that we want to remove the ‘target’ attribute from the​​ HTML DOM of ‘LIFETIME MEMBERSHIP’ button element​​ 

Save the script & execute.

Notice below that the script is trying to click ‘LIFETIME MEMBERSHIP’ button, but is not successful. The reason being,​​ the default security of cypress does not allow to open a different​​ domain url​​ 
https://way2automation.com/lifetime-membership-club.html​​ 
in the same parent browser​​ https://way2automation.com/ ​​​​ 

​​ 

Instead of the above error, you might also see the below error that clearly mentions the resolution at the end​​ 

"chromeWebSecurity": false

To override the default cypress security, just add​​ "chromeWebSecurity": false​​ inside cypress.json file, see below

Save the json file.

Now re-execute the script.​​ 

Notice below, this time the child window​​ https://way2automation.com/lifetime-membership-club.html​​ opened in the same browser window. A new tab did NOT open this time

This is what we wanted to achieve in our use case & we are successful is doing so.

Verify​​ child window url​​ using should() assertion

Once we are on the child window, let us assert the url of child window tab. See line#14. The url should include the​​ complete string​​ https://way2automation.com/lifetime-membership-club.html​​ 

Save the script and run. Notice that the assertion passes, see below

Verify parent window url using should() assertion

Next we will navigate back using the go() command and will verify the parent window url. See lines 15-18 that are self-explanatory

Save the script and run.

Notice below that the page navigates​​ back to the parent window and the url changes. The assertion gets passed​​ 

Perform a simple operation on child window

Comment lines 16 and 18

Once we are on the child window, we can perform usual operations.​​ Let us try to click BUY NOW button on the child window page. Let us inspect this button

See the xpath below

So we have​​ 

Save script and run. Notice that​​ cypress clicks BUY NOW button and the page opens, see below

So, this is how we handle child windows in cypress.

Thank you for reading!

Share On

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Share on tumblr
Share on email

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top

Lifetime Membership Club

LIFETIME MEMBERSHIP BIG SALE - ALL LIVE COURES JUST - 7000 RS/ 99 USD
Attend All Live courses in just 7000 rs / $99 - offer ends 1st Nov 2024