访问新窗口 \- cypress.io

Question

问题就这么简单。在 Cypress 中，如何访问运行测试时打开的新窗口。

重新创建的步骤：

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

兴趣点：重点应该是

main window -> new window -> main window

我读过一些与使用 iframe 和 confirmation box 相关的内容，但这里没有。涉及访问一个全新的窗口。像 Window Handlers 在 Selenium 中。不幸的是找不到与之相关的任何内容。

原文由 Kaushik NP 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

有意不支持 通过 Cypress 访问新窗口。

但是，现在可以通过多种方式在 Cypress 中测试此功能。您可以将测试分成单独的部分，并且仍然确信您的应用程序已被覆盖。

1. 编写测试以检查在您的应用程序中执行操作时，是否使用 cy.spy() 调用 window.open 事件以侦听 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')

1. 在新测试中，使用 cy.visit() 转到将在新窗口中打开的 url，填写字段并单击按钮，就像在 Cypress 测试中一样。

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

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

可以在 此处 找到完全可用的测试示例。

原文由 Jennifer Shehane 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

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

原文由 Antti 发布，翻译遵循 CC BY-SA 4.0 许可协议