Rapporten genereren van Axe DevTools JSON-resultaten

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

Gebruik van het @axe-devtools/reporter pakket voor het genereren van rapporten

Not for use with personal data

Gebruik de Axe DevTools rapportagefunctie met Playwright om toegankelijkheidsrapporten te produceren voor gescande pagina's

Rapporten genereren is nu net zo eenvoudig als het uitvoeren van scans. Met de Axe DevTools rapportagefunctie kun je direct leesbare HTML-rapporten genereren, JUnit XML-rapporten voor weergave in CI-testomgevingen en CSV-rapporten om in een veelheid aan andere tools te importeren. Deze gids beschrijft hoe je de Axe DevTools rapportagefunctie installeert, instelt en gebruikt.

Vereisten

Om de Axe DevTools rapportagefunctie te gebruiken, heb je een bestaand NodeJS-project nodig om Axe DevTools en de rapportagefunctie in te integreren. Dit deel van de gids behandelt alleen de installatie van de rapportagefunctie, dus als je Axe DevTools nog niet hebt draaien voor scans, lees dan deze gids over hoe je scans uitvoert met Axe DevTools.

Installeren van de Reporter

Als je je ~/.npmrc bestand al hebt geconfigureerd om Axe DevTools npm-pakketten te downloaden, hoef je alleen maar het volgende commando uit te voeren:

npm install @axe-devtools/reporter

Als je de authenticatie voor de installatie nog niet hebt geconfigureerd, lees dan een van de basis installatiehandleidingen.

De Reporter toevoegen aan je Project

Buiten een module wordt Axe DevTools geïmporteerd en een instantie gemaakt met een instructie als deze:

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

Binnen een module is de syntaxis iets anders. De uitspraak moet er als volgt uitzien:

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

Om de rapportagefunctie te gebruiken, moeten je Axe DevTools-bibliotheek en webdriver ook geïmporteerd worden.

Reportermogelijkheden

Er zijn drie belangrijke keuzes die je moet maken bij het gebruik van de Axe DevTools rapportagefunctie

  1. Hoe je de rapporten gaat noemen
  2. Waar je de rapporten gaat opslaan
  3. In welk formaat je de rapporten gaat genereren

Je kunt de rapporten noemen zoals je wilt. Wanneer je de reporter initialiseert, geef je een suitenaam om mee te geven, die alle rapporten die met die instantie worden gegenereerd, zullen delen. Elk rapport bevat ook een naam die aan elke scan afzonderlijk wordt toegewezen. De locatie of directory waar de rapporten worden opgeslagen, is ook volledig aan de gebruiker. Deze locatie is ook ingesteld op instansieniveau, zodat alle rapporten die op één reporterinstantie worden gegenereerd, een directory delen. De optionele rapportformaten zijn HTML, die we aanbevelen voor directe gebruikersweergave, JUnit XML, die we aanbevelen voor gebruik in CI-omgevingen, CSV, waarmee de scanresultaten kunnen worden geïmporteerd in andere tools, en EARL (Evaluation and Report Language), die een W3C EARL JSON-LD-document output voor machinaal leesbare toegankelijkheidsrapportage.

De Reporter gebruiken

Zodra de reporter in je project is geïmporteerd, kun je deze initialiseren. De constructor neemt twee argumenten: de reportsuitennaam en de doelmap voor de rapporten. Je initialisatie-uitspraak moet er ongeveer zo uitzien:

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

Er zijn twee stappen om de rapportagefunctie te gebruiken nadat een Axe DevTools-scan is uitgevoerd. Eerst moeten de resultaten worden gelogd zodat de rapportagefunctie er toegang toe heeft. Vervolgens verwerkt de rapportagefunctie deze resultaten in het rapport.

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

Voorbeeldbestand

Dit voorbeeldbestand gebruikt dezelfde basis als het tests schrijven-voorbeeld, maar het integreert ook de rapportagefunctie.

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

Problemen oplossen

Als je problemen ondervindt bij het verkrijgen van scanresultaten, neem dan direct contact op met je Deque-vertegenwoordiger, bereik ons via onze support desk, of stuur ons een e-mail. We helpen je graag.

Zie ook

Is this page helpful?

Help us improve this page

Still need help?