Советы по отладке тестов в Cypress

Отладка — это процесс поиска, анализа и устранения причин отказа в компоненте или системе. Эта статья содержит несколько советов по отладке тестов в Cypress, которые должны помочь справиться с этой задачей.

Содержание:

• .pause()
• console.log()
• Запустить тест несколько раз
• Обратиться к видео
• Использовать временную шкалу
• Использовать панель инструментов Cypress

Подпишитесь на наш ТЕЛЕГРАМ КАНАЛ ПО АВТОМАТИЗАЦИИ ТЕСТИРОВАНИЯ

.pause()

При работе с Cypress в режиме графического интерфейса можно использовать .pause() — команду для остановки теста в проблемном месте. Обычно это делается для того, чтобы просмотреть тест прямо перед проблемным утверждением или действием, которое приводит к сбою. После приостановки теста можно взаимодействовать со страницей, изучить её состояние, а затем нажать кнопку play, чтобы продолжить выполнение теста.

Не стоит беспокоиться о присутствии этой команды в тестах, поскольку она игнорируется при запуске тестов в режиме headless. Подробнее о .pause() можно узнать в документации Cypress.

console.log()

Cypress — это JavaScript, который выполняется внутри браузера, где вы можете использовать все возможности DevTools. Если вы ещё не умеете или не хотите использовать отладчик, то простой console.log() может помочь вам.

cy
  .intercept('POST', '/api/boards')
  .as('createBoard')

cy
  .wait('@createBoard')
  .then( ({ response }) => {
    console.log(response.body)
  })

Этот код выводит тело ответа запроса, при этом вывод отображается в консоли браузера. Но при запуске Cypress с помощью команды npx cypress open, сам скрипт Cypress запускается внутри браузера. И именно там будет находиться ваш console.log() вывод.

Запустить тест несколько раз

Иногда необходимо отладить тест, потому что он нестабилен. Одной из причин нестабильности является скорость выполнения теста. На странице блога Cypress есть хороший раздел, посвящённый стабилизации тестов.

Однако знание того, что тест нестабилен — это лишь часть проблемы. Чтобы стабилизировать тест, необходимо найти источник проблемы. В ситуациях, когда утверждение выполняется слишком быстро или сеть нестабильна, стоит запускать тесты несколько раз. Это связано с тем, что тест может не работать на конвейере, но успешно проходить локально. Прогон теста несколько раз обычно позволяет выявить проблему. Можно использовать стандартный цикл for, но также для этих целей подойдёт использование функции times из Lodash, как показано ниже:

Cypress._.times(10, () => {

  it('flaky test', () => {

    // test code

  });

});

Обратиться к видео

Это может показаться очевидным, но в первую очередь нужно смотреть не на саму ошибку, а на контекст, в котором она возникла. Cypress автоматически записывает видео в режиме headless, но эту функцию также можно отключить.

Чаще всего запись видео отключают, чтобы повысить скорость, но на самом деле можно найти компромисс. Установка videoUploadOnPasses в значении false в cypress.json будет загружать видео только в случае неудачного теста.

Использовать временную шкалу

Временная шкала (timeline) в графическом интерфейсе является отличным инструментом отладки. Она позволяет просмотреть состояние на каждом из этапов теста и выяснить, что могло привести к сбою. Следующий тест содержит распространённую ошибку:

// create item
cy
  .get('input')
  .type('new item{enter}')

// item appears as a second item on page
cy
  .get('.item')
  .eq(1)
  .should('be.visible')

Такой тест часто завершается неудачей. Между вводом нового элемента и его появлением на странице происходит много действий. Это может быть HTTP-запрос, сообщение через WebSocket, повторное отображение списка и т. д. Все эти процессы могут привести к сбою.

Это связано с тем, что Cypress автоматически повторяет утверждение и предыдущую команду. Но при этом будет повторяться только предыдущая команда, а не вся цепочка команд. Если навести курсор на команду .eq() в нашем тесте, то можно увидеть, что мы не получаем нужного элемента. Если элемент отображается с задержкой, то состояние приложения будет таким, каким оно было в момент выполнения команды .get().

Использовать панель инструментов Cypress

Панель инструментов Cypress можно бесплатно использовать при 500 ежемесячных записях, либо без ограничений, если вы работаете над проектом с открытым кодом. При записи результатов тестов в панель инструментов, вы и ваша команда может просматривать скриншоты и изучать возникшие ошибки. Отдельно стоит отметить функцию аналитического обзора, которая демонстрирует наиболее распространённые ошибки или неудачные тесты.

Перевод статьи «Tips for debugging tests in Cypress».