javascript 访问新窗口 - cypress.io

Access a new window - cypress.io

提问by Kaushik NP

The question is as simple as that. In Cypress, how can I access a new window that opens up when running the test.

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

Steps to recreate :

重新创建的步骤：

1. Run the test. After some action, new window pops up (the url is dynamic in nature).
2. Fill in the fields in the new window, and click a few buttons.
3. After required actions are completed in the new Window, close the new window and move back to the main window.
4. Continue execution with the main window.

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

Point of interest: the focus should be

兴趣点：重点应该是

main window -> new window -> main window

I have read few things that relate to use of iframeand confirmation box, but here its none of those. Relates to accessing a whole new window. Something like Window Handlersin Selenium. Unfortunately could not find anything related to it.

我读过一些与使用iframeand相关的东西confirmation box，但这里没有。与访问一个全新的窗口有关。类似于Window HandlersSelenium 的东西。不幸的是找不到任何与之相关的东西。

回答by Jennifer Shehane

Accessing new windows via Cypress is not possible in its current version.

在当前版本中，无法通过 Cypress 访问新窗口。

However, there are many ways this functionality can be tested in Cypress now. You can split up your tests into separate pieces and still have confidence that your application is covered.

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

1. Write a test to check that when performing the action in your app, the window.openevent is called by using cy.spy()to listen for a window.openevent.

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. In a new test, use cy.visit()to go to the url that would have opened in the new window, fill in the fields and click the buttons like you would in a Cypress test.

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

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

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

Fullly working test example can be found here.

完整的测试示例可以在这里找到。

回答by Antti

I am not cypress expert, just started using it few days ago, but I figured out this kind solution for stateful application with dynamic link:

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

// 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

Is there any better way to do this?

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

回答by Gal Margalit

// 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 - tab handling anchor links

Cypress - 选项卡处理锚链接