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!