Generieren von Berichten aus axe DevTools JSON-Ergebnissen

Verwenden Sie den axe DevTools reporter mit Playwright, um Zugänglichkeitsberichte für gescannte Seiten zu erstellen

Das Erstellen von Berichten ist jetzt genauso einfach wie das Ausführen von Scans. Mit dem axe DevTools reporter können Sie sofort sichtbare HTML-Berichte, JUnit XML-Berichte zur Anzeige in CI-Testumgebungen und CSV-Berichte zum Importieren in eine Vielzahl anderer Tools erstellen. In diesem Handbuch wird detailliert beschrieben, wie Sie den axe DevTools Reporter installieren, einrichten und verwenden.

Voraussetzungen

Um den axe DevTools-Reporter zu verwenden, benötigen Sie ein vorhandenes NodeJS-Projekt, in das Sie axe DevTools und den Reporter integrieren können. Dieser Teil des Handbuchs behandelt nur die Einrichtung des Reporters. Wenn Sie also noch keine Scans mit axe DevTools ausführen, lesen Sie dieses Handbuch , wie man Scans mit axe DevTools ausführt.

Installieren des Reporters

Wenn Sie Ihre ~/.npmrc Datei bereits zum Herunterladen von axe DevTools npm-Paketen konfiguriert haben, müssen Sie nur den folgenden Befehl ausführen:

npm install @axe-devtools/reporter

Wenn Sie Ihre Installationsauthentifizierung noch nicht konfiguriert haben, lesen Sie eine der Grundlageninstallationsanleitungen.

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').default;

Innerhalb eines Moduls ist die Syntax leicht anders. Die Anweisung sollte folgendermaßen aussehen:

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

Um den Reporter zu verwenden, müssen auch Ihre axe DevTools-Bibliothek und Ihr Webtreiber importiert werden.

Reporteroptionen

Bei der Verwendung des axe DevTools Reporters müssen Sie drei wichtige Entscheidungen treffen

1. Wie sollen die Berichte benannt werden?
2. Wo sollen die Berichte gespeichert werden?
3. In welchem Format die Berichte erstellt werden sollen

Sie können den Berichten beliebige Namen geben. Wenn Sie den Reporter initialisieren, übergeben Sie ihm einen Suite-Namen, der für alle mit dieser Instanz generierten Berichte gilt. Jeder Bericht enthält außerdem einen Namen, der pro Scan zugewiesen wird. Der Speicherort bzw. das Verzeichnis, in dem die Berichte gespeichert werden, bleibt ebenfalls völlig dem Benutzer überlassen. Dieser Verzeichnisspeicherort wird auch auf Instanzebene festgelegt, sodass alle auf einer Reporterinstanz generierten Berichte ein Verzeichnis gemeinsam nutzen. Die optionalen Berichtsformate sind HTML, das wir für die sofortige Anzeige durch den Benutzer empfehlen, JUnit XML, das wir für die Verwendung in CI-Umgebungen empfehlen, und CSV, das den Import der Scan-Ergebnisse in andere Tools ermöglicht.

Verwenden des Reporters

Sobald der Reporter in Ihr Projekt importiert ist, können Sie ihn initialisieren. Der Konstruktor nimmt zwei Argumente: den Namen der Berichtssuite und das Zielverzeichnis für die Berichte. Ihre Initialisierungsanweisung sollte ungefähr so aussehen:

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

Nachdem ein Axe DevTools Scan ausgeführt wurde, sind zum Ausführen des Reporters zwei Schritte erforderlich. Zunächst müssen die Ergebnisse protokolliert werden, damit der Reporter darauf zugreifen kann. Anschließend verarbeitet der Reporter diese Ergebnisse in den Bericht.

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

Beispieldatei

Diese Beispieldatei verwendet dieselbe Basis wie das Beispiel Tests schreiben , integriert aber auch den Reporter.

const rimraf = require('rimraf');
const AxeDevtoolsBuilder = require('@axe-devtools/playwright').default;
const playwright = require('playwright');
const Reporter = require('@axe-devtools/reporter').default;

(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 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.

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.