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

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Usando el paquete @axe-devtools/reporter para generar informes

Not for use with personal data

Usa el generador de informes de Axe DevTools junto con Playwright para producir informes de accesibilidad de las páginas escaneadas

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

Requisitos previos

Para usar el generador de informes de Axe DevTools, necesitas 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 generador de informes, así que si aún no tienes Axe DevTools ejecutando escaneos, lee esta guía sobre cómo ejecutar escaneos con Axe DevTools.

Instalación del reportero

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

npm install @axe-devtools/reporter

Si aún no has configurado la autenticación de tu instalación, lee una de las guías básicas de instalación.

Añadir el reportero a tu proyecto

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

const { Reporter } = require('@axe-devtools/reporter');

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

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

Para usar el generador de informes, tu biblioteca de Axe DevTools y el controlador webdriver también deberán estar importados.

Opciones del reportero

Hay tres decisiones principales que debes tomar al usar el generador de informes de Axe DevTools

Qué nombre dar a los informes
Dónde almacenar los informes
En qué formato generar los informes

Puedes nombrar los informes como prefieras. Cuando inicializas el reportero, le pasas un nombre de suite que todos los informes generados con esa instancia compartirán. Cada informe también incluye un nombre asignado en cada escaneo. La ubicación, o directorio, donde se almacenarán los informes también depende completamente 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 del reportero compartirán un directorio. Los formatos opcionales de informe son HTML, que recomendamos para la visualización inmediata por el usuario, JUnit XML, que recomendamos para su uso en entornos CI, CSV, que permite importar los resultados del escaneo en otras herramientas, y EARL (Lenguaje de Evaluación e Informe), que produce un documento W3C EARL JSON-LD para informes de accesibilidad legibles por máquina.

Usando el reportero

Una vez que el reportero está importado en tu proyecto, puedes inicializarlo. El constructor toma dos argumentos: el nombre de la suite de informes y el directorio de destino para los informes. Tu declaración de inicialización debería verse algo así:

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

Hay dos pasos para ejecutar el generador de informes una vez que se ha ejecutado un escaneo de Axe DevTools. Primero, se deben registrar los resultados para que el generador de informes los acceda. Luego, el generador procesa estos resultados en el informe.

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

Archivo de ejemplo

Este archivo de ejemplo usa la misma base que el ejemplo de escribir pruebas, pero también integra el generador de informes.

const rimraf = require('rimraf');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');
const { Reporter } = require('@axe-devtools/reporter');

(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 tienes problemas para obtener resultados de los escaneos, contacta directamente a tu representante de Deque, comunícanos a través de nuestro centro de soporte, o envíanos un correo electrónico. Estaremos encantados de ayudar.

Ver también

Cargando Resultados de Accesibilidad JSON a Axe Reports describe cómo cargar tus resultados en Axe Reports.
Obteniendo una Clave API de Axe Reports explica cómo obtener una clave API para comenzar a usar Axe Reports.
Crear y Filtrar Informes muestra cómo puedes crear informes de accesibilidad en CSV, XML o HTML a partir de tus resultados de accesibilidad JSON. También puedes filtrar tu salida por severidad utilizando esta herramienta.
Cómo se Almacenan los Resultados JSON en el Disco describe las convenciones de nomenclatura de archivos para resultados de accesibilidad JSON.
Usando la CLI para Enviar Resultados de Accesibilidad al Centro de Desarrolladores de Axe muestra cómo puedes subir tus archivos de resultados .json a Centro de Desarrolladores de Axe.