Berichte aus axe DevTools JSON-Ergebnissen generieren

Nutzen Sie den axe DevTools-Reporter zusammen mit Playwright, um Barrierefreiheit-Berichte für gescannte Seiten zu erstellen

Die Berichtserstellung ist jetzt genauso einfach wie das Durchführen von Scans. Mit dem axe DevTools-Reporter können Sie sofort anzeigbare HTML-Berichte, JUnit XML-Berichte für die Ansicht in CI-Testumgebungen und CSV-Berichte zur Integration in viele andere Tools generieren. Dieser Leitfaden erklärt, wie man den axe DevTools-Reporter installiert, einrichtet und verwendet.

Voraussetzungen

Um den axe DevTools-Reporter nutzen zu können, benötigen Sie ein bestehendes NodeJS-Projekt, in das axe DevTools sowie der Reporter integriert werden können. Dieser Abschnitt des Leitfadens behandelt nur die Einrichtung des Reporters. Falls Sie noch keine Scans mit axe DevTools durchführen, lesen Sie diesen Leitfaden , wie man Scans mit axe DevTools ausführt.

Installation des Reporters

Falls Sie Ihre ~/.npmrc Datei bereits konfiguriert haben, um axe DevTools npm-Pakete herunterzuladen, müssen Sie nur den Befehl ausführen:

npm install @axe-devtools/reporter

Wenn Sie Ihre Installationsauthentifizierung noch nicht konfiguriert haben, lesen Sie einen der Grundlagen-Installationsleitfäden.

Hinzufügen des Reporters zu Ihrem Projekt

Außerhalb eines Moduls wird axe DevTools importiert und eine Instanz mit einer Anweisung wie dieser erstellt:

const { Reporter } = require('@axe-devtools/reporter');

Innerhalb eines Moduls ist die Syntax leicht unterschiedlich. Die Anweisung sollte in etwa so aussehen:

import { Reporter } from '@axe-devtools/reporter';

Um den Reporter verwenden zu können, müssen Ihre axe DevTools-Bibliothek und der Webtreiber ebenfalls importiert werden.

Reporter-Optionen

Es gibt drei wesentliche Entscheidungen, die Sie treffen müssen, wenn Sie den axe DevTools-Reporter verwenden

1. Wie Sie die Berichte benennen
2. Wo Sie die Berichte speichern möchten
3. In welchem Format Sie die Berichte generieren möchten

Sie können die Berichte benennen, wie Sie möchten. Beim Initialisieren des Reporters übergeben Sie einen Suite-Namen, den alle mit dieser Instanz generierten Berichte teilen werden. Jeder Bericht enthält auch einen Namen, der je Scan-Durchführung zugewiesen wird. Der Ort oder das Verzeichnis, in dem die Berichte gespeichert werden, ist ebenfalls völlig dem Benutzer überlassen. Dieser Verzeichnispfad wird auf Instanzebene festgelegt, sodass alle Berichte, die auf einer Reporterinstanz generiert werden, ein Verzeichnis gemeinsam nutzen. Die optionalen Berichtsformate sind HTML, das wir für die sofortige Benutzeransicht empfehlen, JUnit XML, das wir für die Nutzung in CI-Umgebungen empfehlen, CSV, womit die Scan-Ergebnisse in andere Tools importiert werden können, und EARL (Evaluation and Report Language), welches ein W3C EARL JSON-LD-Dokument zur maschinenlesbaren Barrierefreiheit-Berichterstattung ausgibt.

Verwendung des Reporters

Sobald der Reporter in Ihr Projekt importiert wurde, können Sie ihn initialisieren. Der Konstruktor nimmt zwei Parameter entgegen: den Bericht-Suite-Namen und das Zielverzeichnis für die Berichte. Ihre Initialisierungsanweisung sollte in etwa so aussehen:

reporter = new Reporter('<suite-name>', '<dir-name>');

Es gibt zwei Schritte zum Ausführen des Reporters, nachdem ein axe DevTools-Scan durchgeführt wurde. Zuerst müssen die Ergebnisse protokolliert werden, damit der Reporter darauf zugreifen kann. Dann verarbeitet der Reporter diese Ergebnisse in den Bericht.

reporter.logTestResult('<scan-name>', <results-object>);
reporter.buildHTML('<scan-dir>');

Beispieldatei

Diese Beispieldatei verwendet die gleiche Grundlage wie das Tests schreiben -Beispiel, integriert jedoch auch den Reporter.

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

Fehlerbehebung

Wenn Sie Probleme mit dem Erhalten von Scan-Ergebnissen haben, kontaktieren Sie direkt Ihren Deque-Ansprechpartner, erreichen Sie uns über unser Support-Desk, oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.

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.