cypress - 如何使用 Cypress 收听全局事件？

Question

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

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

然而;当我们在规范中使用它时，它不会按预期工作并且我们无法捕捉到它。此外，Cypress 不会等待测试并运行 afterEach无需等待回调运行。

Answer 1

您的代码没有像您预期的那样工作的原因是，在 Cypress 中，您的测试在与被测应用程序 (AUT) 不同的框架中运行。您正在等待的事件永远不会在 Cypress 的内部触发 document .

获取 document AUT，使用 cy.document() 像这样:

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

要让 Cypress 在继续之前等待您的事件，您可以将其包装在 Cypress.Promise 中。 . Cypress 文档有一个关于 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')
})