Проверка URL и маршрутов

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

Проверка текущего URL

Cypress позволяет получать текущий URL с помощью команды cy.url(). Эта команда возвращает объект Chainable, с которым можно использовать различные методы для проверки значений.

Примеры проверок URL:

// Проверка точного совпадения URL
cy.url().should('eq', 'https://example.com/dashboard');

// Проверка, что URL содержит определённый путь
cy.url().should('include', '/dashboard');

// Проверка с использованием регулярного выражения
cy.url().should('match', /dashboard$/);

Особенности:

  • cy.url() автоматически ожидает завершения перехода и загрузки страницы.
  • Методы should и then позволяют применять как синхронные, так и асинхронные проверки.
  • Проверка с использованием include удобна для динамических URL с параметрами.

Работа с маршрутами и хэшами

Маршруты в приложениях с фронтенд-фреймворками (React, Vue, Angular) часто используют hash-based routing или history API. Cypress обеспечивает возможность тестирования таких маршрутов без дополнительных зависимостей.

Примеры:

// Проверка хэша в URL
cy.hash().should('eq', '#/profile');

// Переход на маршрут с хэшом
cy.visit('/#/settings');
cy.hash().should('include', '#/settings');

Особенности:

  • cy.hash() возвращает часть URL после символа #.
  • Позволяет тестировать одностраничные приложения (SPA) без перезагрузки страницы.

Навигация и переходы между страницами

Команды cy.visit() и действия пользователя (cy.click(), cy.get().trigger()) позволяют инициировать переходы, после которых необходимо проверять URL:

// Переход по ссылке и проверка URL
cy.get('a[href="/about"]').click();
cy.url().should('include', '/about');

// Переход с использованием cy.visit
cy.visit('/contact');
cy.url().should('eq', 'https://example.com/contact');

Особенности:

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

Проверка query-параметров

Query-параметры часто используются для фильтров, поиска и сортировки. Проверка корректности параметров важна для гарантии правильного поведения приложения.

Примеры:

// Проверка полного URL с query-параметрами
cy.url().should('eq', 'https://example.com/search?query=test');

// Проверка отдельного параметра
cy.url().then(url => {
  const params = new URL(url).searchParams;
  expect(params.get('query')).to.eq('test');
});

Особенности:

  • Использование URL API позволяет удобно работать с параметрами.
  • Проверка query-параметров нужна при тестировании динамических маршрутов.

Работа с history API

Одностраничные приложения часто используют методы pushState и replaceState для управления историей браузера. Cypress поддерживает проверку таких изменений.

Пример:

cy.window().then(win => {
  win.history.pushState({}, '', '/profile');
});

cy.url().should('include', '/profile');

Особенности:

  • Можно программно изменять историю браузера и проверять URL без перезагрузки.
  • Полезно для тестирования редиректов и логики маршрутизации.

Проверка редиректов

Cypress позволяет тестировать редиректы как клиентские, так и серверные. Важен порядок действий: сначала инициируется переход, затем проверяется конечный URL.

Пример проверки редиректа:

cy.visit('/old-page');
cy.url().should('eq', 'https://example.com/new-page');

Особенности:

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

Проверка навигации через кнопки и ссылки

Кнопки и ссылки могут изменять URL через SPA-маршруты или редиректы. Проверка URL после действий пользователя является стандартной практикой:

cy.get('button#go-to-dashboard').click();
cy.url().should('include', '/dashboard');

Особенности:

  • Для SPA проверка URL может сопровождаться проверкой видимости компонентов.
  • Можно комбинировать с проверкой истории браузера (cy.go('back'), cy.go('forward')).

Советы по организации тестов маршрутов

  • Разделять проверки URL и проверку содержимого страницы для улучшения читаемости тестов.
  • Использовать cy.url().should(...) вместо cy.then() для декларативного подхода.
  • Проверять query-параметры и hash отдельно от основного пути для точной диагностики ошибок.
  • Применять регулярные выражения при динамических URL с идентификаторами или временными метками.

Проверка URL и маршрутов в Cypress обеспечивает надёжный контроль навигации, позволяет выявлять ошибки маршрутизации и гарантирует корректное поведение приложения при переходах и изменениях истории браузера. Использование встроенных методов cy.url(), cy.hash(), cy.visit() и работы с window.history позволяет покрыть все основные сценарии маршрутизации, включая SPA, редиректы и динамические query-параметры.

Оглавление