Playwright интеграция

Для интеграции Lighthouse с Playwright потребуется установить обе библиотеки через npm. Основные пакеты:

npm install playwright lighthouse chrome-launcher

Playwright используется для управления браузерами и автоматизации сценариев взаимодействия с веб-страницами, а Lighthouse отвечает за анализ производительности, доступности, SEO и других метрик сайта. chrome-launcher необходим для запуска Chrome в headless-режиме.

Конфигурация браузера

Для корректной работы Lighthouse через Playwright необходимо обеспечить запуск Chrome с необходимыми флагами. Playwright позволяет управлять браузером программно:

const { chromium } = require('playwright');
const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

(async () => {
  const browser = await chromium.launch({ headless: true });
  const context = await browser.newContext();
  const page = await context.newPage();
  await page.goto('https://example.com');

  const wsEndpoint = browser.wsEndpoint();
  const chrome = await chromeLauncher.launch({
    chromeFlags: ['--headless', '--disable-gpu', '--no-sandbox'],
  });

  const result = await lighthouse('https://example.com', {
    port: chrome.port,
    output: 'html',
    logLevel: 'info',
  });

  console.log('Lighthouse score:', result.lhr.score);
  await browser.close();
  await chrome.kill();
})();

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

Настройка аудитории и категорий

Lighthouse позволяет выбирать категории для аудита: performance, accessibility, best-practices, seo, pwa. Конфигурация категорий задаётся через объект config:

const config = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'accessibility']
  }
};

const result = await lighthouse('https://example.com', {
  port: chrome.port,
  output: 'json',
  logLevel: 'info',
}, config);

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

Сценарии с авторизацией и динамическим контентом

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

await page.goto('https://example.com/login');
await page.fill('#username', 'user');
await page.fill('#password', 'password');
await page.click('button[type="submit"]');
await page.waitForNavigation();

const result = await lighthouse(page.url(), {
  port: chrome.port,
  output: 'json'
});

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

Сбор и обработка результатов

Результаты Lighthouse включают детальную информацию по каждому аудиту, метрики Core Web Vitals, список ошибок и рекомендации по оптимизации:

const reportHtml = result.report;
const lhr = result.lhr;

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

// Сохранение отчета в файл
const fs = require('fs');
fs.writeFileSync('report.html', reportHtml);

Lighthouse формирует отчёт в форматах html, json и csv, что позволяет интегрировать его в CI/CD пайплайны и системы мониторинга.

Параллельное тестирование

Для ускорения аудитов можно запускать несколько экземпляров браузера Playwright параллельно:

const urls = ['https://site1.com', 'https://site2.com'];
await Promise.all(urls.map(async (url) => {
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage();
  await page.goto(url);
  const chrome = await chromeLauncher.launch({ chromeFlags: ['--headless'] });
  const result = await lighthouse(url, { port: chrome.port, output: 'json' });
  console.log(`${url} performance score:`, result.lhr.categories.performance.score);
  await browser.close();
  await chrome.kill();
}));

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

Настройка пользовательских аудитов и плагинов

Lighthouse поддерживает создание кастомных аудитов и использование плагинов. Конфигурация через объект extends позволяет подключать собственные проверки, которые могут взаимодействовать с Playwright для имитации пользовательских сценариев и тестирования специфических функций сайта.

const customConfig = {
  extends: 'lighthouse:default',
  audits: ['my-custom-audit'],
  categories: {
    customCategory: {
      title: 'Custom Audits',
      auditRefs: [{ id: 'my-custom-audit', weight: 1 }]
    }
  }
};

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

Оглавление