Tests schrijven voor Axe DevTools for Web voor Puppeteer

Tests schrijven met Axe DevTools

Het produceren van toegankelijkheidsscanresultaten met Axe DevTools kan zo eenvoudig zijn als één regel code. Deze resultaten kunnen onbewerkt worden gebruikt, samen met een assertiebibliotheek, of om toegankelijkheidsrapporten te maken.

Vereisten

Om pagina's te testen met Axe DevTools, moet het eerst worden geïmporteerd en geïnitialiseerd in je project. Als je deze stap nog niet hebt voltooid, bekijk dan deze gids hoe je dit doet.

Scancontext verkrijgen

Voordat je een pagina kunt scannen op toegankelijkheid, moet deze worden geopend door 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');

Content Security Policy omzeilen

Als de pagina die je wilt scannen Content Security Policy ingeschakeld heeft, kun je problemen ondervinden. Mocht je dit probleem tegenkomen, dan biedt Axe DevTools een oplossing. Voeg simpelweg deze instructie toe nadat je pagina is gecreëerd:

await page.setBypassCSP(true);

Zodra Puppeteer de pagina heeft geopend, kun je deze scannen met Axe DevTools en de resultaten opslaan. De eenvoudigste manier om de resultaten van de scan te bekijken, is door het resultatenobject in de console te loggen.

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

Volledig Voorbeeldbestand

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

Volgende Stappen

Nu je met succes een toegankelijkheidsscan hebt voltooid, ben je klaar om door te gaan naar meer geavanceerde scanthema's zoals rapporten genereren en het resultatenobject gebruiken.

Problemen Oplossen

Als je problemen hebt met het verkrijgen van scanresultaten, neem dan rechtstreeks contact op met je Deque-vertegenwoordiger, bereik ons via onze ondersteuningsdesk, of stuur ons een e-mail. We helpen je graag.