如何使用 Cypress 监听全球事件？

Question

我们有一个应用程序定期轮询服务器，直到任务完成。我们触发了一个全局事件，以便 Cypress 可以捕获并确定任务是否完成，但我们在 Cypress 上使用 document.addEventListener 时遇到了问题。这是我们正在做的事情：

document.addEventListener('queryEnd', () => {
    cy.get('.chart').should('be.visible')
    cy.get('.table').should('be.visible')
  })

但是；当我们在规范中使用它时，它不会按预期工作，我们无法捕捉到它。此外，赛普拉斯不等待测试并运行afterEach，而无需等待回调运行。

Answer 1

您的代码未按预期运行的原因是，在赛普拉斯中，您的测试运行在与被测应用程序 (AUT) 不同的框架中。您等待的事件永远不会在 Cypress 的 document 中触发。

要获取 AUT 的 document，请像这样使用 cy.document()：

cy.document()
.then($document => {
  // now $document is a reference to the AUT Document
  $document.addEventListener(...)
})

要让赛普拉斯在继续之前等待您的事件，您可以将其包装在 Cypress.Promise 中。赛普拉斯文档有一个关于 waiting for a Promise to complete 的示例。对于您的 queryEnd 事件，它看起来像这样：

cy.document() // get a handle for the document
.then($document => {
  return new Cypress.Promise(resolve => { // Cypress will wait for this Promise to resolve
    const onQueryEnd = () => {
      $document.removeEventListener('queryEnd', onQueryEnd) // cleanup
      resolve() // resolve and allow Cypress to continue
    }
    $document.addEventListener('queryEnd', onQueryEnd)
  })
})
.then(() => {
  cy.get('.chart').should('be.visible')
  cy.get('.table').should('be.visible')
})