Cypress 弹出窗口 - HTML

如果你正在使用 Cypress 进行测试，你可能会遇到需要处理弹出窗口的情况。在本篇文章中，我们将探讨如何在 Cypress 中处理 HTML 弹出窗口。

显示 HTML 弹出窗口

首先，我们需要编写一个测试用例，用于展示在 Cypress 中如何显示 HTML 弹出窗口。下面是一个简单的测试用例示例：

it('displays HTML popup', () => {
  cy.visit('https://example.com')
  
  cy.window().then((win) => {
    const popup = win.open('https://www.google.com/', 'Google', 'width=600,height=400')
    
    cy.wrap(popup).as('popup')
  })
  
  cy.get('@popup').should('exist')
  cy.get('@popup').invoke('close')
})

在上面的测试用例中，我们首先访问了 https://example.com，然后使用 window.open() 方法打开一个新的窗口。window.open() 方法接受三个参数，分别是要打开的网址、窗口名称和窗口大小。

注意，在 Cypress 中无法直接操作新打开的窗口。因此，我们可以将其包装在一个 Cypress 对象中，以便可以在测试用例中引用它。

最后，我们使用 cy.get() 命令查找 Cypress 对象，并断言该弹出窗口存在，并使用 .invoke() 方法关闭它。

处理 HTML 弹出窗口

虽然上面的示例可以打开一个新的窗口，但 Cypress 并不知道如何处理它。在 Cypress 中，我们可以使用 cy.window() 命令访问当前窗口，并在其中执行命令。因此，在处理 HTML 弹出窗口时，我们需要使用 cy.window().then() 命令，将命令添加到打开的窗口中。下面是一个示例测试用例：

it('handles HTML popup', () => {
  cy.visit('https://example.com')
  
  cy.window().then((win) => {
    const popup = win.open('https://www.google.com/', 'Google', 'width=600,height=400')
    
    cy.stub(win, 'alert').as('alert')
    
    setTimeout(() => {
      win.alert('Popup loaded')
    }, 5000)
  })

  cy.get('@alert').should('have.been.calledOnce').and('have.been.calledWith', 'Popup loaded')
})

在上面的测试用例中，我们首先访问了 https://example.com，然后使用 window.open() 方法打开一个新的窗口。我们还定义了一个 alert() 方法并将其存储在 Cypress 对象中。

在 5 秒钟后，我们使用 win.alert() 命令在新窗口中调用 alert() 方法。最后，我们使用 cy.get() 命令检查 alert() 方法是否被正确调用，并断言它的参数是否正确。

总结

在本篇文章中，我们介绍了如何在 Cypress 中处理 HTML 弹出窗口，并提供了示例测试用例。如果你需要在 Cypress 中测试 HTML 弹出窗口，希望这篇文章可以帮助到你。