Generazione di rapporti dai risultati JSON di 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

Utilizzo del pacchetto @axe-devtools/reporter per generare rapporti

Not for use with personal data

Utilizza il reporter di axe DevTools con Playwright per produrre rapporti di accessibilità per le pagine scansionate

Generare rapporti è ora facile quanto eseguire le scansioni. Con il reporter di axe DevTools, puoi generare rapporti HTML visualizzabili immediatamente, rapporti XML JUnit per la visualizzazione in ambienti di test CI e rapporti CSV da importare in una moltitudine di altri strumenti. Questa guida spiega come installare, configurare e utilizzare il reporter di axe DevTools.

Prerequisiti

Per utilizzare il reporter di axe DevTools, hai bisogno di un progetto NodeJS esistente in cui integrare sia axe DevTools che il reporter. Questa parte della guida copre solo la configurazione del reporter, quindi se non stai già eseguendo scansioni con axe DevTools, leggi questa guida su come eseguire scansioni con axe DevTools.

Installare il Reporter

Se hai già configurato il tuo ~/.npmrc file per scaricare i pacchetti npm di axe DevTools, tutto ciò che devi fare è eseguire il comando:

npm install @axe-devtools/reporter

Se non hai ancora configurato l'autenticazione dell'installazione, leggi una delle guide all'installazione di base.

Aggiungere il Reporter al tuo Progetto

Al di fuori di un modulo, axe DevTools viene importato e si crea un'istanza con una dichiarazione come questa:

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

All'interno di un modulo, la sintassi è leggermente diversa. La dichiarazione dovrebbe apparire così:

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

Per utilizzare il reporter, la tua libreria axe DevTools e il webdriver dovranno essere importati anche.

Opzioni del Reporter

Ci sono tre scelte principali che devi fare quando usi il reporter di axe DevTools

Come nominare i rapporti
Dove memorizzare i rapporti
In quale formato generare i rapporti

Puoi nominare i rapporti come preferisci. Quando inizializzi il reporter, gli passi un nome di suite che tutti i rapporti generati con quell'istanza condivideranno. Ogni rapporto include anche un nome assegnato a ciascuna scansione. Anche la posizione, o directory, in cui verranno memorizzati i rapporti è completamente a discrezione dell'utente. Questo percorso directory è impostato anche a livello di istanza, quindi tutti i rapporti generati su un'istanza di reporter condivideranno una directory. I formati opzionali dei rapporti sono HTML, che consigliamo per la visualizzazione immediata da parte dell'utente, JUnit XML, che consigliamo per l'uso in ambienti CI, CSV, che consente di importare i risultati delle scansioni in altri strumenti, e EARL (Evaluation and Report Language), che genera un documento W3C EARL JSON-LD per rapporti di accessibilità leggibili da macchina.

Utilizzo del Reporter

Una volta importato il reporter nel tuo progetto, puoi inizializzarlo. Il costruttore accetta due argomenti: il nome della suite di rapporti e la directory di destinazione per i rapporti. La tua dichiarazione di inizializzazione dovrebbe apparire in questo modo:

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

Ci sono due passaggi per eseguire il reporter una volta che una scansione di axe DevTools è stata eseguita. Innanzitutto, i risultati devono essere registrati per accesso del reporter. Quindi, il reporter elabora questi risultati nel rapporto.

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

File di esempio

Questo file di esempio utilizza la stessa base dell' esempio di scrittura di test , ma integra anche il 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();
})();

Risoluzione dei Problemi

Se hai problemi a ottenere i risultati delle scansioni, contatta direttamente il tuo rappresentante Deque, raggiungici tramite il nostro desk di supporto, oppure inviaci un'email. Saremo felici di aiutarti.

Vedi Anche

Caricamento dei risultati di accessibilità JSON su axe Reports descrive come caricare i risultati su axe Reports.
Ottenere una chiave API per axe Reports spiega come ottenere una chiave API per iniziare a utilizzare axe Reports.
Creazione e filtraggio di report mostra come creare report di accessibilità in formato CSV, XML o HTML a partire dai risultati di accessibilità JSON. Utilizzando questo strumento puoi anche filtrare l'output in base alla gravità.
Come vengono archiviati i risultati JSON su disco descrive le convenzioni di denominazione dei file per i risultati di accessibilità JSON.