DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป

DEV Community ๐Ÿ‘ฉโ€๐Ÿ’ป๐Ÿ‘จโ€๐Ÿ’ป is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Cover image for Handling new tab in Cypress
Dilpreet Johal
Dilpreet Johal

Posted on

Handling new tab in Cypress

In this post, we will learn how to handle new tab in Cypress. By default, new tabs are not supported by Cypress, we will take a look at a workaround to solve this issue.

Why Cypress doesn't support second tab?

Cypress tests runs within a browser and because of that it injects the tests into a first window / tab; anything else outside of the tab, Cypress does not have access to it.

This was a design decision by the Cypress team and they will never support multiple tabs even in future.


How to handle new tab in Cypress?

Alright, so we understand that Cypress doesn't support new tabs but what if your application opens links in new tab then how do you handle such case? Well we will need to do some workaround to get this to work.

First, it's important to understand how the website is opening the second tab? These are 2 of the common ways -

  • using target="_blank" attribute (most common)
  • using JavaScript redirect

Handling the target attribute

<a href="/contact" target="_blank" role="button" id="contact-us">
Enter fullscreen mode Exit fullscreen mode

When a browser sees target="_blank" on a link, it automatically knows to open the link in a new tab. We can use this to our advantage and remove the target attribute from the link and then the browser will open the link in the same tab.

  it('Handling new tab', () => {
    cy
      .get('#contact-us')
      .invoke("removeAttr", "target")
      .click() // will open the contact page in a new tab
    cy.get("h1").should("have.text", "Contact");
  })
Enter fullscreen mode Exit fullscreen mode

We are using the invoke method to remove the target attribute from the link element which triggers the browser to open the link within the same tab.


Handling JavaScript redirect

For JavaScript redirects, you will need to understand how the redirect is being done and based on that implement a solution for it. This is a good link to refer to by Gleb Bahmutov which provides various solutions to handle such scenarios.


To learn more about how to handle new tab in Cypress, check out the video below โ€“


๐Ÿ“ง Subscribe to my mailing list to get access to more content like this as well as be part of amazing free giveaways.

๐Ÿ‘ You can follow my content here as well -

...

I love coffees! And, if this post helped you out and you would like to support my work, you can do that by clicking on the button below and buying me a cup of coffee -

Buy me a coffee

Top comments (0)

This post blew up on DEV in 2020:

js visualized

๐Ÿš€โš™๏ธ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! ๐Ÿฅณ

Happy coding!