Génération de rapports à partir des résultats JSON d'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 paquet @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 analysées

Générer des rapports est désormais aussi simple que d’exécuter des analyses. Avec l'outil de rapport axe DevTools, vous pouvez générer des rapports HTML immédiatement visibles, des rapports XML JUnit à visualiser dans des environnements de test CI et des rapports CSV à importer dans une multitude d'autres outils. Ce guide détaille comment installer, configurer et utiliser l'outil de rapport axe DevTools.

Prérequis

Pour utiliser l'outil de rapport axe DevTools, vous avez besoin d'un projet NodeJS existant dans lequel intégrer axe DevTools ainsi que l'outil de rapport. Cette partie du guide ne couvre que la configuration du Reporter, donc si vous n'avez pas déjà axe DevTools en train d'exécuter des analyses, lisez ce guide pour savoir comment exécuter des analyses avec axe DevTools.

Installation du Reporter

Si vous avez déjà configuré votre ~/.npmrc fichier pour télécharger les packages npm 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.

Ajouter le Reporter à votre projet

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

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

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

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

Afin d'utiliser le reporter, votre bibliothèque axe DevTools et votre pilote Web devront également être importés .

Options du rapporteur

Il y a trois choix majeurs que vous devez le faire lorsque vous utilisez le reporter axe DevTools

Comment nommer les rapports
Où stocker les rapports
Dans quel format générer les rapports

Vous pouvez nommer les rapports comme vous le souhaitez. Lorsque vous initialisez le générateur de rapports, vous lui transmettez un nom de suite que tous les rapports générés avec cette instance partageront. Chaque rapport comprend également un nom attribué à chaque analyse. L'emplacement, ou le répertoire, dans lequel les rapports seront stockés dépend également entièrement de l'utilisateur. 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 facultatifs sont HTML, que nous recommandons pour une visualisation immédiate par l'utilisateur, JUnit XML, que nous recommandons pour une utilisation dans les environnements CI, et CSV, qui permet d'importer les résultats de l'analyse dans d'autres outils.

Utilisation du rapporteur

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 des rapports. Votre instruction d’initialisation devrait ressembler à ceci :

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

L'exécution du générateur de rapport se déroule en deux étapes une fois qu'une analyse axe DevTools a été exécutée. Tout d’abord, les résultats doivent être enregistrés pour que le générateur de rapport puisse y accéder. Ensuite, le générateur de rapport traite ces résultats dans le rapport.

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

Fichier exemple

Ce fichier exemple utilise la même base que l'exemple tests d'écriture , mais il intègre également le rapporteur.

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

Dépannage

Si vous rencontrez des difficultés pour obtenir les résultats de l'analyse, contactez directement votre représentant Deque, contactez-nous via notre service d'assistance ou envoyez-nous un e-mail. Nous serons heureux 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.