Тестирование в реальном браузере с Puppeteer

Для тестирования Workbox в реальных условиях используется Puppeteer — библиотека для управления браузером Chromium/Chrome через Node.js. Основная задача — запустить браузер в контролируемом окружении, зарегистрировать сервис-воркер и проверить его поведение при различных сценариях кэширования и сетевых запросов.

Первым шагом является установка Puppeteer и необходимых зависимостей:

npm install puppeteer

Далее создаётся скрипт, который инициирует запуск браузера и открывает тестовую страницу:

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto('http://localhost:8080');
})();

Важно использовать headless: false на этапе тестирования, чтобы наблюдать поведение сервис-воркера в реальном браузере.

Регистрация сервис-воркера в тестовом окружении

Для работы с Workbox сервис-воркер должен быть корректно зарегистрирован. Puppeteer позволяет проверять успешность регистрации через методы страницы:

await page.evaluate(() => {
    return navigator.serviceWorker.register('/sw.js')
        .then(reg => reg.active ? 'Service Worker активен' : 'Регистрация прошла, но активен не сразу');
});

Можно дополнительно отслеживать события активации и установки сервис-воркера через Puppeteer:

await page.evaluate(() => {
    navigator.serviceWorker.ready.then(registration => {
        console.log('Service Worker готов к обработке запросов');
    });
});

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

Тестирование стратегий кэширования Workbox

Workbox предоставляет несколько стратегий кэширования: cacheFirst, networkFirst, staleWhileRevalidate и другие. Каждая стратегия должна быть проверена на соответствующих ресурсах, чтобы убедиться, что кэширование работает корректно.

Пример теста с Puppeteer для проверки кэширования ресурсов:

const resourceUrl = 'http://localhost:8080/style.css';

await page.goto('http://localhost:8080');

// Первый запрос — должен инициировать загрузку с сервера
let response1 = await page.evaluate(url =>
    fetch(url).then(res => res.status), resourceUrl);
console.log('Первый запрос, статус:', response1);

// Второй запрос — должен использовать кэш
let response2 = await page.evaluate(url =>
    fetch(url).then(res => res.status), resourceUrl);
console.log('Второй запрос, статус:', response2);

Если стратегия cacheFirst применена корректно, второй запрос не должен инициировать сетевой трафик.

Имитация сетевых ошибок и оффлайн-режима

Для проверки устойчивости приложения Workbox важно тестировать оффлайн и ошибки сети. Puppeteer предоставляет методы для эмуляции оффлайн-режима:

await page.setOfflineMode(true);

// Попытка загрузки ресурса
let offlineResponse = await page.evaluate(url =>
    fetch(url).then(res => res.status).catch(err => 'Ошибка сети'), resourceUrl);
console.log('Оффлайн-запрос:', offlineResponse);

await page.setOfflineMode(false);

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

Проверка обновлений сервис-воркера

Workbox поддерживает механизм skipWaiting и clientsClaim, что важно для тестирования обновлений ресурсов. Puppeteer позволяет эмулировать обновление сервис-воркера:

// Перезагрузка страницы для имитации новой версии сервиса
await page.reload({ waitUntil: ['networkidle0'] });

// Проверка состояния сервис-воркера
const swState = await page.evaluate(() => {
    return navigator.serviceWorker.controller ? 'Активен новый SW' : 'Используется старый SW';
});
console.log(swState);

Это помогает проверить, что Workbox корректно применяет новые версии кэшированных ресурсов и обновляет клиентов.

Отслеживание кэшированных ресурсов

Для детального тестирования можно проверять содержимое кэшей Workbox через caches API. Puppeteer позволяет выполнять скрипты в контексте страницы для получения списка кэшированных URL:

const cachedUrls = await page.evaluate(async () => {
    const cacheNames = await caches.keys();
    const urls = [];
    for (const name of cacheNames) {
        const cache = await caches.open(name);
        const requests = await cache.keys();
        requests.forEach(req => urls.push(req.url));
    }
    return urls;
});
console.log('Кэшированные ресурсы:', cachedUrls);

Это помогает убедиться, что все необходимые ресурсы находятся в кэше и стратегии Workbox работают корректно.

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

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

  • Проверка кэширования динамических запросов с NetworkFirst.
  • Проверка fallback-контента при cacheOnly и оффлайн.
  • Проверка последовательности активации сервис-воркера и его обновления.
  • Сбор информации о кэшированных ресурсах для анализа.

Такая автоматизация позволяет интегрировать тестирование Workbox в CI/CD-процессы, обеспечивая стабильную работу PWA и других приложений с сервис-воркерами.

Оглавление