Karma

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

Not for use with personal data

Karma-Test mit axe DevTools

Diese Integration mit Karma funktioniert unabhängig vom ausgewählten UI-Framework. Diese Integration funktioniert beim Testen von React, Angular, Vue usw.

Voraussetzungen

Um Ihre Inhalte mit Karma und axe DevTools zu testen, müssen Sie zunächst die folgenden Pakete in Ihrem Projekt installieren:

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

Karma-Konfiguration

Wir müssen zuerst unsere karma.config (oder karma.conf) Datei einrichten, um das @axe-devtools/karma-json-reporter als Plug-In einzubinden.

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

Fügen Sie dann axeDevTools der Eigenschaft reporters hinzu. Sie können die Eigenschaft axeDevToolsReporter auch mit dem Zielverzeichnis (dir) verknüpfen. Standardmäßig werden die Berichte im Verzeichnis axeDevToolsReports auf der Stammebene Ihres Projekts erstellt.

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

Nach der Konfiguration wird @axe-devtools/karma-json-reporter Ihren Tests ein globales Reporterobjekt mit dem Namen axeDevToolsReporter hinzugefügt.

Testfallsetup

Um Axe innerhalb Ihrer Test-Spezifikationen für jede Komponente oder Seitenkomponente auszuführen, fügen Sie den folgenden Import hinzu:

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

Fügen Sie dann innerhalb der Einrichtungsfunktionen Ihres Tests (z. B. before() oder beforeEach()) die folgende init() Funktion hinzu, um ihr einen bestimmten Regelsatz zuzuweisen. Standardmäßig wird der wcag2.1 Regelsatz verwendet.

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

Jetzt müssen wir einen Test wie den unten gezeigten erstellen, bei dem wir die Komponente oder Seitenkomponente auf Zugänglichkeitsprobleme überprüfen. Um jedoch AxeDevTools.run() ordnungsgemäß aufzurufen, müssen alle nicht nativen Komponenten in ein natives 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);
});

Reporting mit Karma und axe DevTools

Berichterstellung im Test einrichten

Jedes Mal, wenn AxeDevTools.run() aufgerufen wird, fügen Sie einen Aufruf von axeDevToolsReporter.logTestResult() hinzu und übergeben Sie ihm die Ergebnisse des Axe-Laufs. Die logTestResult Funktion kann optional einen id als ersten Parameter annehmen, der 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);
});

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

Ausführen der axe DevTools CLI

Sobald die Tests abgeschlossen und die Berichte erstellt wurden, können wir mithilfe von @axe-devtools/cli einen axe DevTools-Bericht erstellen.

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

Fehlerbehebung

Wenn Sie Probleme beim Abrufen der Scanergebnisse haben, wenden Sie sich direkt an Ihren Deque-Vertreter, erreichen Sie uns über unseren Support-Desk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.

Weitere Informationen zu axe DevTools im Allgemeinen finden Sie auf der [Übersichtsseite] zu axe DevTools.(overview-home)

Siehe auch

– Hochladen von JSON-Zugänglichkeitsergebnissen in axe Reports beschreibt, wie Sie Ihre Ergebnisse in axe Reports hochladen.

Erhalten eines API-Schlüssels für axe Reports erklärt, wie Sie einen API-Schlüssel erhalten, um mit der Verwendung von axe Reports zu beginnen.

– Berichte erstellen und filtern zeigt, wie Sie aus Ihren JSON-Zugänglichkeitsergebnissen Zugänglichkeitsberichte im CSV-, XML- oder HTML-Format erstellen können. Mit diesem Tool können Sie Ihre Ausgabe auch nach Schweregrad filtern. – So werden JSON-Ergebnisse auf der Festplatte gespeichert beschreibt die Dateibenennungskonventionen für JSON-Zugänglichkeitsergebnisse.