Управление браузером

Lighthouse — это инструмент для автоматизированного аудита веб-приложений, позволяющий анализировать производительность, доступность, SEO и лучшие практики. В JavaScript интеграция Lighthouse осуществляется через Node.js API, что даёт возможность запускать аудиты программно и управлять браузером напрямую.

Установка и подключение

Для работы с Lighthouse необходимо установить пакет через npm:

npm install lighthouse chrome-launcher --save-dev

chrome-launcher отвечает за управление экземпляром Chrome, который используется для аудита. Подключение в коде выглядит следующим образом:

const lighthouse = require('lighthouse');
const chromeLauncher = require('chrome-launcher');

Это создаёт основу для программного управления браузером и запуска Lighthouse-аудитов.

Запуск Chrome из Node.js

Для полноценного управления браузером необходимо инициировать его запуск:

async function launchChrome() {
    const chrome = await chromeLauncher.launch({
        chromeFlags: ['--headless', '--no-sandbox']
    });
    return chrome;
}

Параметр --headless позволяет запускать браузер без графического интерфейса, что удобно для CI/CD и автоматизированных скриптов. --no-sandbox необходим для запуска в контейнеризированных средах.

После запуска экземпляра Chrome можно получить порт для подключения Lighthouse:

const chrome = await launchChrome();
const options = {
    port: chrome.port,
    output: 'html',
    logLevel: 'info'
};

Запуск аудита

Аудит выполняется функцией lighthouse(url, options):

const url = 'https://example.com';
const runnerResult = await lighthouse(url, options);

runnerResult содержит все результаты аудита, включая отчёты по категориям: Performance, Accessibility, Best Practices, SEO и PWA. Доступ к этим данным можно получить так:

const reportHtml = runnerResult.report;
const categories = runnerResult.lhr.categories;

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

Настройка опций и конфигурации

Lighthouse позволяет гибко управлять аудиторией и браузером:

  • chromeFlags — дополнительные флаги для запуска Chrome (--disable-gpu, --remote-debugging-port).
  • emulatedFormFactor — выбор устройства для эмуляции (desktop, mobile).
  • throttlingMethod — способ имитации медленного соединения (simulate или devtools).

Пример полной конфигурации:

const options = {
    port: chrome.port,
    output: 'json',
    logLevel: 'info',
    emulatedFormFactor: 'mobile',
    throttlingMethod: 'devtools'
};

Также можно использовать пользовательские конфигурации, чтобы включать или отключать отдельные аудиты:

const config = {
    extends: 'lighthouse:default',
    settings: {
        onlyCategories: ['performance', 'seo']
    }
};
const result = await lighthouse(url, options, config);

Управление жизненным циклом браузера

После завершения аудита важно корректно завершать работу браузера:

await chrome.kill();

Это освобождает системные ресурсы и закрывает все открытые процессы Chrome. В случае ошибки рекомендуется использовать блок try/finally:

let chrome;
try {
    chrome = await launchChrome();
    const runnerResult = await lighthouse(url, { port: chrome.port });
    // обработка результатов
} finally {
    if (chrome) await chrome.kill();
}

Автоматизация и интеграция

Node.js API Lighthouse позволяет интегрировать аудит в CI/CD пайплайны. Например, можно запускать проверки производительности на каждой сборке, анализировать отчёты в формате JSON и автоматически выдавать предупреждения при падении метрик ниже порогового значения.

Пример обработки JSON-отчёта:

const fs = require('fs');
fs.writeFileSync('lighthouse-report.json', JSON.stringify(runnerResult.lhr, null, 2));

Это открывает возможности для создания графиков, уведомлений и аналитики на основе данных аудита.

Резюме ключевых возможностей

  • Программное управление Chrome через chrome-launcher.
  • Запуск аудита Lighthouse через Node.js API.
  • Гибкая настройка флагов, эмуляции и конфигураций.
  • Получение и обработка подробных результатов аудита.
  • Интеграция с CI/CD для автоматического мониторинга качества веб-приложений.

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

Оглавление