Session storage и local storage

Введение в Session Storage и Local Storage

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

Отличия между Session Storage и Local Storage

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

  • sessionStorage: Хранит данные только на время сессии браузера. Как только вкладка или окно браузера закрывается, данные в sessionStorage удаляются. Это хранилище привязано к конкретной вкладке.

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

Взаимодействие с Storage в Playwright

Playwright предоставляет простой интерфейс для работы с данными, хранящимися в sessionStorage и localStorage. Для работы с ними используется метод context.storageState(), который позволяет сохранять и восстанавливать состояния хранилищ, что является полезным для симуляции различных состояний приложения и повторного использования данных при автоматических тестах.

Доступ к sessionStorage и localStorage

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

  1. Извлечение данных из sessionStorage или localStorage: Для извлечения данных из этих хранилищ необходимо выполнить JavaScript в контексте страницы, используя метод page.evaluate(). Пример кода для получения значения из localStorage:

    const data = await page.evaluate(() => localStorage.getItem('key'));

    Аналогично для sessionStorage:

    const data = await page.evaluate(() => sessionStorage.getItem('key'));

  2. Установка данных в sessionStorage или localStorage: Для записи данных в хранилище нужно также использовать page.evaluate():

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

    Для sessionStorage код будет аналогичен:

    await page.evaluate(() => sessionStorage.setItem('key', 'value'));

Важные моменты при работе с storage в Playwright

  1. Сохранение и восстановление состояния хранилищ: В тестах часто требуется сохранить состояние хранилища после выполнения одного шага, а затем восстановить его в другом тесте или на другом этапе теста. Это можно сделать с помощью функции context.storageState().

    Пример сохранения состояния хранилища:

    await context.storageState({ path: 'storageState.json' });

    Этот файл будет содержать информацию о текущем состоянии localStorage и sessionStorage, которая может быть использована для восстановления состояния позже:

    const context = await browser.newContext({
  storageState: 'storageState.json',
});

  2. Кросс-вкладочные и кросс-сессионные данные: Важно понимать, что sessionStorage работает только в рамках одной вкладки, в то время как localStorage доступно для всех вкладок и окон, использующих тот же домен. Когда требуется использование данных, которые должны быть доступны в разных вкладках, рекомендуется использовать localStorage, так как его данные сохраняются между сессиями.

Применение на практике

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

// Сохранение состояния хранилища после успешной аутентификации
await page.goto('https://example.com/login');
await page.fill('input[name="username"]', 'testuser');
await page.fill('input[name="password"]', 'password123');
await page.click('button[type="submit"]');

// Сохранение состояния хранилища
await context.storageState({ path: 'authState.json' });

// Далее, при новом тесте
const newContext = await browser.newContext({
  storageState: 'authState.json',
});

const newPage = await newContext.newPage();
await newPage.goto('https://example.com/dashboard');

Такой подход позволяет эмулировать вход в приложение и делать дальнейшие тесты с уже аутентифицированным пользователем без необходимости проходить процесс авторизации каждый раз.

Использование Playwright с несколькими вкладками

В случае работы с несколькими вкладками и использования данных из localStorage важно помнить, что данные остаются доступными в других вкладках, пока они не будут удалены или изменены. Например, при работе с двумя вкладками, одна из которых авторизована, а другая — нет:

const [page1, page2] = await Promise.all([
  context.newPage(),
  context.newPage()
]);

// Вкладка 1 (авторизованная)
await page1.goto('https://example.com/login');
await page1.fill('input[name="username"]', 'testuser');
await page1.fill('input[name="password"]', 'password123');
await page1.click('button[type="submit"]');

// Вкладка 2 (не авторизованная)
await page2.goto('https://example.com/dashboard');

// После авторизации в page1, данные из localStorage становятся доступны и в page2

Тестирование с учетом состояния хранилищ

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

Резюме

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

Оглавление