Проверьте доступность с помощью @axe-core/playwright и сохраните в виде файла Excel.

Что такое тестирование доступности?

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

Сегодня мы собираемся создать простой проект драматурга с помощью @axe-core/playwright и сохранить результат в виде файла Excel.

1. Во-первых, давайте создадим новый проект драматурга, используя настройку по умолчанию.

npm init playwright@latest

2. Установите библиотеки

npm install @axe-core/playwright
npm install xlsx

3. Откройте example.spec.ts в каталоге тестов и измените файл, это пример того, что для проверки проверки для google.com сохраните файл.

import { test } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";

test("example with attachment", async ({ page }, testInfo) => {
  await page.goto("https://google.com/");
  const accessibilityScanResults = await new AxeBuilder({ page })
    .analyze();
  await testInfo.attach("accessibility-scan-results", {
    body: JSON.stringify(accessibilityScanResults, null, 2),
    contentType: "application/json",
  });
});

4. Запустите тест

npx playwright test --project=chromium

Затем проверьте отчет

npx playwright show-report

Тест пройден и мы можем увидеть информацию в формате JSON в разделе вложений

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

const accessibilityScanResults = await new AxeBuilder({ page })
 .include("input")
.analyze();

Вы также можете исключить элементы ввода

const accessibilityScanResults = await new AxeBuilder({ page })
 .exclude("input")
.analyze();

6. Если мы хотим проверить валидацию только с использованием WCAG AA в качестве критериев, вы можете использовать .withTags().

const accessibilityScanResults = await new AxeBuilder({ page })
 .withTags("wcag2a")
.analyze();

7. Теперь можно попробовать преобразовать результат из формата JSON в файл excel.

Примечание: код предназначен для демонстрационных целей, вы не должны помещать функции и тесты в один и тот же файл.

import { test } from "@playwright/test";
import AxeBuilder from "@axe-core/playwright";
const XLSX = require("xlsx");

test("example with attachment", async ({ page }, testInfo) => {
  await page.goto("https://google.com/");
  const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
  await testInfo.attach("accessibility-scan-results", {
    body: JSON.stringify(accessibilityScanResults, null, 2),
    contentType: "application/json",
  });
  await exportWS(processData(accessibilityScanResults.violations));
});

const processData = (result) =>
  [...result].map((element) => {
    element.tags = element.tags.join();
    element.nodes = element.nodes[0].html;
    return element;
  });

const exportWS = (content) => {
  var myFile = "myFile.xlsx";
  var myWorkSheet = XLSX.utils.json_to_sheet(content);
  var myWorkBook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(myWorkBook, myWorkSheet, "myWorkSheet");
  XLSX.writeFile(myWorkBook, myFile);
};

Здесь я создал 2 функции для этой цели. Поскольку «xlsx» не поддерживает преобразование массива в ячейку Excel, нам необходимо обработать данные перед преобразованием.

Он создаст файл с именем myFile.xlsx, поэтому мы обнаружили 2 нарушения на этой странице, и мы можем проверить helpUrl для более подробной информации.

Более подробную информацию можно найти на официальном сайте драматурга.

Спасибо за прочтение!