Работа с хэшами в URL

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

Основы работы с хэшами

Хэш — это часть URL, следующая после символа #. Пример:

https://example.com/page#section1

Здесь #section1 — хэш. В браузере изменение хэша не приводит к перезагрузке страницы, но может инициировать события JavaScript, такие как hashchange.

В Cypress URL с хэшами можно проверять и изменять через методы, которые взаимодействуют с объектом window.location и стандартными командами Cypress.

Проверка хэша в URL

Для проверки текущего хэша используется команда .location() с параметром "hash":

cy.location('hash').should('eq', '#section1');
  • cy.location('hash') возвращает строку текущего хэша, включая символ #.
  • should('eq', '#section1') проверяет точное совпадение с ожидаемым значением.

Альтернативно можно использовать регулярные выражения:

cy.location('hash').should('match', /^#section\d$/);

Это удобно для динамических хэшей.

Навигация по хэшу

Изменение хэша на лету в тестах позволяет проверять работу внутренних ссылок и динамических элементов. Пример:

cy.get('a[href="#section2"]').click();
cy.location('hash').should('eq', '#section2');

Также можно программно изменить хэш через cy.window():

cy.window().then((win) => {
  win.location.hash = 'section3';
});
cy.location('hash').should('eq', '#section3');

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

Реакция на события hashchange

В JavaScript событие hashchange вызывается при изменении хэша. Cypress позволяет проверять поведение приложения при этом событии. Например:

cy.window().then((win) => {
  const callback = cy.stub();
  win.addEventListener('hashchange', callback);

  win.location.hash = 'newSection';
  cy.wrap(callback).should('be.calledOnce');
});

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

Хэши и навигация с history API

В современных одностраничных приложениях (SPA) хэш часто используется вместе с history API для управления состоянием маршрутизации. Cypress поддерживает проверку истории браузера через команды .go(), .back() и .forward().

Пример теста маршрутизации с хэшами:

cy.visit('/page#start');
cy.get('a[href="#next"]').click();
cy.location('hash').should('eq', '#next');

cy.go('back');
cy.location('hash').should('eq', '#start');

cy.go('forward');
cy.location('hash').should('eq', '#next');

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

Динамические хэши и параметры

Некоторые приложения используют хэш для передачи параметров, например #tab=2&filter=active. В Cypress проверка таких хэшей осуществляется с помощью методов работы со строками и регулярных выражений:

cy.location('hash').should((hash) => {
  expect(hash).to.include('tab=2');
  expect(hash).to.match(/filter=active/);
});

Это полезно для проверки корректного сохранения состояния интерфейса при изменении параметров через хэш.

Практические рекомендации

  • Всегда проверять, что хэш начинается с #.
  • Для динамических значений лучше использовать регулярные выражения или включение подстроки, а не точное равенство.
  • Использовать cy.window() для эмуляции программных изменений хэша и проверки реакции приложения.
  • Комбинировать проверки хэша с проверкой видимости элементов на странице для полноценного тестирования SPA.

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

Оглавление