Устранение шелушения кипарисовика
Недавно я прошел тест Cypress, который оказался очень нестабильным. Иногда это проходило, а иногда терпело неудачу.
Однажды, после трех неудачных конвейеров развертывания благодаря этому тесту, я решил улучшить его раз и навсегда.
Ошибка Cypress, которую я получал, мало что мне рассказала. Элемент #results DOM не был найден, но это могло произойти по многим причинам.
Когда я открыл тест, он выглядел примерно так:
Вы можете определить проблему?
Спойлер - проблема в четвертой строке: cy.wait(1000).
Панель поиска выполняет API-вызов сервера. Однако в нашей среде CI этот вызов API был очень медленным. Это приведет к тому, что Cypress будет искать продукт «Hand Sanitizer Pro», пока API еще загружается.
Улучшение теста
Лучший способ решить эту проблему - позволить Cypress дождаться завершения вызова API.
Добиться этого можно следующим образом:
Здесь мы помечаем маршрут /search как search.
Затем, вызвав cy.wait("@search"), Cypress будет ждать завершения вызова API, прежде чем продолжить.
Более того, если вызов API по какой-либо причине не работает, то полученная нами ошибка Cypress будет гораздо более полезной:
Это говорит нам, например, о том, что вызов API никогда не выполняется.
Дайвинг глубже
Используя cy.wait("@search"), вы получаете доступ к объекту XHR.
Это означает, что вы можете утверждать определенные вещи о вызове API из Cypress. Например:
Здесь мы утверждаем, что конечная точка /search вызывается с параметром запроса q со значением Hand Sanitizer.
Вы можете утверждать многое об объекте XHR, -c просмотрите документацию Cypress для получения дополнительной информации.
Заключение
Я рекомендую всегда использовать это при ожидании вызовов API - и держитесь как можно дальше от cy.wait(seconds)!
