Lighthouse интеграция

Puppeteer и Lighthouse тесно связаны в контексте автоматизированного тестирования производительности и качества веб-приложений. Puppeteer предоставляет возможность управлять браузером Chrome или Chromium программно, а Lighthouse позволяет анализировать страницы на метрики производительности, SEO, доступности и лучшие практики. Интеграция этих инструментов позволяет запускать аудиты Lighthouse в автоматизированных сценариях, контролируемых через Puppeteer.

Настройка окружения

Для работы необходимы следующие пакеты: 

npm install puppeteer lighthouse chrome-launcher
  • puppeteer — управление браузером.
  • lighthouse — выполнение аудитов.
  • chrome-launcher — управление процессами Chrome для Lighthouse.

Важно использовать совместимые версии Chrome и Puppeteer, чтобы избежать проблем с совместимостью DevTools Protocol.

Запуск Chrome через Puppeteer для Lighthouse

Lighthouse может работать как с внешним экземпляром Chrome, так и с запущенным Puppeteer. Пример интеграции: 

const puppeteer = require(&
const lighthouse = require('lighthouse');
const { URL } = require('url');

(async () => {
  const browser = await puppeteer.launch({ headless: true });
  const wsEndpoint = browser.wsEndpoint();
  
  const url = 'https://example.com';
  const result = await lighthouse(url, {
    port: new URL(wsEndpoint).port,
    output: 'json',
    logLevel: 'info'
  });
  
  console.log('Performance score:', result.lhr.categories.performance.score * 100);
  
  await browser.close();
})();

Ключевые моменты:

  • wsEndpoint() Puppeteer возвращает адрес WebSocket для управления запущенным браузером.
  • Lighthouse использует port для подключения к уже запущенному экземпляру Chrome.
  • Опция output: ‘json’ позволяет получить результаты в структурированном виде для дальнейшей обработки.

Настройка аудитов

Lighthouse поддерживает разные категории аудитов: performance, accessibility, best-practices, SEO, PWA. Для точного контроля используются опции: 

const flags = {
  onlyCategories: ['performance', 'accessibility'],
  emulatedFormFactor: 'desktop',
  throttlingMethod: 'provided'
};
  • onlyCategories ограничивает аудит конкретными метриками.
  • emulatedFormFactor определяет устройство: ‘mobile’ или ‘desktop’.
  • throttlingMethod: ‘provided’ отключает эмуляцию сетевых условий и CPU, полезно при тестах на локальном сервере.

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

Перед запуском Lighthouse часто требуется подготовка состояния страницы: авторизация, навигация, заполнение форм. Puppeteer позволяет полностью управлять этим процессом. 

const page = await browser.newPage();
await page.goto('https://example.com/login');
await page.type('#username', 'testuser');
await page.type('#password', 'password123');
await page.click('#login-button');
await page.waitForNavigation();

После выполнения этих шагов Lighthouse может быть запущен на уже авторизованной странице, что позволяет тестировать реальные сценарии использования.

Извлечение и анализ результатов

Результаты Lighthouse возвращаются в объекте lhr (Lighthouse Result): 

const { lhr } = result;

console.log('Performance:', lhr.categories.performance.score * 100);
console.log('Accessibility:', lhr.categories.accessibility.score * 100);

lhr.audits['first-contentful-paint'].displayValue;
lhr.audits['largest-contentful-paint'].numericValue;

Особенности:

  • Метрики numericValue всегда представлены в миллисекундах.
  • displayValue содержит человекочитаемую форму, например “1.2 s”.
  • Каждая аудитория доступна по уникальному ключу, что позволяет создавать сложные проверки в автоматических тестах.

Автоматизация отчетов

Для удобного хранения результатов используют экспорт в JSON или HTML: 

const fs = require('fs');

fs.writeFileSync('lighthouse-report.json', JSON.stringify(result.lhr, null, 2));
fs.writeFileSync('lighthouse-report.html', result.report);

Преимущества:

  • JSON удобен для анализа и интеграции с CI/CD.
  • HTML предоставляет наглядный визуальный отчет для команды.

Интеграция с CI/CD

Puppeteer + Lighthouse часто используют в пайплайнах:

  1. Запуск локального сервера приложения.
  2. Запуск Puppeteer для авторизации и подготовки страниц.
  3. Запуск Lighthouse через подключенный экземпляр Chrome.
  4. Сохранение результатов и проверка пороговых значений метрик.

Пример проверки производительности: 

if (result.lhr.categories.performance.score < 0.9) {
  throw new Error('Performance score below threshold!');
}

Таким образом, ошибки выявляются автоматически, предотвращая попадание медленных страниц в продакшен.

Тонкая настройка Chrome и Lighthouse

  • Использование флага –no-sandbox упрощает запуск в Docker.
  • Параметры headless: true ускоряют тесты.
  • disableStorageReset: true сохраняет состояние между сессиями.
  • Возможность передачи пользовательских аудитов через extends позволяет создавать корпоративные правила качества.

Практические рекомендации

  • Всегда использовать стабильную версию Puppeteer и Chrome.
  • Для точной производительности отключать эмуляцию сетевых условий, если она не требуется.
  • Разделять сценарии подготовки страницы и запуск аудита для лучшей читаемости кода.
  • Использовать try/catch для корректного закрытия браузера в случае ошибок.

Интеграция Puppeteer с Lighthouse обеспечивает точное и гибкое тестирование веб-приложений, позволяя анализировать реальные пользовательские сценарии и автоматически контролировать качество страниц на всех этапах разработки.

Оглавление