Trying to get to the popup window (sign up) form after clicking on 'sign up' button using cypress

Question

I am navigating to this website https://www.twitch.tv/ and to register a new user.

I am performing those steps:

1. navigating to the page.
2. clicking on sign up button
3. moving to popup and clicking on log in
4. then a sign up pop up window comes up.

I am trying to get this window but my application does not recognize the page and I am getting an error. please mind the image attached:

this is my code:

describe('RegisterTwitchTv', function() {
  it('Register New User', function() {
    cy.visit('')
    cy.title().should('eq', 'Twitch')
    cy.get('button[data-a-target="signup-button"]').click()
    // cy.on('window:confirm', ($alertElement) => {
    // expect($alertElement).to.equal('Log in')
    // }).click
    cy.contains('Log in').click()
    cy.window().then((win) => {
      cy.get('button[class~="tw-pd-x-1"]').click()
    })
  })
})

but my code does not recognize the new window which is the one I want to handle.

Answer 1

Unfortunately accessing new windows via Cypress is not possible in its current version.

I would be a good practice to test this functionality using two isolated tests:

describe('RegisterTwitchTv', () => {
    // Check the popup is opened
    it('Register New User popup is opened', () => {
        cy.visit('', {
            onBeforeLoad(win) {
                cy.stub(win, 'open');
            }
        });
        cy.title().should('eq', 'Twitch')
        cy.get('button[data-a-target="signup-button"]').click();
        cy.contains('Log in').click();
        cy.window()
            .its('open')
            .should('be.called');
     });

     // Check the login works
     it('Register New User2 login', () => {
         cy.visit('/login?popup=true');
         cy.get('button[class~="tw-pd-x-1"]').click()
         cy.get('#signup-username').type('[email protected]');
         ...
         ...
     });
});