Инструменты отладки в Test Runner

Cypress предоставляет мощные возможности для отладки тестов через свой Test Runner. Эти инструменты позволяют анализировать выполнение тестов, выявлять ошибки и управлять состоянием приложения в реальном времени.

Просмотр тестов и шагов выполнения

Test Runner отображает каждый тест и его отдельные шаги. Каждое действие в тесте (например, cy.get(), cy.click(), cy.type()) фиксируется и визуализируется в интерфейсе. Для каждого шага доступна подробная информация:

  • Статус выполнения: успешно, неуспешно или пропущено.
  • Снимки DOM: Cypress делает снимок состояния страницы до и после выполнения каждого шага. Это позволяет визуально сопоставлять действия с изменениями интерфейса.
  • Время выполнения: полезно для обнаружения узких мест и задержек.

Интерактивная отладка через командную строку

Встроенная консоль Test Runner позволяет запускать команды на лету с помощью Cypress API. Команды можно вводить в режиме реального времени для проверки состояния элементов, изменения данных или вызова функций приложения.

Примеры:

cy.get('button.submit').then($btn => {
  console.log($btn.text());
});
cy.window().then(win => {
  win.localStorage.clear();
});

Такая интерактивность позволяет анализировать поведение приложения без необходимости перезапуска теста.

Использование debug() и pause()

Cypress предоставляет специальные методы для детальной отладки:

  • cy.debug() останавливает выполнение на текущем шаге и выводит объект команды в консоль браузера. Позволяет изучить состояние DOM и цепочку вызовов.
  • cy.pause() приостанавливает выполнение теста до ручного продолжения в интерфейсе Test Runner. Полезно для проверки промежуточных состояний приложения или воспроизведения ошибок, которые трудно отловить автоматически.
cy.get('input[name="username"]').type('admin').debug();
cy.get('form').submit().pause();

Работа с DevTools и Chrome Inspector

Test Runner интегрируется с инструментами разработчика браузера. Это позволяет:

  • Просматривать стек вызовов ошибок JavaScript.
  • Отслеживать сетевые запросы через вкладку Network, анализировать заголовки, статус и тело запросов.
  • Использовать точки останова (breakpoints) в исходном коде приложения или тестов.

Cypress автоматически подхватывает ошибки браузера и отображает их в панели теста, что упрощает поиск причин неудачных тестов.

Логирование и вывод информации

Cypress поддерживает логирование на разных уровнях:

  • Консоль браузера (console.log, console.warn, console.error).
  • Встроенные логи Cypress, отображаемые в Test Runner для каждой команды.
cy.get('div.alert').should('be.visible').then($el => {
  console.log('Alert text:', $el.text());
});

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

Снимки состояния и видео-запись

Test Runner автоматически делает скриншоты при падении теста. В дополнение к этому можно настроить видеозапись всей сессии выполнения тестов. Это особенно полезно для интеграции с CI/CD, когда визуальная отладка невозможна.

  • Скриншоты сохраняются в cypress/screenshots.
  • Видео-файлы сохраняются в cypress/videos.

Советы по эффективной отладке

  • Использовать cy.pause() только на проблемных шагах, чтобы не замедлять тесты.
  • Снимать скриншоты для сложных элементов интерфейса, которые меняются динамически.
  • Проверять состояние локального хранилища, cookie и сетевых запросов перед и после выполнения действий.
  • Включать подробные логи (CYPRESS_DEBUG=true) при анализе сложных ошибок.

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

Оглавление