Day: 12 April 2022

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')