Работа с localStorage

Puppeteer — это библиотека Node.js, предоставляющая API для управления браузером Chrome или Chromium через протокол DevTools. Одним из частых сценариев использования Puppeteer является тестирование веб-приложений, работающих с локальным хранилищем, таким как localStorage. Эта технология позволяет веб-страницам сохранять данные в браузере пользователя, что важно для тестирования функционала, который зависит от состояния, сохраненного в этом хранилище.

Основные операции с localStorage

localStorage представляет собой хранилище данных на стороне клиента, доступное через JavaScript, и позволяет сохранять данные в формате пар «ключ-значение». Он сохраняет данные между сессиями, что делает его идеальным для использования в сценариях, когда необходимо сохранять состояние между перезагрузками страниц. Puppeteer предоставляет возможность взаимодействовать с этим хранилищем с помощью JavaScript в контексте браузера.

Чтение данных из localStorage

Для чтения данных из localStorage в Puppeteer используется метод evaluate(), который позволяет выполнить JavaScript код внутри контекста страницы. Для получения значения из localStorage достаточно передать соответствующую команду: 

const value = await page.evaluate(() => {
  return localStorage.getItem(&
});

Здесь ‘key’ — это ключ, по которому хранится необходимое значение в localStorage. Этот код выполняется в контексте страницы, и возвращаемое значение передается обратно в Node.js.

Запись данных в localStorage

Запись данных в localStorage происходит аналогично тому, как это делается в обычном JavaScript. Для этого нужно вызвать метод setItem(): 

await page.evaluate(() => {
  localStorage.setItem('key', 'value');
});

В этом примере сохраняется пара «ключ-значение», где ‘key’ — это имя ключа, а ‘value’ — его значение.

Удаление данных из localStorage

Чтобы удалить данные из localStorage, используется метод removeItem(): 

await page.evaluate(() => {
  localStorage.removeItem('key');
});

Этот код удаляет элемент с ключом ‘key’ из локального хранилища.

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

Если необходимо очистить все данные в localStorage, можно использовать метод clear(): 

await page.evaluate(() => {
  localStorage.clear();
});

Этот метод удаляет все ключи и значения из хранилища.

Тестирование с localStorage

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

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

Часто встречающимся сценарием является тестирование состояния входа пользователя. Допустим, приложение сохраняет информацию о пользователе в localStorage, чтобы автоматически аутентифицировать его при следующем посещении. Для тестирования этого можно использовать следующий подход:

  1. Применить данные в localStorage, которые имитируют успешный вход пользователя.
  2. Перезагрузить страницу.
  3. Проверить, что пользователь остается авторизованным, основываясь на значении в localStorage.

Пример кода: 

// Запись данных в localStorage
await page.evaluate(() => {
  localStorage.setItem('auth', JSON.stringify({ token: 'valid_token' }));
});

// Перезагрузка страницы
await page.reload();

// Проверка состояния
const auth = await page.evaluate(() => {
  return JSON.parse(localStorage.getItem('auth'));
});

if (auth && auth.token === 'valid_token') {
  console.log('Пользователь авторизован');
}

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

Использование localStorage при автоматизации тестирования

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

Пример: установка начальных данных перед тестом

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

await page.evaluate(() => {
  localStorage.setItem('user', JSON.stringify({ id: 123, name: 'Test User' }));
});

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

Сложности и нюансы работы с localStorage в Puppeteer

Несмотря на простоту работы с localStorage, при автоматизации тестирования могут возникать некоторые сложности:

  1. Кросс-доменные ограничения: localStorage доступен только для того домена, с которого был загружен контент. Если ваше приложение работает с несколькими доменами, то для каждого домена придется работать с отдельным хранилищем.

  2. Безопасность: Важно понимать, что данные, хранящиеся в localStorage, не шифруются и могут быть легко доступны любому JavaScript коду, выполняющемуся на той же странице. Поэтому не стоит хранить чувствительные данные в этом хранилище.

  3. Ограничения по объему: В отличие от cookie-файлов, которые имеют ограничение в 4 KB, localStorage может хранить данные объемом до 5 MB в современных браузерах. Однако это может привести к проблемам, если приложение активно использует localStorage для хранения больших данных.

  4. Совместимость с различными браузерами: Хотя большинство современных браузеров поддерживают localStorage, важно тестировать приложение в разных браузерах, чтобы убедиться, что поведение хранилища одинаково.

Технические ограничения и особенности

При использовании localStorage в тестах с Puppeteer стоит учитывать следующие особенности:

  • Синхронность: Операции с localStorage выполняются синхронно, что может приводить к блокировке выполнения других задач, если в тестах есть длительные операции записи/чтения. Это важно учитывать при написании сложных тестов.

  • Кэширование данных: В некоторых случаях данные, записанные в localStorage, могут не быть сразу доступны на следующей странице. Для их правильного чтения и использования стоит учитывать необходимость перезагрузки страницы.

Заключение

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

Оглавление