Karma

Test del karma con axe DevTools

Questa integrazione con Karma funziona indipendentemente dal framework dell'interfaccia utente selezionato. Questa integrazione funziona con test per React, Angular, Vue, ecc.

Prerequisiti

Per testare i tuoi contenuti utilizzando Karma e axe DevTools, devi prima installare i seguenti pacchetti nel tuo progetto:

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

Impostazione della configurazione Karma

Per prima cosa dovremo configurare il nostro file karma.config (o karma.conf) per includere @axe-devtools/karma-json-reporter come plugin.

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

Quindi aggiungi axeDevTools alla reporters proprietà. È anche possibile utilizzare la proprietà axeDevToolsReporter con la directory di destinazione (dir). Per impostazione predefinita, i report verranno creati nella axeDevToolsReports directory al livello radice del progetto.

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

Una volta configurato, @axe-devtools/karma-json-reporter aggiungerà un oggetto reporter globale ai tuoi test denominato axeDevToolsReporter.

Impostazione del caso di prova

Per eseguire axe nelle spec di test per ogni componente o componente della pagina, aggiungere il seguente import:

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

Quindi, all'interno delle funzioni di configurazione dei test (ad esempio before() o beforeEach()), aggiungi la seguente init() funzione per assegnargli un set di regole specifico. Per impostazione predefinita viene utilizzato il set di regole wcag2.1 .

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

Ora dobbiamo creare un test come quello mostrato di seguito, in cui analizzeremo il componente o il componente della pagina per individuare problemi di accessibilità. Tuttavia, per chiamare correttamente AxeDevTools.run(), tutti i componenti non nativi dovranno essere compilati in un elemento nativo per poter eseguire la scansione corretta del 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);
});

Reporting con Karma e axe DevTools

Impostazione del reporting nel test

Ogni volta che AxeDevTools.run() viene chiamato, aggiungi una chiamata a axeDevToolsReporter.logTestResult() e passagli i risultati dell'esecuzione di axe. La funzione logTestResult può facoltativamente accettare un id come primo parametro, che verrà utilizzato come nome del test.

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);
});

Ora, quando vengono eseguiti i test, verrà creato un file JSON per ogni scansione di axe DevTools registrata (chiamato @axe-devtools/karma-json-reporter ). axeDevToolsResults

Esecuzione dell'interfaccia a riga di comando di axe DevTools

Una volta completati i test e generati i report, possiamo generare un report axe DevTools utilizzando @axe-devtools/cli.

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

Risoluzione dei problemi

In caso di problemi con l'ottenimento dei risultati della scansione, contattare direttamente il rappresentante Deque, contattarci tramite il nostro support desk o inviarci un'e-mail. Saremo lieti di aiutarti.

Per maggiori informazioni su axe DevTools in generale, vedere la pagina di panoramica di axe DevTools.(overview-home)

Vedere anche

• Caricamento dei risultati di accessibilità JSON su axe Reports descrive come caricare i risultati su axe Reports.
• Ottenere una chiave API per axe Reports spiega come ottenere una chiave API per iniziare a utilizzare axe Reports.
• Creazione e filtraggio di report mostra come creare report di accessibilità in formato CSV, XML o HTML a partire dai risultati di accessibilità JSON. Utilizzando questo strumento puoi anche filtrare l'output in base alla gravità.
• Come vengono archiviati i risultati JSON su disco descrive le convenzioni di denominazione dei file per i risultati di accessibilità JSON.