Scrivere Test per Axe DevTools per il Web con Playwright

Scrivere test con Axe DevTools

Produrre risultati di scansione dell'accessibilità con Axe DevTools può essere facile quanto una riga di codice. Questi risultati possono essere utilizzati grezzi, in combinazione con 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 su come farlo.

Ottenere il Contesto di Scansione

Prima di poter eseguire una scansione della pagina per l'accessibilità, deve essere acceduta tramite Playwright.

//Launch the Playwright Driver
const browser = await playwright.chromium.launch();
//Create a new browser context
const context = await browser.newContext();
//Create a new page in the browser
const page = await context.newPage();
//Send the browser to the desired page to scan
await page.goto('$URL');

Scavalcare la Content Security Policy

Se la pagina che stai cercando di scansionare ha la Content Security Policy abilitata, potresti incontrare problemi. In caso di problemi, Axe DevTools include una soluzione. Basta includere questa dichiarazione dopo che la pagina è stata creata:

await context = await browser.newContext({ bypassCSP: true })

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

const results = await new AxeDevToolsBuilder({ page }).analyze();
console.log(results);

File di Esempio Completo

const playwright = require('playwright');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');

(async () => {

    //Launch the Playwright Driver
    const browser = await playwright.chromium.launch();
    //Create a new browser context
    const context = await browser.newContext();
    //Create a new page in the browser
    const page = await context.newPage();

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

    //analyze page
    const results = await new AxeDevToolsBuilder({ 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 per passare a temi di scansione più avanzati come generare report e utilizzare 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 servizio clienti, o inviarci un'email. Saremo felici di aiutarti.