Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Handling Child Tabs with Cypress
Sometimes on clicking a link or button, it opens to another tab in the same browser. Cypress has a unique way of handling child tabs unlike other automation tools like Selenium and Protractor. It basically keeps no information on the child tab by shifting its focus from the parent to the child tab.
Now let us understand why a link or a button opens a new webpage on a different tab considered as a child. This is due to the attribute target set in the html for that element. If omitted, it shall open in the same window.
Cypress cannot directly handle a child tab and it provides the workaround to continue our tasks on the parent tab itself by deleting the target attribute from the html code. This is done with the help of invoke() command in Cypress which invokes the JQuery function removeAttr() [ this shall delete the attribute passed as an argument to the function].
Now clicking on the link or button, it shall open on the parent tab itself and we shall perform the necessary actions and validations there. Finally move back to the previous URL in browser history with the go() Cypress command.
The go() method is used to move backward and forward to the previous or next URL respectively in the browser history. We can also specify numbers as arguments to the go(). [-1 to moves back a page and 1 to move forward a page]
Syntax
cy.go(direction), cy.go('back')There can be of two types of options as listed below which can modify the default behavior of go() method −
log − The default value of log is true.
timeout − The default value of timeout parameter is pageLoadTimeout (60000 milliseconds). This the duration to wait for cy.go() to complete its loading event.
Example
Code Implementation to handle child tab.
describe('Tutorialspoint Test', function () {
// test case
it('Test Case4', function (){
// launch the url
cy.visit("https://www.tutorialspoint.com/selenium /selenium_automation_practice.htm");
// removing the target attribute from the link with removeAttr()
cy.get('a[title="TutorialsPoint - Home"]')
.invoke('removeAttr', 'target').click();
// assertion to verify the current Url
cy.url().should('include','https://www.tutorialspoint.com/index.htm');
// moving back to the parent tab with the help of go() method
cy.go('back');
});
});Finally we can use the assertion to validate that we have moved to the correct URL by cy.url().
910 Views
