Tests schrijven voor Axe DevTools voor Web voor Playwright

Tests schrijven met Axe DevTools

Toegankelijkheidsscanresultaten produceren met Axe DevTools kan net zo eenvoudig zijn als één regel code. Deze resultaten kunnen rauw worden gebruikt, samen met een assertielibrary, of om toegankelijkheidsrapporten te maken.

Vereisten

Om pagina's te testen met Axe DevTools, moet je deze eerst importeren en initialiseren in je project. Als je deze stap nog niet hebt voltooid, bekijk deze gids hoe je dit kunt doen.

Scancontext verkrijgen

Voordat je een pagina kunt scannen op toegankelijkheid, moet deze toegankelijk zijn via 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');

Contentbeveiligingsbeleid omzeilen

Als de pagina die je probeert te scannen een ingeschakeld contentbeveiligingsbeleid heeft, kun je problemen ondervinden. Als je dit probleem tegenkomt, biedt Axe DevTools een oplossing. Voeg eenvoudigweg deze verklaring toe nadat je pagina is aangemaakt:

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

Zodra Playwright toegang heeft tot de pagina, 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 resultaatobject in de console te loggen.

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

Volledig voorbeeldbestand

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

Volgende stappen

Nu je met succes een toegankelijkheidsscan hebt voltooid, ben je klaar om verder te gaan met meer geavanceerde scanningsonderwerpen zoals rapporten genereren en het resultaatobject gebruiken.

Probleemoplossing

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