Berichte aus Axe DevTools JSON-Ergebnissen generieren

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

Verwenden des @axe-devtools/reporter-Pakets zur Berichtserstellung

Not for use with personal data

Verwenden Sie den Axe DevTools Reporter mit Playwright, um Barrierefreiheitsberichte für gescannte Seiten zu erstellen

Berichte zu generieren ist jetzt genauso einfach wie Scans durchzuführen. Mit dem Axe DevTools Reporter können Sie sofort anzeigbare HTML-Berichte, JUnit XML-Berichte zur Anzeige in CI-Testumgebungen und CSV-Berichte zur Integration in eine Vielzahl anderer Tools erstellen. Diese Anleitung beschreibt, wie Sie den Axe DevTools Reporter installieren, einrichten und verwenden.

Voraussetzungen

Um den Axe DevTools Reporter zu verwenden, benötigen Sie ein bestehendes NodeJS-Projekt, in das Sie Axe DevTools sowie den Reporter integrieren können. Dieser Abschnitt der Anleitung deckt nur die Einrichtung des Reporters ab. Wenn Sie noch keine Scans mit Axe DevTools durchführen, lesen Sie diesen Leitfaden, um zu erfahren, wie Sie Scans mit Axe DevTools durchführen.

Installation des Reporters

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

npm install @axe-devtools/reporter

Falls Sie Ihre Installationsauthentifizierung noch nicht eingerichtet 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 zu verwenden, müssen auch Ihre Axe DevTools-Bibliothek und der Webdriver importiert werden.

Reporter-Optionen

Es gibt drei wichtige Entscheidungen, die Sie treffen müssen, wenn Sie den Axe DevTools Reporter verwenden

Wie Sie die Berichte benennen
Wo Sie die Berichte speichern möchten
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, um den Reporter auszuführen, sobald 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 Basis 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 Schwierigkeiten haben, Scanergebnisse zu erhalten, wenden Sie sich direkt an Ihren Deque-Ansprechpartner, kontaktieren 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 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.