How to access a new window in Cypress

It is critical to know that Cypress does not support the handling of new browser tabs and windows out of the box, as stated on their permanent trade-offs page. However, as the framework has grown, there are now many workarounds that can be leveraged to fulfil these goals. In this article, we will take a deep dive into how to open new windows in Cypress.

Step 1

Create a new folder titled “Integration”, create two new files in the folder titled spec.js and spy-before-load.js. In your spec.js file, copy and paste the following code:

reference types="cypress" />
describe('window open', function () {
    it('opens a new window with page1', function () {
      // window.open is called on click
      // thus we can create method stub after the cy.visit
      // but before cy.click
      cy.visit('/index.html')
      cy.window().then((win) => {
        cy.stub(win, 'open').as('windowOpen')
      })
  
      cy.get('#open-window').click()
      cy.get('@windowOpen').should('be.calledWith', 'page1.html')
    })
  })

spec.js stubs the window.open method using cy.stub(). Because the application executes window.open after the click, we create the method stub after cy.visit

In your spy-before-load.js file, copy and paste the following code:

<reference types="cypress" />
describe('application', function () {
    beforeEach(function () {
      // application prints "hello" to the console
      // during the page load, thus we need to create
      // our spy as soon as the window object is created but
      // before the page loads
     
  cy.visit('/index.html', {
        onBeforeLoad (win) {
          cy.spy(win.console, 'log').as('console.log')
        },
      })
    })
  
    it('prints hello on load', function () {
      cy.get('@console.log').should('be.calledWith', 'hello')
    })
  })

spy-before-load.js starts spying on console.log during cy.visit to confirm that console.log(‘hello’) is called when the page loads.

Step 2

Using cy.spy() for a window.open event, write a test to ensure that while executing the action in your program, the window.open event is called.

cy.visit('http://localhost:3000', {
  onBeforeLoad(win) {
    cy.stub(win, 'open')
  }
})

// Do the action in your app like cy.get('.open-window-btn').click()

cy.window().its('open').should('be.called'

Step 3

Use cy.visit() in a new test to navigate to the URL already opened in the new window, then fill in the fields and click the buttons as you would in a Cypress test.

cy.visit('http://localhost:3000/new-window')