Karma

Prueba de karma con axe DevTools

Esta integración con Karma funciona independientemente del marco de interfaz de usuario seleccionado. Esta integración será efectiva al probar React, Angular, Vue, etc.

Prerrequisitos

Para probar su contenido usando Karma y axe DevTools, primero necesita tener los siguientes paquetes instalados en su proyecto:

• @axe-devtools/karma-json-reporter
• @axe-devtools/browser
• @axe-devtools/cli

Configuración de Karma

Primero necesitaremos configurar nuestro archivo karma.config (o karma.conf) para incluirlo @axe-devtools/karma-json-reporter como complemento.

plugins: [
  require('@axe-devtools/karma-json-reporter')
]

A la propiedad axeDevTools agregue reporters . También puede utilizar la propiedad axeDevToolsReporter con el directorio de destino (dir). De forma predeterminada, los informes se crearán en el directorio axeDevToolsReports en el nivel raíz de su proyecto.

reporters: ['axeDevTools'],
axeDevToolsReporter: {
  dir: 'axe-results'
},

Agregará @axe-devtools/karma-json-reporter un objeto reportero global a sus pruebas llamado axeDevToolsReporter.

Configuración del caso de prueba

Para ejecutar axe dentro de las especificaciones de prueba para cada componente o componente de página, agregue la siguiente importación:

import * as AxeDevTools from "@axe-devtools/browser";

Luego, dentro de las funciones de configuración de sus pruebas (por ejemplo, before() o beforeEach()), agregue la siguiente función init() para darle un conjunto de reglas particular. De forma predeterminada, se utiliza el conjunto de reglas wcag2.1 .

before(() => {
  AxeDevTools.init("wcag2.1");
});

Ahora necesitamos crear una prueba como la que se muestra a continuación, donde escanearemos el componente o el componente de la página en busca de problemas de accesibilidad. Sin embargo, para llamar correctamente a AxeDevTools.run(), cualquier componente no nativo deberá compilarse en un elemento nativo para poder escanear correctamente el componente.

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  expect(results.violations).toHaveLength(0);
});

Informes con Karma y axe DevTools

Configurar informes en la prueba

Cada vez que se llama a AxeDevTools.run() , se agrega una llamada a axeDevToolsReporter.logTestResult() y se le pasan los resultados de la ejecución de axe. La función logTestResult puede tomar opcionalmente un id como primer parámetro que se utilizará como nombre de la prueba.

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  axeDevToolsReporter.logTestResult(results);
  expect(results.violations).toHaveLength(0);
});

Ahora, cuando se ejecutan las pruebas, @axe-devtools/karma-json-reporter creará un archivo JSON para cada escaneo registrado de axe DevTools (llamado axeDevToolsResults).

Ejecución de la CLI de axe DevTools

Una vez que se hayan completado las pruebas y se hayan generado los informes, podemos generar un informe de axe DevTools usando @axe-devtools/cli.

"test": "karma start && axe reporter ./axe-results --format=html",

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.

Para obtener más información sobre axe DevTools en general, consulte axe DevTools página de resumen

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.