Тестирование offline режима

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

Эмуляция offline состояния в Playwright

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

Для того чтобы эмулировать отключение сети, используется метод context.setOfflineMode(true). Этот метод позволяет переключить состояние контекста браузера на offline, что фактически имитирует потерю соединения.

Пример:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();
  
  // Включаем offline режим
  await context.setOfflineMode(true);
  const page = await context.newPage();

  // Переход на страницу
  await page.goto('https://example.com');
  
  // Выполнение тестов
  // Проверяем, что приложение работает корректно в оффлайн-режиме
  const errorMessage = await page.innerText('body');
  console.log(errorMessage); // Ожидаем увидеть сообщение об ошибке или индикатор работы в оффлайн

  // Закрытие браузера
  await browser.close();
})();

Этот код создает новый контекст браузера, переводит его в offline режим, а затем выполняет переход на веб-страницу. После этого можно проверять, как приложение ведет себя в условиях отсутствия сети.

Проверка кэширования и работы оффлайн-ресурсов

При тестировании offline режима особое внимание следует уделить проверке кэширования и механизма работы с локальными ресурсами. Для приложений, которые используют Service Workers или другие методы кэширования, важно убедиться, что нужные ресурсы кэшируются правильно и могут быть загружены, даже если интернет-соединение отсутствует.

Для выполнения этих проверок в Playwright необходимо симулировать загрузку страницы в offline режиме и убедиться, что кэшированные ресурсы доступны. Проверка может включать в себя:

  • Убедиться, что необходимые данные были сохранены в кэше браузера.
  • Проверить корректность отображения страницы без сети, если ресурсы были кэшированы заранее.
  • Проверить корректную работу с данными, полученными из кэша.

Пример проверки кэширования:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  // Включаем offline режим
  await context.setOfflineMode(true);
  const page = await context.newPage();

  // Переход на страницу
  await page.goto('https://example.com');

  // Проверка, что элементы, которые должны быть закэшированы, доступны
  const cachedData = await page.evaluate(() => {
    return localStorage.getItem('user-data');  // Пример использования localStorage
  });

  if (cachedData) {
    console.log('Данные успешно загружены из кэша');
  } else {
    console.log('Ошибка: данные не найдены в кэше');
  }

  // Закрытие браузера
  await browser.close();
})();

Этот код проверяет, что данные, кэшированные с использованием localStorage, доступны даже при отключении сети.

Валидация UI-изменений в offline режиме

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

Playwright позволяет проверять наличие элементов на странице, которые могут указывать на состояние приложения в offline режиме (например, уведомления, индикаторы ошибки или другие UI-компоненты).

Пример:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  // Включаем offline режим
  await context.setOfflineMode(true);
  const page = await context.newPage();

  // Переход на страницу
  await page.goto('https://example.com');

  // Проверка наличия уведомления о потере соединения
  const offlineNotification = await page.$('text=You are offline');
  if (offlineNotification) {
    console.log('UI отображает уведомление о потере соединения');
  } else {
    console.log('UI не отображает уведомление о потере соединения');
  }

  // Закрытие браузера
  await browser.close();
})();

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

Тестирование восстановления сети

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

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

Пример:

const { chromium } = require('playwright');

(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext();

  // Включаем offline режим
  await context.setOfflineMode(true);
  const page = await context.newPage();

  // Переход на страницу в offline режиме
  await page.goto('https://example.com');
  
  // Проверяем поведение в offline
  await page.waitForSelector('text=You are offline');

  // Включаем режим онлайн
  await context.setOfflineMode(false);

  // Проверка восстановления соединения
  await page.reload(); // Перезагружаем страницу
  await page.waitForSelector('text=You are online');
  console.log('Состояние сети восстановлено, приложение обновилось.');

  // Закрытие браузера
  await browser.close();
})();

Этот код проверяет, как приложение восстанавливает работу после возвращения сети.

Заключение

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

Оглавление