Работа с sessionStorage в Puppeteer
Puppeteer предоставляет мощные инструменты для взаимодействия с браузером в контексте тестирования. Одна из часто используемых функций заключается в манипуляциях с данными браузера, такими как sessionStorage. Эта часть веб-хранилища позволяет сохранять данные только на время текущей сессии и удаляется при закрытии браузера или вкладки. В контексте тестирования веб-приложений с использованием Puppeteer важно уметь эффективно работать с sessionStorage, чтобы тесты были как можно более точными и воспроизводимыми.
sessionStorage — это объект, доступный в браузере, который позволяет хранить данные в виде пар «ключ-значение». Эти данные живут только в пределах текущей сессии браузера и стираются при её завершении. Отличие от localStorage заключается в том, что данные, записанные в sessionStorage, доступны только на текущей вкладке, в то время как данные из localStorage сохраняются между сессиями.
Чтобы извлечь данные из sessionStorage в тестах с использованием
Puppeteer, необходимо выполнить JavaScript-код в контексте страницы. Это
можно сделать с помощью метода page.evaluate(), который
позволяет запускать произвольный код в браузере. В данном случае можно
использовать стандартный метод sessionStorage.getItem() для
получения нужного значения.
Пример:
const sessionValue = await page.evaluate(() => {
return sessionStorage.getItem(&
});
console.log(sessionValue);
Этот код выполняет запрос к sessionStorage на странице и возвращает
значение, связанное с ключом ‘myKey’.
Запись данных в sessionStorage также осуществляется через
page.evaluate(), где необходимо вызвать метод
sessionStorage.setItem(). Это позволяет сохранять значения,
которые могут быть использованы в дальнейших шагах теста.
Пример записи данных в sessionStorage:
await page.evaluate(() => {
sessionStorage.setItem('myKey', 'myValue');
});
После выполнения этого кода в браузере будет сохранено значение
‘myValue’ для ключа ‘myKey’ в sessionStorage.
Эти данные будут доступны только до завершения текущей сессии.
Для удаления данных из sessionStorage можно использовать метод
sessionStorage.removeItem(). Это полезно в тестах, где
требуется очистить состояние хранилища между шагами.
Пример удаления значения из sessionStorage:
await page.evaluate(() => {
sessionStorage.removeItem('myKey');
});
Также можно очистить все данные в sessionStorage с помощью метода
sessionStorage.clear():
await page.evaluate(() => {
sessionStorage.clear();
});Этот метод удаляет все ключи и значения, хранящиеся в sessionStorage, что может быть полезно для сброса состояния между тестами.
Если необходимо проверить, есть ли данные в sessionStorage, можно
воспользоваться методом sessionStorage.getItem(), который
вернёт null, если указанный ключ не существует.
Пример проверки наличия данных:
const exists = await page.evaluate(() => {
return sessionStorage.getItem('myKey') !== null;
});
console.log(exists); // true или falseРабота с sessionStorage в тестах позволяет моделировать различные сценарии, такие как авторизация пользователя, сохранение данных сессии и т. д. Это особенно полезно для тестирования функциональности, зависимой от состояния хранилища, например, если на странице есть динамическое содержимое, которое меняется в зависимости от сохранённых данных.
Если веб-приложение использует sessionStorage для хранения информации о пользователе, можно протестировать процесс авторизации. Например, перед переходом на защищённую страницу можно задать необходимые значения в sessionStorage, чтобы имитировать состояние авторизованного пользователя.
await page.evaluate(() => {
sessionStorage.setItem('authToken', 'valid_token');
});
await page.goto('https://example.com/dashboard');
const isAuthenticated = await page.evaluate(() => {
return document.querySelector('.dashboard') !== null;
});
console.log(isAuthenticated); // true, если страница доступнаМожно тестировать сценарии, при которых данные сохраняются между различными страницами, но остаются в рамках одной сессии.
await page.evaluate(() => {
sessionStorage.setItem('sessionData', 'testData');
});
await page.goto('https://example.com/next-page');
const sessionData = await page.evaluate(() => {
return sessionStorage.getItem('sessionData');
});
console.log(sessionData); // 'testData'Манипулирование sessionStorage в тестах позволяет создавать и удалять данные на лету, что даёт контроль над состоянием приложения. Это особенно полезно при тестировании функциональности, связанной с пользовательскими настройками, корзинами покупок, или сессиями пользователей.
Приложения для онлайн-торговли могут использовать sessionStorage для хранения состояния корзины. С помощью Puppeteer можно автоматизировать добавление товаров в корзину и проверку их наличия.
await page.evaluate(() => {
const cart = [
{ id: 1, name: 'Product A', quantity: 2 },
{ id: 2, name: 'Product B', quantity: 1 }
];
sessionStorage.setItem('cart', JSON.stringify(cart));
});
await page.goto('https://example.com/cart');
const cartItems = await page.evaluate(() => {
return JSON.parse(sessionStorage.getItem('cart'));
});
console.log(cartItems); // Проверка содержимого корзиныSessionStorage активно используется для хранения данных, полученных через API-запросы, и может быть важным элементом при тестировании таких запросов. Например, можно сначала выполнить запрос с помощью Puppeteer, сохранить ответ в sessionStorage и использовать его в последующих шагах теста.
await page.evaluate(() => {
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => sessionStorage.setItem('apiData', JSON.stringify(data)));
});
await page.goto('https://example.com/data-page');
const apiData = await page.evaluate(() => {
return JSON.parse(sessionStorage.getItem('apiData'));
});
console.log(apiData); // Проверка данных из APIЭти техники помогут повысить точность и надёжность тестов, взаимодействующих с веб-приложениями, использующими sessionStorage для хранения данных сессий.