柏树:存根打开的窗户

Question

在我的应用程序中有一个建议列表，单击该列表会打开一个带有动态地址的新窗口：

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

现在我正在尝试存根 windows.open 事件，如 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')
})

但它总是打开新选项卡并且日志是错误的： 柏树：存根打开的窗户

有人知道为什么它不起作用吗？ 干杯！

Answer 1

下面的代码将帮助您存根 window.open 并进一步断言函数已被触发：

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

你也可以像你所做的那样在cy.on钩子中存根window.open，这有助于你在页面重新加载后每次产生新的窗口对象。但是，如果您想在现有选项卡中实际打开新 Url 而不是新 URL，您可以通过传递">_self"参数来覆盖旧的"_blank">来使用以下代码：

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

callsFake 函数动态撤回已放入原始 window.open(url， "_blank"(中的 url，或者您可以手动更改 .call(win， url， '_self'(中的 url;使用静态的，所以无论你点击了哪个链接或按钮，触发了 window.open，它们都会打开同一个 url。

Answer 2

我正在为要测试的每个页面使用页面对象。因此，在我的父页面对象中，该对象被其他每个PO继承，我在打开URL时执行以下操作：

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

这可以防止窗口打开新页面。

Answer 3

您也可以使用这种简单的方法：

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)