赛普拉斯：存根打开 window

Question

in my app there is an recommendations list, which on click opens a new window with a dynamic address:

$window.open(_shopURL, '_blank');

Now I'm trying to stub the windows.open event as shown in https://github.com/cypress-io/cypress-example-recipes/blob/master/examples/stubbing-spying__window/cypress/integration/window-stubbing.spec.js

Cypress.on('window:before:load', (win) => {
 win.open = cy.stub().as('windowOpen')
})


describe('Shop integration', () => {
 beforeEach(function () {
  cy.visitHome(countryCode, resellerId)
 })

it('can stub the window open event', function () {
  cy.get(`.recommendations-list .recommendations-cover:nth-of-type(1)`)
    .click()
  cy.get('@windowOpen').should('be.calledWith', 'page1.html')
})

But it's always opening the new tab and the logs are wrong: Cypress: stub open window

Does anybody has an idea why it's not working? Cheers

Answer 1

I'm using page-objects for every page I want to test. So in my parent page-object which gets inherited by every other PO I do the following when opening a url:

 public navigateTo(url: string, defaultTimeout: number = 5000) { return cy.visit(url, { onBeforeLoad: (win: any) => { cy.stub(win, 'open'); }, timeout: defaultTimeOut }); }

This prevents window to open a new page.

Answer 2

Code below will help you to stub window.open and further assert it that function has been triggered:

it('opens the about page', () => {
  cy.visit('/')
  cy.window().then(win => {
    cy.stub(win, 'open').as('Open')
  })
  cy.get('.your-selector').click()
  cy.get('@Open').should('have.been.calledOnceWithExactly', yourUrl)
})

You also can stub window.open in cy.on hook as you did, what helps you to yield new window object each time after page reload. However, if you want to actually open the new Url in existing tab instead of new one you can use this code below by passing "_self" param to overwrite old "_blank" :

cy.window().then(win => {
          cy.stub(win, 'open').callsFake((url) => {
            return win.open.wrappedMethod.call(win, url, '_self');
          }).as('Open');
        });

callsFake function dynamically withdraws url which has been placed into original window.open(url, "_blank"), or you can manually change url inside .call(win, url, '_self'); with static one, so regardless on which link or button you clicked, which triggers window.open, they all will open the same url.

Answer 3

You also can use this easy way:

const newUrl = 'your url';

cy.window().then((win) => {
    cy.stub(win, 'open').callsFake(url => {
        newUrl = url
    }).as('windowOpen')
})

cy.get('your path').click()
cy.get('@windowOpen').should('be.called')

cy.visit(newUrl)