Команда cy.debug()

Команда cy.debug() является инструментом для интерактивного анализа выполнения тестов в Cypress. Она позволяет приостановить выполнение цепочки команд и вывести текущий объект в консоль разработчика, предоставляя возможность изучить состояние DOM, свойства элементов и данные, которые обрабатываются на момент вызова.

Основные принципы работы

cy.debug() выполняется как промежуточная точка в цепочке команд Cypress. Она не изменяет поведение теста, а лишь добавляет вывод текущего объекта и остановку на этом шаге для инспекции.

Пример базового использования:

cy.get('button.submit')
  .debug()
  .click();

В этом примере команда cy.debug() позволяет увидеть, какой элемент был найден с помощью cy.get, перед тем как выполняется клик. В консоли будет выведен объект jQuery, содержащий найденный элемент.

Отличия от cy.log() и console.log()

  • cy.log() выводит строку в панель логов Cypress, не прерывая выполнение теста.
  • console.log() выводит данные в браузерную консоль, но не связан с механизмом управления Cypress и не учитывает асинхронность цепочки команд.
  • cy.debug() останавливает цепочку только визуально в DevTools, позволяя интерактивно изучить объект, с которым работает Cypress.

Применение для отладки сложных цепочек

При работе с длинными цепочками команд cy.debug() помогает выявлять ошибки на конкретном этапе. Например:

cy.get('ul.items > li')
  .eq(2)
  .debug()
  .should('contain.text', 'Нужный элемент');

Здесь cy.debug() позволяет убедиться, что выбранный элемент действительно соответствует ожиданиям перед проверкой текста.

Совместимость с асинхронными командами

Cypress автоматически управляет асинхронностью команд. cy.debug() корректно работает в цепочках с командами типа cy.request, cy.wait и cy.then, позволяя остановиться на промежуточных объектах.

Пример:

cy.request('/api/users')
  .its('body')
  .debug()
  .then(users => {
    expect(users).to.have.length.greaterThan(0);
  });

В этом случае можно просмотреть массив пользователей перед выполнением утверждения.

Использование в сочетании с cy.then()

cy.debug() особенно полезен внутри cy.then(), когда необходимо инспектировать объект или результат промиса:

cy.get('div.card')
  .then($cards => {
    $cards.each((index, card) => {
      cy.wrap(card).debug();
    });
  });

Каждый элемент оборачивается через cy.wrap и выводится в консоль для анализа, что облегчает работу с динамическими списками и сложными структурами DOM.

Практические советы

  • Расположение cy.debug() в цепочке имеет значение: остановка произойдёт на той команде, после которой она вызвана.
  • Не стоит оставлять cy.debug() в финальных версиях тестов, так как это замедляет выполнение.
  • Совместимо со всеми командами Cypress, возвращающими объекты, массивы или jQuery элементы.

Пример комплексного использования

cy.visit('/products')
  .get('.product-card')
  .filter(':visible')
  .debug()
  .first()
  .find('button.add-to-cart')
  .click()
  .then(() => {
    cy.get('#cart-count').debug();
  });

На каждом этапе цепочки можно наблюдать, какие элементы выбираются и как изменяется состояние страницы, что делает cy.debug() мощным инструментом для локализации ошибок в сложных тестах.

Резюме возможностей

  • Вывод текущего объекта в консоль.
  • Приостановка цепочки для интерактивной проверки.
  • Совместимость с асинхронными и синхронными командами.
  • Интеграция с cy.then() и cy.wrap() для работы с массивами и DOM элементами.

Использование cy.debug() значительно ускоряет процесс разработки тестов, позволяя визуально отслеживать состояние элементов и промежуточные данные в реальном времени.

Оглавление