访问一个新窗口 - cypress.io

Question

问题就是这么简单.在赛普拉斯,我如何访问运行测试时打开的新窗口.

重新创建的步骤:

1. 运行测试.在一些动作之后,弹出新窗口(该URL本质上是动态的).
2. 填写新窗口中的字段,然后单击几个按钮.
3. 在新窗口中完成所需操作后,关闭新窗口并返回主窗口.
4. 继续执行主窗口.

兴趣点:重点应该是

main window -> new window -> main window

我读过很少与使用iframe和有关的东西confirmation box,但这里没有.与访问一个全新的窗口有关.像Window HandlersSelenium 一样的东西.遗憾的是找不到与之相关的任何内容.

Answer 1

目前的版本无法通过赛普拉斯访问新窗口.

但是,现在有很多方法可以在赛普拉斯测试此功能.您可以将测试分成不同的部分,但仍然可以确信您的应用程序已被覆盖.

1. 编写测试以检查在应用程序中执行操作时,window.open通过使用cy.spy()侦听事件来调用window.open事件.

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. 在新测试中,使用cy.visit()转到将在新窗口中打开的URL,填写字段并单击按钮,就像在赛普拉斯测试中一样.

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

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

可在此处找到完整工作的测试示例.

Answer 2

我不是柏树专家，几天前才开始使用它，但我想出了这种具有动态链接的有状态应用程序的解决方案：

// Get window object
cy.window().then((win) => {
  // Replace window.open(url, target)-function with our own arrow function
  cy.stub(win, 'open', url => 
  {
    // change window location to be same as the popup url
    win.location.href = Cypress.config().baseUrl + url;
  }).as("popup") // alias it with popup, so we can wait refer it with @popup
})

// Click button which triggers javascript's window.open() call
cy.get("#buttonWhichOpensPopupWithDynamicUrl").click()

// Make sure that it triggered window.open function call
cy.get("@popup").should("be.called")

// Now we can continue integration testing for the new "popup tab" inside the same tab

有没有更好的方法来做到这一点？

Answer 3

我能够通过以下方式实现相同的要求：

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

cy.get('.open-window-btn').click()
cy.get('@windowOpen').should('be.called');
cy.visit(newUrl)

Answer 4

// We can remove the offending attribute - target='_blank'
      // that would normally open content in a new tab.
      cy.get('#users').invoke('removeAttr', 'target').click()

      // after clicking the <a> we are now navigated to the
      // new page and we can assert that the url is correct
      cy.url().should('include', 'users.html')

Cypress - 选项卡处理锚链接

Answer 5

我最近也遇到了这个问题 - 新选项卡的 url 是动态的，所以我不知道它是什么。经过大量搜索、一些尝试和错误以及同事的输入，通过执行以下操作解决了问题：

// AFTER cy.visit()
cy.window().then((win) => {
  cy.spy(win, 'open').as('windowOpen'); // 'spy' vs 'stub' lets the new tab still open if you are visually watching it
});
// perform action here [for me it was a button being clicked that eventually ended in a window.open]
// verify the window opened
// verify the first parameter is a string (this is the dynamic url) and the second is _blank (opens a new window)
cy.get('@windowOpen').should('be.calledWith', Cypress.sinon.match.string, '_blank');

Answer 6

这是我在基于“使用子窗口的赛普拉斯”的项目中使用的解决方案

Cypress Window Helpers（又名 Cypress Tab Helpers） 它们实际上是弹出窗口或子窗口，但我将它们称为标签以简化 api

cy.openTab(url, opts)
cy.tabVisit(url, window_name)
cy.switchToTab(tab_name)
cy.closeTab(index_or_name) - pass nothing to close active tab
cy.closeAllTabs() - except main root window