CODEWITHSUNDEEP
cypressnew-windowbrowser-tab
Ivan Markov
Ivan Markov

Reputation: 139

Cypress how to handle new tab without "target" and "href" attribute?

I am using this example but I am not able to automate the "New Tab" button.

Here is a screenshot of the HTML document: Screenshot of the HTML

I am trying to solve this by using the first answer from this topic.

/// <reference types="cypress" />
describe('Example shows how to work with browser windows.', () => {
  it('Example shows how to work within button that opens new tab without "target: _blank" and "href" attributes.', () => {
        cy.visit('https://demoqa.com/browser-windows')
        cy.window().then(win => {
            cy.stub(win, 'open').as('open')
          })

          cy.xpath('//*[@id="tabButton"]').click()
          cy.get('@open').should('have.been.calledOnceWithExactly', '/sample')
    })
})

I am not sure what I miss.

Upvotes: 3

Views: 11119

Answers (4)

Sanjeev Yadav
Sanjeev Yadav

Reputation: 1

cy.window().then((win) => {
  cy.stub(win, 'open').as("NewTabs")
})

cy.contains('button', 'buttonName').click()

cy.get("@NewTabs").should("be.called")
})

Upvotes: 0

Shubham Kulkarni
Shubham Kulkarni

Reputation: 1

describe('Example shows how to work with browser windows.', () => {
    it('Example shows how to work witn button that opens new tab without "target: _blank" and "href" attributes.', () => {
        cy.visit('https://demoqa.com/browser-windows', {
          onBeforeLoad(win) {
            cy.stub(win, 'open')
          }
        });
      
        cy.get('#tabButton').click();
        cy.window().then(() => {
        cy.visit('https://demoqa.com/sample', { failOnStatusCode: false })
        })
        cy.get('#sampleHeading').should('have.text','This is a sample page')
        cy.go(-1)
        cy.get('#windowButton').click();
        cy.window().then(() => {
        cy.visit('https://demoqa.com/sample', { failOnStatusCode: false })
        })
        cy.go(-1)
  
        cy.get('#msgWindowButtonWrapper').click();
        cy.window().then(() => {
        cy.visit('https://demoqa.com/sample', { failOnStatusCode: false })
        })
    });
  });

If the element doesn't have an <a> tag, target and href attributes it will work this way.

Upvotes: 0

Valerii Pogrebniak
Valerii Pogrebniak

Reputation: 1

For all who search a way to handle new tab or new window with cypress you need this post Testing PayPal checkout flow with Cypress

The most important part of code from that post is:

// Used to keep the reference to the popup window
  const state = {}

  /**
   * Intercepts calls to window.open() to keep a reference to the new window
   */
  Cypress.Commands.add('capturePopup', () => {
    cy.window().then((win) => {
      const open = win.open
      cy
        .stub(win, 'open')
        .callsFake((...params) => {
          // Capture the reference to the popup
          state.popup = open(...params)
          return state.popup
        })
    })
  })

  /**
   * Returns a wrapped body of a captured popup
   */
  Cypress.Commands.add('popup', () => {
    const popup = Cypress.$(state.popup.document)
    return cy.wrap(popup.contents().find('body'))
  })

Upvotes: 0

Manuel Abascal
Manuel Abascal

Reputation: 6312

Your example is not following the link's code you have provided. I have refactored your code, tested & it's working:

/// <reference types="cypress" />
describe('Example shows how to work with browser windows.', () => {
  it('Example shows how to work witn button that opens new tab without "target: _blank" and "href" attributes.', () => {
      cy.visit('https://demoqa.com/browser-windows', {
        onBeforeLoad(win) {
          cy.stub(win, 'open')
        }
      });
    
      cy.get('#tabButton').click();
      cy.window().its('open').should('be.called');

      cy.get('#windowButton').click();
      cy.window().its('open').should('be.called');

      cy.get('#msgWindowButtonWrapper').click();
      cy.window().its('open').should('be.called');
  });
});

Results:

enter image description here

Upvotes: 0

Related Questions