How can we test a new tab that is redirected from an existing tab in cypress?

Question

Need to test a new tab that is redirected from the existing tab. How can we test that in cypress?

Answer 1

You can not test that. Cypress has no support on new windows and/or tabs. What you can do as a workaround is:

1. Test if the link to the new window/tab is present
2. Create another test which opens the URL of that window/tab immediately.

Answer 2

I did find a workaround for a situation like this where i wanted to visit a new URL and then test its content. This was valid for me because the URL was available in the HTML

Try this if it works

it('redirect',()=>{
    cy.visit('website')
    cy.get(`.nav-items :nth-child(1) a`) // directly clicking this element opens the same link a new tab
    .should('be.visible')
    .invoke('attr','href')
    .then(href=>{
        cy.visit(href)
    })
})

Answer 3

If its redirected to a new url/tab (ie a new sub domain) and in cypress if that is being opening as a new tab, you could still do your test with cypress. I have used postman site as an example to demonstrate this. In postman site, on click on the Learning Center tab will open a new tab. Below test example will open in your existing test runner tab. Please refer my code below:

context('New tab actions', () => {
    it('Test to open a new tab in cypress and test the page', () => {
      cy.visit('https://www.getpostman.com/');
      cy.get('#mobile-menu-button').click();
      cy.get('#mobileNav > #siteNav > nav > ul > li').contains("Product ");
      cy.get('#mobileNav > #siteNav > .site-nav__secondary-menu > a').first().then(($a)=>{
        const newUrl =  Cypress.$($a).attr('href'); 
        console.log(newUrl);
        cy.visit(newUrl);
        cy.get('.header__title').invoke('text').then((text)=>{
            const headerText = text;
            expect(headerText).to.contain('Learning Center');
            //Similarly you can follow the same mechanism and start writing all of remaining tests related to that page....
        })
      })
    })
})