Как слушать глобальные события с 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).Событие, которое вы ждете, никогда не сработает внутри document.

Сайпресса. Чтобы получить document значения AUT, используйте cy.document(), например:

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

Чтобы Cypress дождался вашего события, прежде чем продолжить, вы можете просто обернуть его в Cypress.Promise.В документации Cypress есть пример того, как ожидает выполнения Обещания .Для вашего 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')
})