Работа с историей браузера

Cypress предоставляет мощные инструменты для управления историей браузера, что особенно важно при тестировании многостраничных приложений (SPA и MPA). История браузера в контексте тестирования позволяет контролировать навигацию, проверять корректность переходов и эмулировать действия пользователя с кнопками «Назад» и «Вперед».

Управление навигацией с помощью cy.visit()

Метод cy.visit(url) используется для перехода на конкретный URL. Он очищает состояние приложения и загружает страницу заново, что важно учитывать при проверке истории:

cy.visit('/home');
cy.visit('/about');

Каждый вызов cy.visit() создает новую запись в истории браузера, однако Cypress автоматически сбрасывает состояние между тестами, поэтому для последовательного тестирования истории внутри одного теста важно выполнять все действия в рамках одной функции it().

Переход назад и вперед

Для эмуляции нажатий кнопок «Назад» и «Вперед» используются команды cy.go() и cy.reload().

  • cy.go(direction) – выполняет навигацию по истории браузера. Аргумент direction может быть числом или строкой:

    • -1 — переход на предыдущую страницу (назад)
    • 1 — переход на следующую страницу (вперед)
    • 'back' — аналог -1
    • 'forward' — аналог 1
cy.visit('/home');
cy.visit('/about');
cy.go('back'); // Вернется на /home
cy.go('forward'); // Вернется на /about
  • cy.reload() – обновляет текущую страницу, сохраняя запись в истории. Это позволяет протестировать корректное восстановление состояния приложения при перезагрузке.

Проверка URL и состояния истории

Cypress позволяет не только переходить по истории, но и проверять, что переход произошел корректно:

  • Проверка URL после навигации:
cy.visit('/home');
cy.visit('/about');
cy.go('back');
cy.url().should('include', '/home');
  • Проверка части истории с cy.location():
cy.location('pathname').should('eq', '/home');

Метод cy.location() предоставляет доступ к объекту window.location, что позволяет проверять протокол, хост, порт и хэш.

Работа с хэшем и query-параметрами

Многие приложения используют хэш для навигации без перезагрузки страницы. Cypress позволяет эмулировать и проверять такие переходы:

cy.visit('/home#section1');
cy.hash().should('eq', '#section1');

cy.visit('/home?user=123');
cy.location('search').should('eq', '?user=123');

cy.hash() и cy.location('search') дают возможность контролировать состояние URL без полного перезапуска страницы.

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

  1. Cypress управляет навигацией через window.history, но не сохраняет историю между разными тестами (it() блоками). Для тестов, требующих нескольких переходов, все действия должны выполняться в одном тесте.
  2. При использовании cy.visit() нельзя автоматически тестировать историю назад/вперед, если переход ведет на внешние домены — Cypress ограничивает доступ к другим сайтам из соображений безопасности.
  3. Переходы по истории не вызывают события beforeunload или unload так же, как это делает настоящий браузер. Для эмуляции таких сценариев требуется ручное тестирование через stubbing или intercept.

Совмещение навигации с асинхронными действиями

При работе с историей важно учитывать асинхронность загрузки контента. Использование cy.wait() или проверки элементов после навигации обеспечивает стабильность тестов:

cy.visit('/home');
cy.get('#loadButton').click();
cy.visit('/about');
cy.go('back');
cy.get('#loadButton').should('be.visible');

Такой подход гарантирует, что элементы, появляющиеся после асинхронных операций, корректно проверяются при возврате по истории.

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

  1. Тестирование SPA с динамическими маршрутами:
cy.visit('/dashboard');
cy.get('a[href="/profile"]').click();
cy.location('pathname').should('eq', '/profile');
cy.go('back');
cy.location('pathname').should('eq', '/dashboard');
  1. Тестирование формы с сохранением состояния при навигации:
cy.visit('/form');
cy.get('#name').type('Иван');
cy.visit('/summary');
cy.go('back');
cy.get('#name').should('have.value', 'Иван');
  1. Проверка корректности query-параметров после перехода:
cy.visit('/products?category=books');
cy.get('a[href="/products?category=electronics"]').click();
cy.location('search').should('eq', '?category=electronics');
cy.go('back');
cy.location('search').should('eq', '?category=books');

Рекомендации по работе с историей

  • Все переходы и проверки истории должны выполняться в одном блоке it() для корректного сохранения состояния.
  • Использовать cy.location() и cy.url() для проверки текущего пути и query-параметров.
  • Хэш-навигация SPA требует контроля через cy.hash().
  • Асинхронные операции нужно обязательно проверять после навигации с помощью cy.get() или cy.wait().
  • Избегать переходов на внешние домены при тестировании истории — они не поддерживаются.

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

Оглавление