Кэширование результатов

Библиотека Axe-core предназначена для автоматизированного тестирования доступности веб-приложений. Одной из важных оптимизаций при работе с этой библиотекой является кэширование результатов сканирования. При повторных проверках одних и тех же DOM-элементов или страниц это позволяет существенно сокращать время выполнения тестов и снижать нагрузку на браузер.

Кэширование в Axe-core строится на двух уровнях:

  1. Кэширование правил и конфигураций — хранение информации о загруженных правилах проверки и их настройках, что позволяет повторно использовать их при последовательных сканированиях без повторной инициализации.
  2. Кэширование результатов сканирования DOM — сохранение результатов анализа конкретных элементов, чтобы при повторном тестировании изменяющихся частей страницы не пересчитывать уже проверенные участки.

Механизм работы

Axe-core при сканировании DOM создает внутреннюю структуру данных, включающую:

  • идентификаторы элементов (обычно по nodeId),
  • соответствие правил проверки для каждого элемента,
  • результаты выполнения каждой проверки (pass, fail, incomplete, inapplicable).

При повторной проверке библиотека может использовать кэшированные данные, если:

  • элемент не изменился (по DOM-структуре и атрибутам),
  • конфигурация правил осталась той же,
  • версия библиотеки и контекста сканирования не изменилась.

Для этого Axe-core использует внутренние карты (Map) и хэши элементов, что позволяет сравнивать текущий DOM с сохраненным состоянием без полного анализа.

API для кэширования

Для управления кэшированием доступны следующие подходы:

Инициализация и очистка кэша

const axe = require('axe-core');

// Очистка кэша перед новым сканированием
axe.reset();

Метод reset() полностью сбрасывает все внутренние кэши: результаты предыдущих проверок, загруженные правила и конфигурации. Это важно при тестировании динамических страниц, где DOM может изменяться между последовательными запусками.

Использование кэша для частичных сканирований

axe.run(document.querySelector('#main-content'), {
    runOnly: ['wcag2a', 'wcag2aa'],
}, function(err, results) {
    if (err) throw err;
    console.log(results.violations);
});

Если #main-content уже был проверен ранее и не изменялся, Axe-core извлечет результаты из кэша, что ускоряет процесс анализа.

Оптимизация кэширования

  1. Выборка элементов для сканирования Для ускорения проверки рекомендуется сканировать только изменившиеся или новые блоки DOM. Это достигается использованием селекторов CSS и сохранением состояния ранее проверенных узлов.

  2. Минимизация повторной загрузки правил Axe-core позволяет загружать правила один раз и использовать их многократно:

axe.configure({
    rules: [
        { id: 'color-contrast', enabled: true },
        { id: 'image-alt', enabled: true }
    ]
});

После такой конфигурации повторные вызовы axe.run() будут использовать уже загруженные правила из кэша, что сокращает время инициализации.

  1. Использование context для избирательного кэширования Передача контекста в axe.run(context, options) позволяет кэшировать результаты только для указанного DOM-фрагмента. Это предотвращает лишнюю обработку остальных частей страницы.

Форматы хранения кэшированных данных

В Axe-core кэш может хранить:

  • JSON-объекты с результатами: сохраняются идентификаторы элементов, типы нарушений и соответствующие правила.
  • Хэши элементов: для проверки неизменности DOM между запусками.
  • Структуру дерева DOM: для быстрого определения изменений в узлах.

При интеграции Axe-core с CI/CD такие кэши могут быть сериализованы в файлы и повторно загружены на последующих этапах тестирования.

Применение в сложных проектах

  • Многостраничные приложения (SPA): кэширование позволяет проверять только динамически подгружаемые компоненты без полного пересканирования всего DOM.
  • Регрессионное тестирование: хранение кэша помогает сравнивать результаты текущего сканирования с предыдущими, выявляя новые нарушения доступности.
  • Параллельные проверки: кэширование правил и результатов предотвращает повторное создание одинаковых структур данных в разных потоках тестирования.

Практические рекомендации

  • Всегда сбрасывать кэш при переходе на новую версию страницы или при изменении конфигурации правил.
  • Использовать селекторы CSS или контексты для ограничения области сканирования.
  • Сохранять результаты кэша для последующего анализа и сравнения.
  • Мониторить использование памяти при масштабных проверках, так как длительное хранение больших кэшей может привести к увеличению потребления ресурсов.

Эффективное кэширование в Axe-core значительно ускоряет тестирование доступности, делает процесс масштабируемым и обеспечивает стабильность результатов при повторных проверках.

Оглавление