Generar 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

Utiliza el reportero de axe DevTools con Playwright para producir informes de accesibilidad para páginas escaneadas

Generar informes ahora es tan fácil como ejecutar escaneos. Con el reportero de axe DevTools, puedes generar informes HTML que se pueden visualizar de inmediato, informes JUnit XML para ver en entornos de pruebas CI, e informes CSV para importar en multitud de otras herramientas. Esta guía detalla cómo instalar, configurar y usar el reportero de axe DevTools.

Requisitos previos

Para usar el reportero de axe DevTools, necesitas un proyecto NodeJS existente para integrar axe DevTools así como el reportero. Esta parte de la guía solo cubre la configuración del reportero, por lo 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 ~/.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 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 declaració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 reportero, tu biblioteca de axe DevTools y el controlador web deberán ser importados también.

Opciones del reportero

Hay tres decisiones importantes que debes tomar al usar el reportero 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 reportero una vez que se ha ejecutado un escaneo de axe DevTools. Primero, 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 ejemplo

Este archivo de ejemplo utiliza la misma base que el ejemplo de escribir pruebas , pero también integra el reportero.

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 escaneo, contacta a tu representante de Deque directamente, contáctanos a través de nuestro centro de soporte, o envíanos un correo electrónico. Estaremos encantados de ayudarte.

Ver 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.