In this article, we will discuss in detail how we can handle new browser windows and tabs in cypress. If you have worked with cypress before, then you would know that cypress doesn’t allow handling of new browser tabs and windows out of the box and it’s mentioned in their permanent trade-offs page. But thankfully as the framework has matured, there are now multiple workarounds using which these can be achieved. Let’s deep dive by automating two test cases.

Test Case 1:
Step 1: Go to https://the-internet.herokuapp.com/windows
Step 2: Click on the ‘Click Here’ button. This opens a new Tab.
Step 3: Go to the new tab and verify that the URL has the text ‘/windows/new’ and the webpage has the text ‘New Window’

Test Case 2:
Step 1: Go to https://alapanme.github.io/testing-cypress.html
Step 2: Click on the ‘Try it’ button.
Step 3: A new window would be opened. Verify that the header text in the new window is ‘Welcome to the-internet’.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
describe('Example to demonstrate the handling of new browser windows in cypress', () => {

    it('Handling new Browser Tab', function () {
        cy.visit('https://the-internet.herokuapp.com/windows')
        cy.get('.example > a').invoke('removeAttr', 'target').click()
        cy.url()
            .should('include', '/windows/new')
        cy.get('h3')
            .should('have.text', 'New Window')
    })

    it('Handling new Browser Window', function () {
        cy.visit('https://alapanme.github.io/testing-cypress.html')
        cy.window().then((win) => {
            cy.stub(win, 'open', url => {
                win.location.href = 'https://the-internet.herokuapp.com/';
            }).as("popup")
        })
        cy.get('button').click()
        cy.get('@popup')
            .should("be.called")
        cy.get('h1')
            .should('have.text', 'Welcome to the-internet')
    })
})

cypress new window and tabs test script

1
2
3
4
5
6
7
8
it('Handling new Browser Tab', function() {
  cy.visit('https://the-internet.herokuapp.com/windows')
  cy.get('.example > a').invoke('removeAttr', 'target').click()
  cy.url()
    .should('include', '/windows/new')
  cy.get('h3')
    .should('have.text', 'New Window')
})

Since cypress doesn’t allow the opening of a new browser tab, the workaround in such cases is to remove the attribute – target=’_blank’. Now when we click the ‘Click Here’ button, instead of a new tab, the webpage is opened in the current tab. And then when the webpage is loaded, we are validating that the URL has the text ‘/windows/new’ and the webpage has the text ‘new Window’.

1
2
3
4
5
6
7
8
9
10
11
12
13
it('Handling new Browser Window', function() {
  cy.visit('https://alapanme.github.io/testing-cypress.html')
  cy.window().then((win) => {
    cy.stub(win, 'open', url => {
      win.location.href = 'https://the-internet.herokuapp.com/';
    }).as("popup")
  })
  cy.get('button').click()
  cy.get('@popup')
    .should("be.called")
  cy.get('h1')
    .should('have.text', 'Welcome to the-internet')
})

In this test, our goal is to read the contents of the webpage that is opened after clicking the ‘Try it’ button. The webpage is opened in a new browser window.

new browser window

First, we get the Window object and then we replace the window.open(url, target) function with our own arrow function. Then we change the window location win.location.href to be the same as the popup URL and then we create an alias for the same as popup, so that we can refer to it later using @popup. Then we click the ‘Try it’ button, which triggers javascript’s window.open() call. To make sure that the window.open function call is triggered we are writing an assertion as cy.get(‘@popup’).should(“be.called”). Then we are continuing the testing for the new “popup tab” inside the same tab and asserting that the webpage has the text ‘Welcome to the-internet’.

After Execution, We should see a ‘PASS’.

cypress new browser window tab test script execution

Do check out 🙂

Github: https://github.com/alapanme/Cypress-Automation
All Cypress Articles: https://testersdock.com/cypress-tutorial/