How to handle opening a new tab in Cypress
As Cypress runs inside the browser, there will never be support for multiple browser tabs in Cypress (As per cypress's official documentation).
However, during testing, there may be instances when the application opens a link in a new tab, and it becomes necessary to test the contents of the new tab especially when users click on <a> tag that opens a new tab. Users then want to switch to that tab to verify that the content is loaded.
In this blog post, we will explore different ways to handle new tabs in Cypress to tackle this use case.
In case our application is using an anchor link with a target attribute like this: <a href="…" target="_blank">, we can modify the target attribute and open the link in the same tab instead.
The HTML target attribute specifies a name or a keyword that indicates where to display the response that is received.
Target:
There are 2 ways to manipulate the target attribute and open the link in the same tab.
First Approach
The first approach involves manipulating the target attribute to open the link in the same tab in a below way:
If the target value is “_blank”, we can remove the attribute and the link will open in the same tab. This is because, as mentioned in the table above, when “target=_blank”, the link is set to open in a new tab or window.
Sample Code:
cy.get(‘.example > a’)
.invoke(‘removeAttr’,’target’).click();
Implementation:
it.only('opens the link in same tab by removing the target attribute', () => {
cy.visit('https://the-internet.herokuapp.com/windows')
cy.get('.example > a')
.invoke('removeAttr','target').click();
});Second Approach:
The second approach involves directly manipulating the target attribute of the link to “_self” which will also result in the link opening in the same tab. Therefore, if the “target” attribute is set to “_self”, the link will open in the same tab.
Sample Code:
cy.get(‘.example > a’)
.invoke(‘attr’,’target’,’_self’).click()
Implementation:
it.only(‘opens the link in same tab by removing the target attribute‘, () => {
cy.visit(‘https://the-internet.herokuapp.com/windows')
cy.get(‘.example > a’)
.invoke("attr", "target", "_self")
.click();
});Tip: If you want to go back to the previous tab, you can do it using cy.go(‘back’) or cy.go(-1) but this will only work if your domain URL is the same.
Conclusion:
By using either of these two approaches, we can effectively handle multi-tab support in Cypress while ensuring that the link is opened in the same tab. This will enable you to perform actions on the same page and verify your results.
You can also refer to the Github Code.
Special Thanks to Naveen AutomationLabs for the content reference.
Happy Testing! — AB
