Generazione di report 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 la generazione di report

Not for use with personal data

Utilizzare il reporter axe DevTools con Playwright per produrre report di accessibilità per le pagine scansionate

Ora generare report è facile quanto eseguire scansioni. Con il reporter axe DevTools puoi generare report HTML immediatamente visualizzabili, report XML JUnit da visualizzare in ambienti di test CI e report CSV da importare in una moltitudine di altri strumenti. Questa guida spiega come installare, configurare e utilizzare il reporter axe DevTools.

Prerequisiti

Per poter utilizzare il reporter di axe DevTools, è necessario un progetto NodeJS esistente in cui integrare sia axe DevTools che il reporter. Questa parte della guida riguarda solo la configurazione del reporter, quindi se axe DevTools non esegue ancora scansioni, leggi questa guida su come eseguire scansioni con axe DevTools.

Installazione del 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 di installazione di base.

Aggiungere il Reporter al tuo progetto

Al di fuori di un modulo, axe DevTools viene importato e viene creata un'istanza con un'istruzione come questa:

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

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

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

Per poter utilizzare il reporter, sarà necessario importare anche la libreria axe DevTools e il webdriver.

Opzioni del reporter

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

Come nominare i report
Dove archiviare i report
In quale formato generare i report

Puoi dare ai report il nome che preferisci. Quando si inizializza il reporter, gli si passa un nome di suite che verrà condiviso da tutti i report generati con quell'istanza. Ogni report include anche un nome assegnato per ogni scansione. Anche la posizione o directory in cui verranno archiviati i report è a discrezione dell'utente. Questa posizione della directory è impostata anche a livello di istanza, quindi tutti i report generati su un'istanza del reporter condivideranno una directory. I formati di report opzionali sono HTML, che consigliamo per la visualizzazione immediata da parte dell'utente, JUnit XML, che consigliamo per l'uso in ambienti CI, e CSV, che consente di importare i risultati della scansione in altri strumenti.

Utilizzo del reporter

Una volta importato il reporter nel progetto, è possibile inizializzarlo. Il costruttore accetta due argomenti: il nome della suite di report e la directory di destinazione per i report. La tua istruzione di inizializzazione dovrebbe assomigliare a questa:

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

Una volta eseguita una scansione con axe DevTools, per avviare il reporter sono necessari due passaggi. Innanzitutto, i risultati devono essere registrati affinché il reporter possa accedervi. Poi, il reporter elabora questi risultati nel report.

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

File di esempio

Questo file di esempio utilizza la stessa base dell'esempio scrittura dei test , ma integra anche il reporter.

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

Risoluzione dei problemi

In caso di problemi con l'ottenimento dei risultati della scansione, contattare direttamente il rappresentante Deque, contattarci tramite il nostro support desk o inviarci un'e-mail. Saremo lieti di aiutarti.

Vedere 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.