javascript - Access a new window - cypress.io

Question

The question is as simple as that. In Cypress, how can I access a new window that opens up when running the test.

Steps to recreate :

1. Run the test. After some action, new window pops up (the url is dynamic in nature).
2. Fill in the fields in the new window, and click a few buttons.
3. After required actions are completed in the new Window, close the new window and move back to the main window.
4. Continue execution with the main window.

Point of interest: the focus should be

main window -> new window -> main window

I have read few things that relate to use of iframe and confirmation box, but here its none of those. Relates to accessing a whole new window. Something like Window Handlers in Selenium. Unfortunately could not find anything related to it.

Answer 1

Accessing new windows via Cypress is intentionally not supported.

However, there are many ways this functionality can be tested in Cypress now. You can split up your tests into separate pieces and still have confidence that your application is covered.

1. Write a test to check that when performing the action in your app, the window.open event is called by using cy.spy() to listen for a window.open event.

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

2. In a new test, use cy.visit() to go to the url that would have opened in the new window, fill in the fields and click the buttons like you would in a Cypress test.

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

// Do the actions you want to test in the new window

Fully working test example can be found here.