Структура кастомного аудита

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

Структура класса аудита

Класс кастомного аудита должен включать следующие элементы:

Метаданные (meta) Статический объект meta определяет уникальные характеристики аудита:
```
static get meta() {
  return {
    id: 'custom-audit-example',
    title: 'Проверка наличия alt для изображений',
    description: 'Аудит проверяет, что у всех изображений присутствует атрибут alt',
    scoreDisplayMode: Audit.SCORING_MODES.BINARY,
    requiredArtifacts: ['Images'],
  };
}
```
- id — уникальный идентификатор аудита, используемый в отчетах.
- title — краткое название проверки.
- description — развернутое описание, объясняющее, что именно проверяется.
- scoreDisplayMode — способ отображения оценки (NUMERIC, BINARY, INFORMATIVE и другие).
- requiredArtifacts — перечень артефактов, которые аудит использует для анализа.
Метод audit Основной метод класса, выполняющий анализ и возвращающий результат в виде объекта:
```
static async audit(artifacts, context) {
  const images = artifacts.Images || [];
  const failingImages = images.filter(img => !img.alt);

  const score = failingImages.length === 0 ? 1 : 0;

  return {
    score,
    numericValue: failingImages.length,
    details: {
      type: 'table',
      head: [{ text: 'URL изображения', key: 'url' }],
      items: failingImages.map(img => ({ url: img.src })),
    },
  };
}
```
- artifacts — набор данных, предоставленных Lighthouse (например, HTML-документ, список ресурсов, скриптов и т. д.).
- context — объект, содержащий информацию о текущей конфигурации аудита и возможности логирования.
- score — итоговая оценка аудита (от 0 до 1 для бинарного или числового режима).
- details — расширенные сведения для отображения в отчете: таблицы, списки, графики.

Работа с артефактами

Артефакты — это исходные данные, которые Lighthouse собирает с веб-страницы. Для кастомных аудитов можно:

Использовать встроенные артефакты (URL, DOM, CSSUsage, Images, Scripts).
Создавать собственные артефакты с помощью collectors в конфигурации. Например, можно написать собственный артефакт для сбора всех ссылок с определенной структурой:

const linkCollector = {
  id: 'CustomLinks',
  gather: async (driver, page) => {
    const links = await page.evaluate(() => Array.from(document.querySelectorAll('a')).map(a => a.href));
    return links;
  },
};

Форматы деталей

Lighthouse поддерживает несколько типов представления результатов аудита:

Table — для списков элементов, нарушающих правило.
Filmstrip — последовательность скриншотов для анализа визуальной части страницы.
List — простой список элементов без структурированной таблицы.

Каждый тип деталей требует определенного формата:

details: {
  type: 'table',
  head: [{ text: 'Название', key: 'name' }, { text: 'URL', key: 'url' }],
  items: [
    { name: 'Изображение 1', url: 'https://example.com/img1.png' },
    { name: 'Изображение 2', url: 'https://example.com/img2.png' },
  ],
}

Управление оценкой аудита

Оценка (score) может быть:

Бинарной (0 или 1) — для критических проверок, где важно, чтобы правило полностью выполнялось.
Числовой (0–100 или 0–1) — для измеримых показателей, таких как скорость загрузки или количество ошибок.
Информативной — когда цель аудита состоит в предоставлении данных без выставления оценки.

Пример комплексного кастомного аудита

class CheckImagesAudit extends Audit {
  static get meta() {
    return {
      id: 'check-images',
      title: 'Проверка всех изображений на наличие alt',
      description: 'Проверяет, что все изображения на странице содержат атрибут alt',
      scoreDisplayMode: Audit.SCORING_MODES.BINARY,
      requiredArtifacts: ['Images'],
    };
  }

  static async audit(artifacts) {
    const images = artifacts.Images || [];
    const missingAlt = images.filter(img => !img.alt);
    
    return {
      score: missingAlt.length === 0 ? 1 : 0,
      numericValue: missingAlt.length,
      details: {
        type: 'table',
        head: [{ text: 'URL', key: 'url' }],
        items: missingAlt.map(img => ({ url: img.src })),
      },
    };
  }
}

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