Générer des rapports à partir des résultats JSON de axe DevTools

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

Utilisation du package @axe-devtools/reporter pour générer des rapports

Not for use with personal data

Utilisez le reporter axe DevTools avec Playwright pour produire des rapports d'accessibilité pour les pages scannées

Générer des rapports est désormais aussi facile que de lancer des analyses. Avec le reporter axe DevTools, vous pouvez générer des rapports HTML immédiatement visibles, des rapports JUnit XML pour les environnements de test CI, et des rapports CSV à importer dans une multitude d'autres outils. Ce guide détaille comment installer, configurer et utiliser le reporter axe DevTools.

Prérequis

Pour utiliser le reporter axe DevTools, vous avez besoin d'un projet NodeJS existant pour y intégrer axe DevTools ainsi que le reporter. Cette partie du guide ne couvre que la configuration du reporter, donc si vous n'avez pas encore fait fonctionner axe DevTools pour les analyses, lisez ce guide sur la façon de lancer des analyses avec axe DevTools.

Installation du Reporter

Si vous avez déjà configuré votre ~/.npmrc fichier pour télécharger les packages npm de axe DevTools, il vous suffit d'exécuter la commande :

npm install @axe-devtools/reporter

Si vous n'avez pas encore configuré votre authentification d'installation, lisez l'un des guides d'installation de base.

Ajout du Reporter à votre Projet

En dehors d'un module, axe DevTools est importé et une instance est créée avec une déclaration comme celle-ci :

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

Dans un module, la syntaxe est légèrement différente. La déclaration devrait ressembler à ceci :

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

Pour utiliser le reporter, votre bibliothèque axe DevTools et votre webdriver doivent également être importés aussi.

Options du Reporter

Il y a trois choix majeurs à faire lors de l'utilisation du reporter axe DevTools

Comment nommer les rapports
Où stocker les rapports
Quel format utiliser pour générer les rapports

Vous pouvez nommer les rapports comme vous le souhaitez. Lorsque vous initialisez le reporter, vous lui attribuez un nom de suite que tous les rapports générés avec cette instance partageront. Chaque rapport a également un nom assigné pour chaque analyse. L'emplacement, ou le répertoire, où seront stockés les rapports est également entièrement à votre discrétion. Cet emplacement de répertoire est également défini au niveau de l'instance, de sorte que tous les rapports générés sur une instance de reporter partageront un répertoire. Les formats de rapport optionnels sont HTML, recommandé pour une visualisation immédiate par l'utilisateur, JUnit XML, recommandé pour une utilisation dans des environnements CI, CSV, qui permet d'importer les résultats d'analyse dans d'autres outils, et EARL (Evaluation and Report Language), qui produit un document W3C EARL JSON-LD pour un rapport d'accessibilité lisible par machine.

Utilisation du Reporter

Une fois le reporter importé dans votre projet, vous pouvez l'initialiser. Le constructeur prend deux arguments : le nom de la suite de rapports et le répertoire de destination pour les rapports. Votre déclaration d'initialisation devrait ressembler à ceci :

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

Il y a deux étapes pour exécuter le reporter une fois qu'une analyse axe DevTools a été effectuée. Tout d'abord, les résultats doivent être enregistrés pour que le reporter puisse y accéder. Ensuite, le reporter traite ces résultats dans le rapport.

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

Exemple de fichier

Ce fichier exemple utilise la même base que le test d'écriture exemple, mais il intègre également le 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();
})();

Dépannage

Si vous rencontrez des problèmes pour obtenir les résultats d'analyse, contactez directement votre représentant Deque, joignez-nous via notre service d'assistance, ou envoyez-nous un email. Nous serons ravis de vous aider.

Voir aussi

Téléchargement des résultats d'accessibilité JSON dans les rapports axe décrit comment télécharger vos résultats dans les rapports axe.
Obtention d'une clé API Axe Reports explique comment obtenir une clé API pour commencer à utiliser Axe Reports.
Création et filtrage de rapports montre comment vous pouvez créer des rapports d'accessibilité au format CSV, XML ou HTML à partir de vos résultats d'accessibilité JSON. Vous pouvez également filtrer votre sortie par gravité à l'aide de cet outil.
Comment les résultats JSON sont stockés sur le disque décrit les conventions de nommage des fichiers pour les résultats d'accessibilité JSON.