ARIA атрибуты

ARIA (Accessible Rich Internet Applications) атрибуты предназначены для повышения доступности веб-приложений, позволяя вспомогательным технологиям — таким как скринридеры — корректно интерпретировать динамический контент. В автоматизированном тестировании важно уметь проверять их присутствие и корректность, особенно при тестировании пользовательских интерфейсов с динамическими элементами.

Получение ARIA атрибутов

Puppeteer предоставляет возможность работать с DOM напрямую, что позволяет получать значения ARIA атрибутов через page.$eval</code> или <code>page.evaluate</code>.</p> <p><strong>Пример: чтение атрибута <code>aria-label</code>:</strong></p> <pre class="javascript"><code>const ariaLabel = await page.$eval(& console.log(ariaLabel); // Выведет значение атрибута

Если необходимо проверить несколько атрибутов одновременно: 

const ariaAttributes = await page.$eval('#menu', el => ({
  role: el.getAttribute('role'),
  expanded: el.getAttribute('aria-expanded'),
  hidden: el.getAttribute('aria-hidden')
}));
console.log(ariaAttributes);

Проверка корректности ARIA атрибутов

Автоматизированные тесты часто требуют проверки соответствия ARIA атрибутов ожидаемым значениям. Для этого удобно использовать expect из тестового фреймворка (например, Jest или Mocha): 

const isExpanded = await page.$eval('#dropdown', el => el.getAttribute('aria-expanded'));
expect(isExpanded).toBe('true');

Проверка наличия роли: 

const role = await page.$eval('#modal', el => el.getAttribute('role'));
expect(role).toBe('dialog');

Взаимодействие с элементами на основе ARIA

ARIA атрибуты часто сигнализируют о состоянии элементов (например, раскрыт ли аккордеон). Puppeteer позволяет комбинировать их с действиями пользователя: 

// Нажатие на кнопку раскрытия меню
await page.click('#menu-button');

// Проверка, что aria-expanded обновился
const expanded = await page.$eval('#menu-button', el => el.getAttribute('aria-expanded'));
expect(expanded).toBe('true');

Использование ARIA для локаторов повышает надежность тестов: 

// Поиск кнопки с конкретным aria-label
const button = await page.$('[aria-label="Отправить форму"]');
await button.click();

Работа с динамическим контентом

В современных SPA элементы часто создаются динамически. ARIA атрибуты могут обновляться после взаимодействий. Для корректного тестирования требуется ожидание: 

await page.click('#toggle-section');

// Ждем обновления aria-expanded
await page.waitForFunction(
  selector => document.querySelector(selector).getAttribute('aria-expanded') === 'true',
  {},
  '#toggle-section'
);

Использование waitForFunction гарантирует, что тест не продолжится до обновления состояния.

Аудит ARIA атрибутов

Для комплексного тестирования полезно собирать все ARIA атрибуты на странице и проверять их на соответствие стандартам: 

const elementsWithAria = await page.$$('[aria-label], [aria-labelledby], [aria-hidden], [role]');
const ariaData = await Promise.all(
  elementsWithAria.map(el => page.evaluate(element => {
    return {
      tag: element.tagName.toLowerCase(),
      role: element.getAttribute('role'),
      ariaLabel: element.getAttribute('aria-label'),
      ariaHidden: element.getAttribute('aria-hidden')
    };
  }, el))
);

console.table(ariaData);

Такой подход помогает выявлять элементы с отсутствующими или некорректными атрибутами на больших страницах.

Комбинация с визуальным тестированием

ARIA атрибуты часто связаны с видимостью элементов. Puppeteer позволяет проверять их состояние совместно с видимостью: 

const isHidden = await page.$eval('#tooltip', el => el.getAttribute('aria-hidden') === 'true');
const isVisible = await page.isVisible('#tooltip');
expect(isHidden).toBe(true);
expect(isVisible).toBe(false);

Это позволяет убедиться, что атрибуты и реальное отображение элемента синхронизированы.

Рекомендации по структуре тестов

  • Отдельные проверки состояния ARIA лучше выделять в самостоятельные тесты, чтобы локализовать ошибки доступности.
  • Использовать явные ожидания (waitForFunction, waitForSelector) для динамически обновляемых атрибутов.
  • Применять CSS-селекторы с ARIA для устойчивых локаторов вместо изменения классов или текстового контента.
  • Соблюдать единообразие именования ARIA атрибутов, особенно aria-label и aria-labelledby, чтобы тесты оставались читаемыми и поддерживаемыми.

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

test('Меню доступно через ARIA', async () => {
  await page.goto('https://example.com');

  const menuButton = await page.$('[aria-label="Меню"]');
  expect(menuButton).not.toBeNull();

  await menuButton.click();

  const expanded = await page.$eval('[aria-label="Меню"]', el => el.getAttribute('aria-expanded'));
  expect(expanded).toBe('true');

  const menuItems = await page.$$('[role="menuitem"]');
  expect(menuItems.length).toBeGreaterThan(0);
});

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

ARIA атрибуты в Puppeteer позволяют не только проверять корректность интерфейсов, но и создавать более стабильные и надежные тесты, особенно для динамических элементов и сложных веб-приложений.

Оглавление