Регрессионное тестирование

Основы Lighthouse

Lighthouse — это инструмент автоматизированного аудита веб-приложений, разработанный Google, позволяющий оценивать производительность, доступность, прогрессивность веб-приложений и SEO. В контексте регрессионного тестирования Lighthouse используется для обнаружения изменений в метриках производительности и качестве веб-страниц после внесения изменений в код или инфраструктуру.

Ключевые возможности для регрессионного тестирования:

  • Проверка скорости загрузки страниц (First Contentful Paint, Largest Contentful Paint, Time to Interactive).
  • Оценка доступности элементов (ARIA-атрибуты, контрастность текста, семантическая структура).
  • Проверка SEO (корректное использование заголовков, метатегов, атрибутов изображений).
  • Поддержка Progressive Web App (PWA) стандартов.

Установка и настройка

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

npm install -g lighthouse

Также потребуется браузер Chromium или Google Chrome. Lighthouse может запускаться как из командной строки, так и программно через Node.js API, что особенно удобно для интеграции в CI/CD пайплайны.

Пример подключения в Node.js:

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

async function runLighthouse(url, options = {}, config = null) {
    const chrome = await chromeLauncher.launch({chromeFlags: ['--headless']});
    options.port = chrome.port;
    const result = await lighthouse(url, options, config);
    await chrome.kill();
    return result.lhr;
}

Интеграция в регрессионное тестирование

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

Основные шаги:

  1. Создание эталонного отчета Сначала необходимо зафиксировать текущие показатели производительности, доступности и SEO в виде JSON-отчета.

    const fs = require('fs');

runLighthouse('https://example.com').then(lhr => {
    fs.writeFileSync('baseline.json', JSON.stringify(lhr, null, 2));
});

  2. Сравнение метрик При последующих прогонах нужно сравнивать ключевые метрики с эталонными. Для автоматизации можно использовать библиотеку assert или сторонние инструменты для тестирования.

    const baseline = require('./baseline.json');

runLighthouse('https://example.com').then(current => {
    const lcpBaseline = baseline.audits['largest-contentful-paint'].numericValue;
    const lcpCurrent = current.audits['largest-contentful-paint'].numericValue;

    if (lcpCurrent > lcpBaseline * 1.1) {
        console.error('Регрессия производительности: LCP увеличился более чем на 10%');
    }
});

  3. Автоматизация с CI/CD Lighthouse легко интегрируется в Jenkins, GitHub Actions, GitLab CI. Отчеты можно хранить в формате JSON, сравнивать с предыдущими и генерировать уведомления при нарушении допустимых порогов.

    Пример GitHub Actions workflow:

    name: Lighthouse Regression Test

on: [push]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm install -g lighthouse chrome-launcher
      - run: node run-lighthouse.js

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

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

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

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

runLighthouse('https://example.com', {}, config).then(lhr => {
    console.log(lhr.categories.performance.score);
});

Рекомендации по настройке:

  • Использовать throttlingMethod: 'simulate' для имитации медленного соединения без фактического ограничения пропускной способности.
  • Фокусироваться на категориях, критичных для проекта, чтобы ускорить прогоны тестов.
  • Настраивать emulatedFormFactor под целевое устройство — мобильное или десктоп.

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

Результаты Lighthouse представлены в виде структурированного объекта JSON. Основные поля для регрессионного тестирования:

  • lhr.categories.performance.score — общий показатель производительности.
  • lhr.audits['first-contentful-paint'].numericValue — время до первого визуального контента.
  • lhr.audits['largest-contentful-paint'].numericValue — время до наибольшего визуального элемента.
  • lhr.audits['total-blocking-time'].numericValue — суммарное время блокировки основного потока.
  • lhr.audits['accessibility'].score — общая оценка доступности.

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

Практические советы

  • Хранить эталонные отчеты в репозитории или внешнем хранилище для долгосрочной истории метрик.
  • Устанавливать допустимые пороги изменений, чтобы регрессии фиксировались только при значимых ухудшениях.
  • Использовать автоматизированное уведомление команды при превышении порогов.
  • Регулярно пересматривать базовые значения после крупных улучшений или рефакторинга, чтобы не блокировать развитие проекта ложными регрессиями.

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

Оглавление