访问新的 window - cypress.io

Question

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

重建步骤：

Run the test. After some action, new window pops up (the url is dynamic in nature).

Fill in the fields in the new window, and click a few buttons.

After required actions are completed in the new Window, close the new window and move back to the main window.

Continue execution with the main window.

兴趣点：重点应该是

main window -> new window -> main window

我读过一些与 iframe 和 confirmation box 的使用相关的内容，但这里是 none。涉及访问一个全新的 window。类似于 Selenium 中的 Window Handlers。不幸的是找不到与之相关的任何内容。

Answer 1

通过 Cypress 访问新的 windows 是 intentionally not supported。

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

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

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

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.

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

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

可以找到完整的测试示例 here。

Answer 2

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

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

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

Answer 4

这是我在我的项目中使用的解决方案，基于 "Cypress using child window"

Cypress Window Helpers (aka. Cypress Tab Helpers) 它们实际上是弹出窗口-windows 或子窗口-windows，但为了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

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

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

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 7

这就是你如何在同一个 window..

中处理制表符

使用此代码段

cy.xpath("//a[@href='http://www.selenium.dev']").invoke('removeAttr','target').click();

访问新的 window - cypress.io

Access a new window - cypress.io

javascript

ui-automation

cypress