Манипуляция браузерным хранилищем

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

Работа с localStorage

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

Получение значения из localStorage:

cy.window().then((win) => {
  const token = win.localStorage.getItem('authToken');
  cy.log(token);
});

Установка значения в localStorage:

cy.window().then((win) => {
  win.localStorage.setItem('authToken', '123456789');
});

Удаление значения из localStorage:

cy.window().then((win) => {
  win.localStorage.removeItem('authToken');
});

Очистка всего localStorage:

cy.window().then((win) => {
  win.localStorage.clear();
});

Использование cy.window() важно, потому что Cypress выполняет тесты в отдельной изолированной среде, и прямой доступ к localStorage через обычный JavaScript невозможен без получения объекта окна браузера.

Работа с sessionStorage

sessionStorage отличается от localStorage тем, что данные хранятся только в течение текущей сессии вкладки. После закрытия вкладки данные теряются. Cypress позволяет манипулировать sessionStorage аналогично localStorage:

cy.window().then((win) => {
  win.sessionStorage.setItem('sessionKey', 'sessionValue');
  const value = win.sessionStorage.getItem('sessionKey');
  cy.log(value);
  win.sessionStorage.removeItem('sessionKey');
});

Использование команд Cypress для упрощения

Для повторяющихся операций с хранилищем удобно создавать кастомные команды в cypress/support/commands.js:

Cypress.Commands.add('setLocalStorage', (key, value) => {
  cy.window().then((win) => {
    win.localStorage.setItem(key, value);
  });
});

Cypress.Commands.add('getLocalStorage', (key) => {
  cy.window().then((win) => {
    return win.localStorage.getItem(key);
  });
});

Применение таких команд делает тесты более читаемыми:

cy.setLocalStorage('authToken', 'abcdef');
cy.getLocalStorage('authToken').then((token) => {
  expect(token).to.eq('abcdef');
});

Загрузка состояния хранилища перед тестом

При тестировании приложений с авторизацией часто нужно заранее заполнить localStorage значениями, имитируя авторизованного пользователя:

beforeEach(() => {
  cy.visit('/');
  cy.setLocalStorage('authToken', 'abcdef123456');
});

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

Проверка состояния хранилища

Cypress позволяет проверять содержимое localStorage и sessionStorage с помощью стандартных методов:

cy.window().then((win) => {
  expect(win.localStorage.getItem('authToken')).to.exist;
  expect(win.localStorage.getItem('authToken')).to.eq('abcdef123456');
});

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

Очистка хранилища между тестами

Для поддержания независимости тестов рекомендуется очищать хранилище перед каждым тестом:

beforeEach(() => {
  cy.window().then((win) => {
    win.localStorage.clear();
    win.sessionStorage.clear();
  });
});

Сценарии использования

  • Тестирование авторизации: заполнение токена и проверка доступа к защищённым страницам.
  • Сохранение пользовательских настроек: изменение темы, языка интерфейса и проверка корректного применения.
  • Кэширование данных: проверка того, что данные сохраняются между переходами по страницам.

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

  • Cypress выполняется в браузере в изолированной среде, поэтому доступ к хранилищу через window всегда предпочтителен.
  • localStorage и sessionStorage доступны только после загрузки страницы (cy.visit()), попытка работать с ними до этого приведёт к ошибкам.
  • Данные sessionStorage исчезают при перезагрузке вкладки, что следует учитывать при многократных переходах.

Практическая оптимизация тестов

Для сложных сценариев рекомендуется комбинировать заполнение localStorage с загрузка fixture-файлов:

cy.fixture('user.json').then((user) => {
  cy.setLocalStorage('userData', JSON.stringify(user));
});

Это позволяет хранить данные пользователей или настройки в виде JSON и использовать их в разных тестах без дублирования кода.

Манипуляция браузерным хранилищем в Cypress — это ключевой инструмент для ускорения тестов и повышения их надёжности. Правильное управление localStorage и sessionStorage позволяет создавать изолированные, повторяемые и устойчивые тестовые сценарии.

Оглавление