Générer des 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 package @axe-devtools/reporter pour générer des rapports

Not for use with personal data

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

Générer des rapports est maintenant aussi simple que de lancer des scans. Avec le rapporteur Axe DevTools, vous pouvez générer des rapports HTML immédiatement consultables, des rapports JUnit XML pour une visualisation dans les environnements de tests CI, et des rapports CSV à importer dans une multitude d'autres outils. Ce guide explique comment installer, configurer et utiliser le rapporteur Axe DevTools.

Prérequis

Pour utiliser le rapporteur Axe DevTools, vous avez besoin d'un projet NodeJS existant pour y intégrer Axe DevTools ainsi que le rapporteur. Cette partie du guide ne couvre que la configuration du rapporteur, donc si vous n'avez pas encore Axe DevTools effectuant des scans, lisez ce guide pour savoir comment effectuer des scans avec Axe DevTools.

Installation du Reporter

Si vous avez déjà configuré votre fichier ~/.npmrc pour télécharger les paquets npm d'Axe DevTools, tout ce que vous avez à faire est d'exécuter la commande :

npm install @axe-devtools/reporter

Si vous n'avez pas encore configuré l'authentification de votre 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 instruction 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 rapporteur, votre bibliothèque Axe DevTools et votre webdriver devront également être importés.

Options du Reporter

Il y a trois choix majeurs que vous devez faire lors de l'utilisation du rapporteur Axe DevTools

  1. Comment nommer les rapports
  2. Où stocker les rapports
  3. 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 rapporteur une fois qu'un scan Axe DevTools a été effectué. Tout d'abord, les résultats doivent être enregistrés pour que le rapporteur puisse y accéder. Ensuite, le rapporteur 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 l'exemple de test d'écriture, mais il intègre également le rapporteur.

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 avez des difficultés à obtenir les résultats des scans, contactez directement votre représentant Deque, contactez-nous via notre service d'assistance, ou envoyez-nous un email. Nous serons heureux de vous aider.

Voir aussi

Is this page helpful?

Help us improve this page

Still need help?