Scrivere Test per axe DevTools per Web per Playwright

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 su come farlo.

Ottenere il contesto della scansione

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

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

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 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 è fare il console log dell'oggetto dei risultati.

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

File di esempio completo

const playwright = require('playwright');
const AxeDevtoolsBuilder = require('@axe-devtools/playwright').default;

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