Интеграция с axe-core

Интеграция Playwright с axe-core позволяет автоматизировать процесс проверки доступности веб-приложений. Axe-core — это библиотека, которая помогает проводить анализ доступности на уровне контента веб-страниц. Это средство предоставляет доступ к методам для выявления ошибок доступности и помогает улучшать опыт пользователей с ограниченными возможностями.

Подключение axe-core к Playwright

Для начала необходимо установить axe-core и Playwright. Если Playwright уже установлен, добавление axe-core будет простым шагом:

npm install axe-core

Затем, в тестах Playwright, необходимо импортировать библиотеку и интегрировать её с инструментами тестирования. Для этого создаётся экземпляр axe-core, который будет проверять страницу на доступность.

const { chromium } = require('playwright');
const axeCore = require('axe-core');

После этого можно запускать тесты, используя методы Playwright для взаимодействия с элементами страницы и axe-core для выполнения проверки доступности.

Проведение проверки доступности

Для выполнения проверки доступности страницы с использованием axe-core, необходимо передать скрипт, который будет вызываться в контексте браузера. В Playwright можно использовать метод page.evaluate(), который позволяет выполнять код в браузере.

const { chromium } = require('playwright');
const axeCore = require('axe-core');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  const results = await page.evaluate(() => {
    return new Promise((resolve) => {
      // Запускаем axe-core на странице
      axe.run((err, results) => {
        if (err) {
          resolve({ error: err });
        }
        resolve(results);
      });
    });
  });
  
  console.log(results); // Выводим результаты теста
  await browser.close();
})();

В этом примере создаётся браузерный экземпляр с помощью Playwright, который загружает страницу, а затем выполняется анализ с помощью axe-core. Важно помнить, что результаты тестирования включают все ошибки доступности, которые были найдены на странице.

Структура результатов тестирования

Результаты анализа доступности представляют собой объект с несколькими ключами, важнейшими из которых являются:

  • violations — список нарушений, которые были найдены на странице. Каждое нарушение включает описание проблемы, элементы на странице, которые её вызывают, и рекомендации по исправлению.
  • passes — список элементов, которые прошли тестирование на доступность.
  • incomplete — элементы, которые не были полностью протестированы из-за ограничений или ошибок.

Пример структуры результата:

{
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "description": "The color contrast between the text and background is insufficient.",
      "nodes": [
        {
          "target": ["#header h1"],
          "failureSummary": "This text has insufficient color contrast against the background."
        }
      ]
    }
  ],
  "passes": [],
  "incomplete": []
}

Каждое нарушение содержит:

  • id — идентификатор нарушения.
  • impact — уровень воздействия (например, «serious», «moderate»).
  • description — описание проблемы.
  • nodes — список элементов, которые содержат ошибку.

Обработка результатов тестирования

После того как тестирование завершено, важно не только вывести результаты в консоль, но и обработать их для дальнейших действий. Например, можно настроить систему уведомлений или создать отчёт в виде файла.

Пример обработки нарушений:

const { chromium } = require('playwright');
const axeCore = require('axe-core');
const fs = require('fs');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  const results = await page.evaluate(() => {
    return new Promise((resolve) => {
      axe.run((err, results) => {
        if (err) {
          resolve({ error: err });
        }
        resolve(results);
      });
    });
  });
  
  if (results.violations.length > 0) {
    fs.writeFileSync('axe-violations.json', JSON.stringify(results, null, 2));
  }

  await browser.close();
})();

В данном примере результаты нарушений записываются в файл axe-violations.json. Это полезно для дальнейшего анализа или автоматизированных проверок.

Интеграция с фреймворками тестирования

Интеграция с фреймворками тестирования, такими как Jest или Mocha, позволяет автоматизировать проверку доступности как часть общего процесса тестирования веб-приложений. Включение axe-core в тесты помогает поддерживать стандарт доступности в ходе разработки, автоматически выявляя проблемы ещё на ранних этапах.

Пример интеграции с Jest:

const { chromium } = require('playwright');
const axeCore = require('axe-core');

describe('A11y Tests', () => {
  let browser;
  let page;

  beforeAll(async () => {
    browser = await chromium.launch();
    page = await browser.newPage();
  });

  afterAll(async () => {
    await browser.close();
  });

  it('should not have accessibility violations', async () => {
    await page.goto('https://example.com');

    const results = await page.evaluate(() => {
      return new Promise((resolve) => {
        axe.run((err, results) => {
          if (err) {
            resolve({ error: err });
          }
          resolve(results);
        });
      });
    });

    expect(results.violations.length).toBe(0);
  });
});

Этот пример с использованием Jest гарантирует, что на странице не будет найдено нарушений доступности. Если такие нарушения будут, тест не пройдет, и разработчики получат информацию о проблемах с доступностью.

Настройка axe-core

B axe-core имеется возможность настраивать проверки с помощью конфигурации. Это может быть полезно, если требуется учитывать специфические требования или исключить определённые правила. Для настройки axe-core необходимо передать объект с параметрами конфигурации в метод axe.run().

Пример настройки axe-core:

const { chromium } = require('playwright');
const axeCore = require('axe-core');

(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('https://example.com');
  
  const results = await page.evaluate(() => {
    return new Promise((resolve) => {
      axe.run({
        runOnly: ['wcag2a', 'wcag2aa'], // Ограничиваем проверки WCAG 2.0
        rules: {
          'color-contrast': { enabled: false } // Отключаем проверку контраста
        }
      }, (err, results) => {
        if (err) {
          resolve({ error: err });
        }
        resolve(results);
      });
    });
  });

  console.log(results);
  await browser.close();
})();

В данном примере ограничены только правила WCAG 2.0 уровня A и AA, а проверка контраста отключена.

Преимущества использования axe-core с Playwright

  • Автоматизация: Проверки доступности становятся частью автоматизированных тестов, что снижает риски ошибок и упрощает процесс поддержания качества.
  • Быстрая интеграция: Подключение axe-core к Playwright не требует сложных настроек, и можно сразу приступить к тестированию доступности.
  • Точная диагностика: axe-core предоставляет подробные отчёты о найденных ошибках, включая рекомендации по исправлению.

Интеграция Playwright с axe-core — это мощный инструмент для создания доступных веб-приложений, что важно для обеспечения равного доступа всех пользователей, независимо от их физических возможностей.

Оглавление