Почему заглушка в кипарисе может не работать для маршрута, вызванного после загрузки страницы

Question

Я использую Cypress для написания тестов, и у меня есть проблема, которая появляется не в каждом тесте.В некоторых случаях это работает, и я не знаю почему.Итак ...

Проблема:

Я определил маршрут и псевдоним для него в beforeEach:

beforeEach(function () {
  cy.server()
  cy.route('GET', '/favourites?funcName=columnPreset', []).as('columnPresetEmpty')
  cy.visit('#/search')
})

Заглушка работает нормально, если httpзапрос произошел при загрузке страницы.Но если я выполняю запрос, отвечающий на событие click (модальное диалоговое окно открывается и выполняет запрос http), оно просто появляется в командах, которые не отображаются как заглушки, и после cy.wait('@columnPresetEmpty') происходит сбой с истечением времени ожидания запроса.

 it('does not work', function () {
   cy.get('[data-test=button-gridSettings]').click()
   cy.wait('@columnPresetEmpty')
 })

В то же времяв других тестах у меня почти схожая функциональность, когда запрос выполняется простым нажатием кнопки, без открытия нового модального окна.Это единственная разница.

Что я делаю не так?

Answer 1

Для информации, я попробовал это на моем модале поиска (в приложении Vue), и он работает нормально.

Что я сделал:

• создал пустышкуфайл с именем test-get-in-modal.txt в статической папке приложения

• добавил http.get('test-get-in-modal.txt') внутри модального кода, поэтому он запускается только послемодал открыт

• в спецификации, cy.server(), cy.route('GET', 'test-get-in-modal.txt', []).as('testGetInModal') в before()

• в it()добавлено cy.wait('@testGetInModal'), которое удалось

• изменилось на cy.route('GET', 'not-the-file-you-are-looking-for.txt'..., что не удалось, как ожидалось

---

Единственное отличие, которое я вижу, эточто я cy.visit() страница до cy.server(), который не является документированным шаблоном, но, кажется, в этом сценарии все в порядке.

Answer 2

Я нашел причину, вызывающую такое поведение.Проблема была не в самом модальном окне, но код, выполняющий второй запрос, был вызван в обратном вызове обещания другого запроса.Что-то вроде:

fetch('/initData')
  .then(loadView)

И функция loadView выполнила второй выбор.

Так что, когда я удалил loadView из обратного вызова обещания, оба запроса стали видны для кипариса.

Answer 3

Возможно, кипарис не может полностью обработать fetch вызовы.Вы можете отключить его следующим образом, но убедитесь, что у вас есть выборка polyfill.Это тогда выдаст запросы XHR, которые может наблюдать кипарис.

cy.visit('#/search', {
    onBeforeLoad: (win) => {
        win.fetch = null
    }
})

Подробнее читайте здесь: https://github.com/cypress-io/cypress/issues/95#issuecomment-281273126