Современные веб-приложения должны работать при отсутствии сети. Будь то нестабильное соединение или полный оффлайн, пользователи должны видеть актуальный контент, благодаря таким технологиям как Service Workers и Cache API. В этом посте мы рассмотрим простое демо-приложение, которое использует кэшированные данные для поддержания работоспособности в автономном режиме, и покажем, как написать автотесты Playwright для проверки этого поведения, включая сценарии успеха и отказа.
Демо-приложение
Для демонстрации автономного поведения мы создали минимальное статическое веб-приложение, состоящее из трех файлов: index.html, data.json и скрипта Service Worker (sw.js).
Когда страница загружается, она получает текст из data.json и отображает его на экране. Если сетевой запрос не проходит, вместо него отображается сообщение об ошибке.
Статусы приложения
Service Worker отвечает за кэширование HTML- и JSON-файлов после первого успешного посещения. Такая настройка позволяет проверить, может ли приложение показывать ранее загруженный контент в автономном режиме.
Когда приложение находится в онлайн-режиме, оно получает сообщение «Привет из сети!» из файла data.json. В автономном режиме и при правильном кэшировании должно появиться то же самое сообщение, загруженное из кэша браузера.
Тест кэширования: вывод данных в оффлайн-режиме
Чтобы проверить, отображает ли приложение кэшированные данные в автономном режиме, мы создаем тест Playwright, который имитирует типичный путь пользователя: посещение сайта в режиме онлайн, кэширование контента, и его последующий просмотр без подключения к сети. Разберем этот тест по шагам.
Сначала убедимся, что контекст браузера в онлайне, и перейдем к приложению:
await context.setOffline(false);
await page.goto("your-page-url");
После загрузки страницы проверяем, правильно ли отображается текст из файла data.json:
await expect(page.locator("#data")).toHaveText("Hello from the network!");
Это подтверждает, что приложение получило и отобразило сетевые данные, как и ожидалось. Далее мы перезагружаем страницу, чтобы дать возможность Service Worker кэшировать содержимое для автономного использования:
await page.reload();
await expect(page.locator("#data")).toHaveText("Hello from the network!");
Мы убеждаемся, что те же самые данные появляются снова, что гарантирует, что перезагрузка ничего не нарушила и, скорее всего, запустила процесс кэширования. Теперь имитируем переход в автономный режим с помощью встроенного API Playwright:
await context.setOffline(true);
Это имитирует реальную ситуацию, когда пользователь теряет доступ к интернету. При отключенном соединении мы перезагружаем страницу. Поскольку сети нет, мы ожидаем, что Service Worker будет обслуживать кэшированные данные:
await page.reload();
Наконец, мы проверяем ассертом, что тот же самый контент остается видимым даже без доступа к Интернету:
await expect(page.locator("#data")).toHaveText("Hello from the network!");
Тест: отсутствие данных в оффлайне
Хотя кэширование позволяет поддерживать работоспособность приложения в автономном режиме, важно верифицировать, что данные не будут доступны, если приложение будет посещено в первый раз в оффлайне. В этом тесте мы имитируем неудачный запрос к data.json и ожидаем, что приложение покажет соответствующее сообщение об ошибке.
Мы начинаем со свежего контекста браузера, чтобы убедиться в отсутствии предыдущего кэша или service worker из предыдущих сессий:
const context = await browser.newContext(); const page = await context.newPage();
Перед загрузкой страницы мы перехватываем запрос к data.json и прерываем его. Это имитирует сбой сети:
await page.route("**/data.json", (route) => route.abort());
Это означает, что приложение не сможет получить JSON-данные, и у него также не будет возможности их кэшировать. Затем мы переходим на ту же страницу приложения. Поскольку мы перехватили JSON-запрос, данные не загрузятся:
await page.goto("your-page-url");
Поскольку получения данных не состоялось, приложение должно отобразить сообщение об ошибке, а не реальный контент из data.json. Мы проверяем ассертом, что:
await expect(page.locator("#data")).toHaveText("Failed to load data");
Заключение
Тестирование поведения веб-приложения в автономных условиях имеет значение для обеспечения устойчивого удобства пользователей. В этом посте мы продемонстрировали, как проверить два ключевых сценария с помощью Playwright:
- Правильность отображения кэшированных данных при повторном обращении к приложению в автономном режиме.
- Чтобы приложение показывало соответствующее сообщение об ошибке, когда данные недоступны и никогда не были кэшированы.
Эти тесты гарантируют, что Service Worker и логика кэширования работают как положено, помогая приложению справляться с проблемами с сетью и оффлайн-режимом.
Полный код и демо-приложение – в репозитории на GitHub.
