Переходы между страницами

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

Навигация с помощью cy.visit()

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

cy.visit('/login'); // переход на страницу авторизации
cy.url().should('include', '/login'); // проверка URL
cy.get('form').should('be.visible'); // проверка, что форма авторизации загружена

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

  • cy.visit() принимает как относительные, так и абсолютные URL.
  • Можно передавать дополнительные опции, например, заголовки или куки.
  • Cypress автоматически ждет загрузки страницы, поэтому нет необходимости добавлять wait() вручную в большинстве случаев.

Взаимодействие с элементами для навигации

Часто переход между страницами осуществляется через клики по ссылкам или кнопкам. Для этого используются методы cy.get() и cy.click().

cy.get('a[href="/dashboard"]').click();
cy.url().should('include', '/dashboard');
cy.get('h1').should('contain', 'Панель управления');

Важно: Cypress автоматически ожидает доступности элемента для клика. Если элемент динамически появляется после загрузки, можно использовать .should('be.visible') или .contains() для более надежного выбора.

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

Для контроля переходов применяются следующие методы:

  • cy.url() — проверка текущего URL.
  • cy.location() — доступ к объекту location, включая pathname, search и hash.
  • cy.hash() — проверка хэша в URL при переходах без перезагрузки.

Примеры:

cy.location('pathname').should('eq', '/dashboard');
cy.hash().should('eq', '#section1');
cy.url().should('match', /\/profile\/\d+/);

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

Переходы без полной перезагрузки страницы

В современных SPA (Single Page Application) переходы часто происходят без перезагрузки. Cypress поддерживает такой сценарий с использованием маршрутизатора приложения. Основные подходы:

  • Проверка URL через cy.url() после действия.
  • Проверка появления элементов, уникальных для целевой страницы.
  • Использование событий роутера, если приложение поддерживает их для тестирования.
cy.get('button#profile-link').click();
cy.url().should('include', '/profile');
cy.get('.profile-header').should('be.visible');

Использование cy.go() для навигации по истории

Cypress позволяет управлять историей браузера с помощью cy.go(), что удобно для тестирования кнопок «Назад» и «Вперед».

cy.visit('/page1');
cy.visit('/page2');
cy.go('back'); // переход на /page1
cy.url().should('include', '/page1');
cy.go('forward'); // возврат на /page2

Метод cy.go() принимает как строковые значения 'back' или 'forward', так и числовые аргументы для перемещения на несколько шагов истории.

Работа с редиректами

Редиректы могут быть серверными или клиентскими. Cypress автоматически отслеживает серверные редиректы, а для проверки клиентских следует контролировать URL после действия.

cy.visit('/old-page');
cy.url().should('include', '/new-page'); // серверный редирект

Для клиентских редиректов рекомендуется проверять одновременно URL и видимые элементы, чтобы убедиться, что контент загружен корректно.

Асинхронность и ожидания при переходах

Cypress использует встроенные ожидания, что снижает необходимость в ручных таймерах. Однако при динамических переходах полезно проверять элементы, уникальные для целевой страницы, через .should('be.visible') или .contains().

cy.get('a#dynamic-page-link').click();
cy.get('.dynamic-content', { timeout: 10000 }).should('exist');

Практика тестирования сложных сценариев

  1. Цепочка переходов: проверка нескольких шагов навигации с сохранением состояния приложения.
  2. Проверка query-параметров: использование cy.location('search') для контроля параметров URL.
  3. Тестирование приватных маршрутов: имитация аутентифицированного пользователя через куки или localStorage перед переходом.
cy.setCookie('auth', 'token123');
cy.visit('/private');
cy.url().should('include', '/private');
  1. Проверка корректности редиректов после действий: формы, кнопки и уведомления, которые вызывают навигацию.

Рекомендации по структуре тестов

  • Каждый тест должен начинаться с явного состояния страницы.
  • Проверка URL должна сочетаться с проверкой видимых элементов.
  • Для SPA рекомендуется использовать проверки DOM вместе с cy.url(), чтобы убедиться в полной загрузке контента.
  • Использование cy.go() позволяет имитировать поведение пользователя при навигации по истории.

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

Оглавление