Lighthouse интеграция

Для интеграции Cypress с Lighthouse используется библиотека cypress-audit, которая позволяет запускать аудиты производительности, SEO и доступности напрямую из тестов. Установка производится через npm:

npm install --save-dev cypress-audit
npm install --save-dev lighthouse
npm install --save-dev pa11y

После установки необходимо подключить плагин в файл cypress/plugins/index.js:

const { lighthouse, pa11y, prepareAudit } = require('cypress-audit');

module.exports = (on, config) => {
  on('before:browser:launch', (browser = {}, launchOptions) => {
    prepareAudit(launchOptions);
    return launchOptions;
  });

  on('task', {
    lighthouse: lighthouse(),
    pa11y: pa11y(),
  });
};

Подключение плагина позволяет запускать Lighthouse в режиме headless браузера прямо из Cypress-тестов и получать детализированные отчеты в формате HTML и JSON.

Настройка тестов Cypress с Lighthouse

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

describe('Lighthouse Audit', () => {
  it('Проверка производительности и доступности страницы', () => {
    cy.visit('https://example.com');
    cy.lighthouse({
      performance: 80,
      accessibility: 90,
      'best-practices': 85,
      seo: 90,
      pwa: 70
    });
  });
});

Ключевые параметры:

  • performance — минимальный порог оценки производительности.
  • accessibility — оценка доступности.
  • best-practices — соблюдение лучших практик.
  • seo — SEO-оценка.
  • pwa — прогрессивные веб-приложения.

Если результаты аудита ниже указанных порогов, тест автоматически падает. Это позволяет интегрировать метрики Lighthouse в систему CI/CD и следить за качеством страниц на постоянной основе.

Расширенные возможности

1. Генерация отчетов

Lighthouse поддерживает экспорт отчетов в формате HTML, JSON и CSV. В Cypress можно настроить сохранение отчетов через опции плагина:

cy.lighthouse({
  output: 'html',
  outputPath: 'cypress/reports/lighthouse.html'
});

2. Аудит отдельных страниц

Можно создавать отдельные тесты для ключевых страниц приложения:

const pages = ['/home', '/about', '/contact'];

pages.forEach(page => {
  it(`Аудит страницы ${page}`, () => {
    cy.visit(`https://example.com${page}`);
    cy.lighthouse();
  });
});

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

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

Lighthouse позволяет настраивать отдельные аудиты через кастомные конфигурации:

const lighthouseConfig = {
  extends: 'lighthouse:default',
  settings: {
    onlyCategories: ['performance', 'accessibility'],
    emulatedFormFactor: 'mobile',
    throttling: {
      rttMs: 150,
      throughputKbps: 1600,
      cpuSlowdownMultiplier: 4,
    },
  },
};

cy.lighthouse(lighthouseConfig);

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

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

Для автоматической проверки показателей Lighthouse в CI/CD:

  1. Установить Node.js и браузер (например, Chrome) на сервере сборки.
  2. Добавить команду запуска Cypress с тестами Lighthouse:
npx cypress run --browser chrome
  1. Настроить публикацию отчетов и проверку пороговых значений.

Использование Cypress + Lighthouse в CI/CD позволяет контролировать производительность, доступность и SEO на каждом этапе разработки, предотвращая деградацию метрик после релиза.

Отладка и типичные ошибки

Проблема: Lighthouse не запускается в Cypress. Причина: Неправильная конфигурация плагина или версия браузера. Решение: Проверить before:browser:launch и убедиться, что Chrome поддерживает headless режим.

Проблема: Тест падает без явной причины. Причина: Пороговые значения слишком высокие. Решение: Настроить realistic thresholds и проверять метрики отдельно через Lighthouse CLI.

Проблема: Ошибки при генерации отчетов. Причина: Неправильный путь сохранения или права доступа. Решение: Убедиться, что папка для отчетов существует и доступна для записи.

Рекомендации по использованию

  • Разделять тесты на критические страницы и вспомогательные, чтобы фокусироваться на производительности там, где она важнее всего.
  • Использовать разные конфигурации для mobile и desktop, так как метрики могут сильно отличаться.
  • Регулярно обновлять версии Cypress и Lighthouse для поддержки последних возможностей аудита.
  • Сохранять отчеты в CI/CD для аналитики и сравнения исторических данных.

Интеграция Cypress с Lighthouse позволяет не только проверять функциональность приложения, но и системно контролировать его качество, производительность и доступность.

Оглавление