Scrittura dei test per axe DevTools per Web per Puppeteer

Scrittura di test con axe DevTools

Produrre risultati di scansioni di accessibilità con axe DevTools può essere semplice come scrivere una sola riga di codice. Questi risultati possono essere utilizzati direttamente, 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 progetto. Se non hai ancora completato questo passaggio, consulta questa guida per sapere come farlo.

Ottenere il contesto della scansione

Prima di poter analizzare una pagina per verificarne l'accessibilità, è necessario che Puppeteer vi abbia acceso.

//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');

Bypassare la politica di sicurezza dei contenuti

Se la pagina che stai tentando di scansionare ha i criteri di sicurezza dei contenuti abilitati, potresti avere dei problemi. Se riscontri questo problema, axe DevTools include una soluzione alternativa. Dopo aver creato la pagina, basta includere questa dichiarazione:

await page.setBypassCSP(true);

Una volta che Puppeteer ha avuto accesso alla pagina, puoi scansionarla con axe DevTools e salvare i risultati. Il modo più semplice per visualizzare i risultati della scansione è fare il console log dell'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 di accessibilità, sei pronto a passare ad argomenti di scansione più avanzati come generazione di report e utilizzo dell'oggetto risultati.

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.