Generación de informes a partir de resultados JSON de axe DevTools

Utilice el axe DevTools reporter con Playwright para generar informes de accesibilidad para páginas escaneadas

Generar informes ahora es tan fácil como ejecutar escaneos. Con el generador de informes de axe DevTools, puede generar informes HTML visibles inmediatamente, informes JUnit XML para ver en entornos de prueba de CI e informes CSV para importar a una multitud de otras herramientas. Esta guía detalla cómo instalar, configurar y utilizar el generador de informes de axe DevTools.

Prerrequisitos

Para poder utilizar el generador de informes de axe DevTools, necesita un proyecto NodeJS existente para integrar axe DevTools y el generador de informes. Esta parte de la guía solo cubre la configuración del reportador, por lo que si aún no tiene axe DevTools realizando análisis, lea esta guía sobre cómo realizar análisis con axe DevTools.

Instalación del Reportador

Si ya configuraste tu ~/.npmrc archivo para descargar paquetes npm de axe DevTools, todo lo que necesitas hacer es ejecutar el comando:

npm install @axe-devtools/reporter

Si aún no ha configurado la autenticación de su instalación, lea una de las guías de instalación básica.

Cómo agregar el Reportador a su Proyecto

Fuera de un módulo, se importa axe DevTools y se crea una instancia con una declaración como esta:

const Reporter = require('@axe-devtools/reporter').default;

Dentro de un módulo, la sintaxis es ligeramente diferente. La declaración debería verse así:

import Reporter from '@axe-devtools/reporter';

Para poder utilizar el reportador, también será necesario importar la biblioteca axe DevTools y el controlador web.

Opciones del generador de informes

Hay tres opciones principales que debe elegir al utilizar el generador de informes de DevTools de Axe

1. ¿Cómo nombrar los informes?
2. Dónde almacenar los informes
3. ¿En qué formato generar los informes?

Puedes nombrar los informes como desees. Cuando inicializas el reportero, le pasas un nombre de suite que compartirán todos los informes generados con esa instancia. Cada informe también incluye un nombre asignado según cada escaneo. La ubicación o directorio donde se almacenarán los informes también depende totalmente del usuario. Esta ubicación de directorio también se establece a nivel de instancia, por lo que todos los informes generados en una instancia de generador de informes compartirán un directorio. Los formatos de informe opcionales son HTML, que recomendamos para visualización inmediata por parte del usuario, JUnit XML, que recomendamos para usar en entornos CI, y CSV, que permite importar los resultados del escaneo a otras herramientas.

Usando el generador de informes

Una vez que el generador de informes se haya importado a su proyecto, puede inicializarlo. El constructor toma dos argumentos: el nombre del conjunto de informes y el directorio de destino de los informes. Su declaración de inicialización debería verse así:

reporter = new Reporter('<suite-name>', '<dir-name>');

Hay dos pasos para ejecutar el reportero una vez que se ha ejecutado un análisis de axe DevTools. En primer lugar, los resultados deben registrarse para que el reportero pueda acceder a ellos. Luego, el reportero procesa estos resultados en el informe.

reporter.logTestResult('<scan-name>', <results-object>);
reporter.buildHTML('<scan-dir>');

Archivo de muestra

Este archivo de muestra utiliza la misma base que el ejemplo writing tests , pero también integra el generador de informes.

const rimraf = require('rimraf');
const AxeDevtoolsBuilder = require('@axe-devtools/playwright').default;
const playwright = require('playwright');
const Reporter = require('@axe-devtools/reporter').default;

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results = await new AxeDevtoolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

Solución de problemas

Si tiene problemas para obtener los resultados del escaneo, comuníquese directamente con su representante de Deque, contáctenos a través de nuestro servicio de asistencia o envíenos un correo electrónico. Estaremos encantados de ayudarle.

Consulte también

• Cómo cargar resultados de accesibilidad JSON en axe Reports describe cómo cargar sus resultados en axe Reports.
• Cómo obtener una clave API de axe Reports indica cómo obtener una clave API para comenzar a utilizar axe Reports.
• Creación y filtrado de informes muestra cómo puede crear informes de accesibilidad en formato CSV, XML o HTML a partir de sus resultados de accesibilidad JSON. También puede filtrar su salida por severidad utilizando esta herramienta.
• Cómo se almacenan los resultados JSON en el disco describe las convenciones de nombres de archivos para los resultados de accesibilidad JSON.