Параметр xpath

Библиотека Axe-core — мощный инструмент для автоматизированного тестирования доступности веб-приложений. Одним из ключевых способов точечного анализа элементов на странице является использование параметра xpath. Этот параметр позволяет ограничить область сканирования определённым элементом или группой элементов, заданных через XPath-выражение.

Основы XPath

XPath (XML Path Language) — язык для адресации и выборки узлов в документах XML и HTML. В контексте Axe-core он используется для точного указания элементов DOM, которые должны быть проанализированы на доступность.

Примеры базовых выражений:

  • /html/body/div — выбирает <div> непосредственно внутри <body>.
  • //button[@type='submit'] — выбирает все кнопки с атрибутом type="submit".
  • //*[@id='main-content']//a — выбирает все ссылки внутри элемента с id="main-content".

Использование XPath позволяет сканировать узлы без необходимости изменения HTML-кода или добавления дополнительных селекторов.

Интеграция параметра xpath в Axe-core

В Axe-core ограничение области проверки через XPath реализуется при помощи опции context. Это объект с ключом include, который может содержать CSS-селекторы или XPath-выражения. Пример конфигурации:

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

const context = {
  include: ['xpath://*[@id="main-content"]//button']
};

axe.run(context, function(err, results) {
  if (err) throw err;
  console.log(results.violations);
});

Пояснения к коду:

  • Ключевое слово xpath: перед строкой указывает Axe-core, что последующий путь задаётся в формате XPath.
  • include может содержать массив выражений, позволяющий одновременно сканировать несколько элементов или групп элементов.
  • Результатом axe.run является объект с массивом нарушений (violations) и других сведений о доступности.

Ограничения и особенности

  1. Поддержка XPath в разных средах: XPath поддерживается во всех браузерах, но некоторые сложные выражения могут работать некорректно в старых версиях Internet Explorer. Для кросс-браузерного анализа рекомендуется использовать простые и стабильные XPath-выражения.

  2. Комбинация CSS и XPath: Параметр include допускает смешение CSS-селекторов и XPath. Например:

    const context = {
  include: [
    '#header-nav',
    'xpath://div[@class="content"]//a'
  ]
};

    В этом случае Axe-core одновременно проверяет элемент с id="header-nav" и все ссылки внутри элементов с классом content.

  3. Исключение элементов: Помимо include существует ключ exclude, который также поддерживает XPath. Это позволяет полностью исключить узлы из проверки:

    const context = {
  include: ['body'],
  exclude: ['xpath://footer']
};

    В примере проверка проводится по всему body, за исключением элементов <footer>.

Практические сценарии использования

  • Фокус на определённых компонентах: Когда необходимо проверить доступность только одного виджета или формы на странице без анализа всей DOM-структуры. Пример: проверка только формы логина:

    const context = {
  include: ['xpath://form[@id="login-form"]']
};

  • Анализ динамически подгружаемых элементов: Если элементы добавляются через JavaScript, можно указать XPath до контейнера, чтобы проверка включала все дочерние узлы.

  • Массовая проверка элементов одного типа: XPath позволяет быстро выбрать группы однотипных элементов, например, все кнопки или ссылки внутри основной секции:

    const context = {
  include: ['xpath://main//button']
};

Рекомендации по составлению XPath для Axe-core

  1. Избегать абсолютных путей (/html/body/div/...) — при изменении структуры страницы они становятся нестабильными.
  2. Использовать атрибуты и классы ([@id="main"], [@class="btn-primary"]) — обеспечивает более устойчивый выбор.
  3. Проверять выражения в консоли браузера с помощью document.evaluate перед использованием в Axe-core:
const xpath = '//*[@id="main-content"]//button';
const result = document.evaluate(xpath, document, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
console.log(result.snapshotLength);
  1. Комбинировать с exclude для исключения вспомогательных элементов, таких как скрипты или скрытые блоки.

Использование параметра xpath делает Axe-core более гибким инструментом, позволяя сфокусироваться на критически важных компонентах страницы и избегать лишней нагрузки при тестировании больших веб-приложений. Этот подход особенно полезен при автоматизации проверок и интеграции с CI/CD, где важно минимизировать время анализа без потери качества проверки доступности.

Оглавление