Scrivere Test per Axe DevTools per Web con Puppeteer

Scrivere test con Axe DevTools

Produrre risultati di scansioni per l'accessibilità con Axe DevTools può essere facile come una riga di codice. Questi risultati possono essere utilizzati grezzi, insieme a una libreria di asserzioni, o per creare report di accessibilità.

Prerequisiti

Per testare le pagine con Axe DevTools, è necessario prima importarlo e inizializzarlo nel tuo progetto. Se non hai ancora completato questo passaggio, consulta questa guida su come fare.

Ottenere il Contesto di Scansione

Prima di poter scansionare una pagina per l'accessibilità, deve essere accessibile tramite Puppeteer.

//Launch the Puppeteer Driver
const browser = await puppeteer.launch();
//Create a new page in the browser
const page = await browser.newPage();
//Send the browser to the desired page to scan
await page.goto('$URL');

Evitare la Content Security Policy

Se la pagina che stai cercando di scansionare ha abilitato la Content Security Policy, potresti avere dei problemi. Se incontri questo problema, Axe DevTools include una soluzione. Basta includere questa istruzione dopo aver creato la tua pagina:

await page.setBypassCSP(true);

Una volta che Puppeteer ha accesso alla pagina, puoi scansionarla con Axe DevTools e salvare i risultati. Il modo più semplice per visualizzare i risultati della scansione è stampare su console l'oggetto dei risultati.

const results = await new AxeDevToolsPuppeteer(page).analyze();
console.log(results);

File di Esempio Completo

const puppeteer = require('puppeteer');
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');

(async () => {

    //launch puppeteer web driver
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    //launch page for testing
    await page.goto('https://broken-workshop.dequelabs.com');

    //analyze page
    const results = await new AxeDevToolsPuppeteer(page).analyze();
    
    //log results
    console.log(results);

    //close webdriver
    browser.close();
})();

Prossimi Passi

Ora che hai completato con successo una scansione per l'accessibilità, sei pronto per passare a argomenti di scansione più avanzati come generare report e usare l'oggetto dei risultati.

Risoluzione dei Problemi

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