Time travel debugging

Time Travel — одна из ключевых особенностей Cypress, которая значительно упрощает процесс отладки тестов. Этот механизм позволяет просматривать состояние приложения в каждый момент выполнения команды теста, обеспечивая глубокий контроль и прозрачность тестирования.

Основы Time Travel

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

Ключевые моменты:

  • Каждый вызов cy.get, cy.click, cy.type и других команд сопровождается снимком DOM.
  • Time Travel работает только в режиме Test Runner (не в headless режиме), что делает визуальную отладку удобной.
  • Возможность отслеживания изменений стилей, текста, атрибутов элементов на протяжении всего теста.

Практическая работа с Time Travel

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

Пример:

describe('Time Travel пример', () => {
  it('Отображение элемента после клика', () => {
    cy.visit('/login')
    cy.get('input[name="username"]').type('admin')
    cy.get('input[name="password"]').type('password')
    cy.get('button[type="submit"]').click()
    cy.contains('Добро пожаловать, admin')
  })
})

В Test Runner можно:

  1. Навести курсор на cy.get('input[name="username"]') и увидеть пустое поле.
  2. Перейти к type('admin') и проверить, что значение инпута изменилось.
  3. После click() убедиться, что страница обновилась и появился текст приветствия.

Преимущества Time Travel

  1. Быстрая диагностика ошибок: сразу видно, на каком шаге DOM не соответствует ожиданиям.
  2. Отслеживание состояния элементов: изменения классов, атрибутов и текста становятся наглядными.
  3. Упрощение сложных тестов: при длинных сценариях можно изучать каждый шаг без логирования.

Ограничения и особенности

  • Time Travel не показывает состояние перед Cypress-командой, только после её выполнения.
  • В асинхронных сценариях важно учитывать, что снимки фиксируются только после завершения Cypress-команды, а не произвольного JS-кода.
  • Snapshots занимают дополнительную память, поэтому при очень больших тестовых наборах это может замедлить визуальный Test Runner.

Интеграция с DevTools

Cypress позволяет использовать Time Travel совместно с Chrome DevTools. При просмотре снимка DOM можно открыть консоль и инспектировать элементы напрямую, что облегчает понимание, почему тест не прошел. Любые изменения в DOM на шаге теста можно наблюдать и сравнивать с ожидаемым состоянием.

Советы по эффективному использованию

  • Разделять тесты на небольшие логические блоки, чтобы Time Travel показывал шаги более осмысленно.
  • Использовать команды cy.debug() и cy.pause() для остановки выполнения и детального изучения состояния DOM.
  • В сложных формах проверять ввод и рендеринг данных пошагово, обращаясь к снимкам Time Travel.

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

Оглавление