Karma

Karma-Tests mit Axe DevTools

Diese Integration mit Karma funktioniert unabhängig vom ausgewählten UI-Framework. Diese Integration wird das Testen von React, Angular, Vue usw. ermöglichen.

Voraussetzungen

Um Ihre Inhalte mit Karma und Axe DevTools zu testen, müssen zunächst die folgenden Pakete in Ihr Projekt installiert werden:

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

Setup der Karma-Konfiguration

Zunächst müssen wir unsere karma.config (oder karma.conf) Datei so einrichten, dass sie @axe-devtools/karma-json-reporter als Plugin einbindet.

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

Dann fügen Sie axeDevTools der reporters-Eigenschaft hinzu. Sie können auch die axeDevToolsReporter-Eigenschaft mit dem Zielverzeichnis (dir) hinzufügen. Standardmäßig werden die Berichte im axeDevToolsReports-Verzeichnis auf der obersten Ebene Ihres Projekts erstellt.

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

Einmal konfiguriert, wird @axe-devtools/karma-json-reporter ein globales Reporter-Objekt zu Ihren Tests hinzufügen, das axeDevToolsReporter genannt wird.

Setup der Testfälle

Um axe in Ihren Testspezifikationen für jede Komponente oder Seitenkomponente auszuführen, fügen Sie den folgenden Import hinzu:

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

Dann fügen Sie innerhalb Ihrer Test-Setup-Funktionen (z. B. before() oder beforeEach()) die folgende init()-Funktion hinzu, um ihr ein bestimmtes Regelwerk zu geben. Standardmäßig wird das wcag2.1-Regelwerk verwendet.

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

Nun müssen wir einen Test erstellen, wie unten gezeigt, bei dem wir die Komponente oder Seitenkomponente auf Barrierefreiheitsprobleme scannen. Um AxeDevTools.run() ordnungsgemäß aufzurufen, müssen jedoch alle nicht-nativen Komponenten in ein nativen Element kompiliert werden, um die Komponente ordnungsgemäß zu scannen.

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

Berichterstattung mit Karma und Axe DevTools

Berichterstellung im Test einrichten

Jedes Mal, wenn AxeDevTools.run() aufgerufen wird, fügen Sie einen Aufruf zu axeDevToolsReporter.logTestResult() hinzu und übergeben Sie die Ergebnisse des Axe-Durchlaufs. Die logTestResult-Funktion kann optional ein id als ersten Parameter aufnehmen, das als Name des Tests verwendet wird.

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

Nun, wenn die Tests ausgeführt werden, wird @axe-devtools/karma-json-reporter eine JSON-Datei für jeden protokollierten Axe DevTools-Scan erstellen (genannt axeDevToolsResults).

Axe DevTools CLI ausführen

Sobald die Tests abgeschlossen und die Berichte erstellt wurden, können wir mit @axe-devtools/cli einen Axe DevTools-Bericht generieren.

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

Fehlerbehebung

Wenn Sie Probleme bei den Scanergebnissen haben, kontaktieren Sie direkt Ihren Deque-Vertreter, erreichen Sie uns über unseren Support Desk oder Senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.

Für weitere Informationen über Axe DevTools im Allgemeinen, schauen Sie sich die Axe DevTools Übersichtsseite an

Siehe auch

• Hochladen von JSON-Zugänglichkeitsergebnissen zu den Axe-Berichten beschreibt, wie Sie Ihre Ergebnisse in Axe-Berichte hochladen können.
• Erhalten eines Axe-Berichts-API-Schlüssels erklärt, wie Sie einen API-Schlüssel erhalten, um mit der Verwendung der Axe-Berichte zu beginnen.
• Erstellen und Filtern von Berichten zeigt, wie Sie Barriereberichte in CSV, XML oder HTML aus Ihren JSON-Barrierefreiheitsergebnissen erstellen können. Sie können Ihre Ausgabe auch nach Schweregrad filtern, indem Sie dieses Tool verwenden.
• Wie JSON-Ergebnisse auf der Festplatte gespeichert werden beschreibt die Namenskonventionen für JSON-Barrierefreiheitsergebnisse.
• Verwenden des CLI zum Senden von Zugänglichkeitsergebnissen an die Axe Developer Hub zeigt, wie Sie Ihre .json Ergebnisdateien zu Axe Developer Hub hochladen können.