LocalStorage API

Cypress предоставляет удобные методы для взаимодействия с LocalStorage, что позволяет сохранять, извлекать и удалять данные на стороне клиента в процессе тестирования веб-приложений. LocalStorage — это механизм веб-хранилища, который позволяет сохранять данные в браузере на стороне клиента без ограничения на время жизни сессии. Доступ к LocalStorage осуществляется через объект window.localStorage.

Основные методы работы с LocalStorage

LocalStorage поддерживает несколько базовых операций:

  • setItem(key, value) — сохраняет значение value по ключу key.
  • getItem(key) — возвращает значение по ключу key. Если ключ отсутствует, возвращает null.
  • removeItem(key) — удаляет значение по ключу key.
  • clear() — очищает весь LocalStorage.
  • key(index) — возвращает ключ по указанному индексу.
  • length — возвращает количество элементов в хранилище.

Работа с LocalStorage в тестах Cypress

Cypress не предоставляет отдельного API для LocalStorage напрямую, однако доступ к нему можно получить через объект window в командной цепочке Cypress.

Пример сохранения данных:

cy.window().then((win) => {
  win.localStorage.setItem('token', '12345abcdef');
});

Пример получения данных:

cy.window().then((win) => {
  const token = win.localStorage.getItem('token');
  expect(token).to.equal('12345abcdef');
});

Пример удаления данных:

cy.window().then((win) => {
  win.localStorage.removeItem('token');
  expect(win.localStorage.getItem('token')).to.be.null;
});

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

cy.window().then((win) => {
  win.localStorage.clear();
  expect(win.localStorage.length).to.equal(0);
});

Использование Cypress команд для работы с LocalStorage

Для упрощения и повторного использования кода часто создаются кастомные команды. В файле cypress/support/commands.js можно определить команды для работы с LocalStorage:

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);
  });
});

Cypress.Commands.add('clearLocalStorage', () => {
  cy.window().then((win) => {
    win.localStorage.clear();
  });
});

Использование кастомных команд делает тесты более читаемыми:

cy.setLocalStorage('user', 'JohnDoe');
cy.getLocalStorage('user').then((value) => {
  expect(value).to.equal('JohnDoe');
});
cy.clearLocalStorage();

Сохранение состояния между тестами

LocalStorage можно использовать для хранения данных, необходимых между тестами. По умолчанию Cypress очищает LocalStorage перед каждым тестом, но это поведение можно изменить с помощью хуков before, beforeEach и плагина cypress-localstorage-commands.

Пример сохранения данных между тестами без плагинов:

before(() => {
  cy.setLocalStorage('session', 'xyz123');
});

beforeEach(() => {
  cy.window().then((win) => {
    const session = win.localStorage.getItem('session');
    if (!session) {
      win.localStorage.setItem('session', 'xyz123');
    }
  });
});

it('проверка наличия сессии', () => {
  cy.getLocalStorage('session').then((value) => {
    expect(value).to.equal('xyz123');
  });
});

Валидация данных LocalStorage

При тестировании важно не только записывать данные, но и проверять их корректность. Для этого используют Cypress assertions:

cy.window().then((win) => {
  const user = JSON.parse(win.localStorage.getItem('user'));
  expect(user.name).to.equal('John');
  expect(user.roles).to.include('admin');
});

Советы по работе с LocalStorage в Cypress

  • Использовать кастомные команды для повышения читаемости тестов.
  • При тестировании сложных данных хранить объекты в формате JSON.
  • Очищать LocalStorage после тестов, если данные не нужны для следующего теста, чтобы избежать зависимости между тестами.
  • Для долгосрочного хранения данных между тестами рассмотреть использование плагина cypress-localstorage-commands, который упрощает сохранение и восстановление состояния.

LocalStorage является мощным инструментом для имитации состояния приложения на стороне клиента. Корректная работа с ним позволяет создавать надежные тесты, проверяющие авторизацию, пользовательские настройки и другие ключевые элементы веб-приложения.

Оглавление