Работа с localStorage и sessionStorage

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

Доступ к localStorage и sessionStorage

В Protractor доступ к объектам localStorage и sessionStorage осуществляется через выполнение JavaScript-кода в контексте браузера с помощью метода browser.executeScript().

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

let value = await browser.executeScript("return window.localStorage.getItem('ключ');");
console.log(value);

Пример записи значения в localStorage:

await browser.executeScript("window.localStorage.setItem('ключ', 'значение');");

Для sessionStorage синтаксис аналогичен:

// Чтение значения
let sessionValue = await browser.executeScript("return window.sessionStorage.getItem('ключ');");

// Запись значения
await browser.executeScript("window.sessionStorage.setItem('ключ', 'значение');");

Очистка данных

Очистка хранилищ полезна для сброса состояния между тестами.

// Очистка localStorage
await browser.executeScript("window.localStorage.clear();");

// Очистка sessionStorage
await browser.executeScript("window.sessionStorage.clear();");

Можно также удалять конкретный ключ:

await browser.executeScript("window.localStorage.removeItem('ключ');");

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

Для ассерций рекомендуется использовать стандартные инструменты, такие как Jasmine:

it('должен сохранять правильное значение в localStorage', async () => {
    await browser.executeScript("window.localStorage.setItem('user', 'testUser');");
    const storedUser = await browser.executeScript("return window.localStorage.getItem('user');");
    expect(storedUser).toEqual('testUser');
});

Для sessionStorage проверка аналогична.

Использование localStorage/sessionStorage для подготовки тестовых данных

Иногда необходимо имитировать состояние приложения без прохождения всех шагов UI. Для этого можно напрямую записывать данные в хранилище перед загрузкой страницы:

await browser.get('https://example.com');
await browser.executeScript("window.localStorage.setItem('token', 'abc123');");
await browser.refresh();

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

Совместное использование с ожиданиями

После изменения хранилища может потребоваться дождаться обновления интерфейса. Для этого используются ExpectedConditions:

const EC = protractor.ExpectedConditions;
await browser.executeScript("window.localStorage.setItem('theme', 'dark');");
const elementToCheck = element(by.id('theme-indicator'));
await browser.wait(EC.textToBePresentInElement(elementToCheck, 'dark'), 5000);

Практические советы

  • Очистка перед тестом: всегда очищать localStorage/sessionStorage перед запуском теста, чтобы избежать влияния предыдущих сценариев.
  • Использование ключей с уникальными именами: уменьшает вероятность конфликтов с реальными данными приложения.
  • Изоляция тестов: при тестировании нескольких сценариев рекомендуется создавать отдельные сессии браузера или использовать browser.restart() для полной изоляции.
  • Асинхронность: все операции через executeScript возвращают промис, необходимо использовать await или then для корректного управления потоками.

Работа с объектами и сложными структурами

localStorage и sessionStorage хранят данные в виде строк. Для работы с объектами необходимо использовать JSON:

// Сохранение объекта
const user = { id: 1, name: 'Test' };
await browser.executeScript(`window.localStorage.setItem('user', '${JSON.stringify(user)}');`);

// Получение объекта
const storedUser = await browser.executeScript("return JSON.parse(window.localStorage.getItem('user'));");
console.log(storedUser.name); // Test

Отладка и инспекция

Для отладки можно использовать стандартные инструменты браузера: консоль DevTools. Protractor позволяет выводить содержимое localStorage/sessionStorage в консоль:

const allLocalStorage = await browser.executeScript("return window.localStorage;");
console.log(allLocalStorage);

Это помогает убедиться, что тест корректно записывает и читает данные.

Использование localStorage и sessionStorage в Protractor делает тестирование более гибким и ускоряет сценарии, которые зависят от состояния приложения. Правильное управление этими хранилищами обеспечивает стабильность и предсказуемость автоматических тестов.

Оглавление