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.

De afzonderlijke fragmenten in de onderstaande secties zijn JavaScript en ze compileren ongewijzigd in TypeScript. De Volledig Voorbeeldbestand sectie geeft de volledige test in beide talen weer.

Vereisten

Om Axe DevTools for Web te importeren en initialiseren, moet het eerst geïnstalleerd zijn. Als je dat nog niet hebt gedaan, lees dan de gids over hoe je het kunt installeren vanuit een bundel, vanuit je artefactrepository of vanuit Deque's Agora. Je hebt ook Puppeteer nodig, dat geïnstalleerd moet worden.

Importeren en Initialiseren

Importeer zowel Axe DevTools for Web als Puppeteer. De syntax hangt af van de taal en het modulesysteem dat je project gebruikt. Kies degene die bij je project past:

JavaScript met CommonJS-modules

Dit is de standaard voor een Node.js-project zonder "type": "module" in zijn package.json.

const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');
const puppeteer = require('puppeteer');

JavaScript met ES-modules

Gebruik deze syntax in een project met "type": "module" in zijn package.json, of in .mjs bestanden.

import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import puppeteer from 'puppeteer';

TypeScript

TypeScript gebruikt dezelfde import syntax als ES-modules. @axe-devtools/puppeteer levert zijn eigen typeverklaringen, dus er is geen apart @types/ pakket te installeren. Scanresultaten worden getypeerd als AxeResults, wat axe-core exporteert:

import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import puppeteer from 'puppeteer';
import type { AxeResults } from 'axe-core';

Voor elke scan wordt een nieuw AxeDevToolsPuppeteer object aangemaakt.

Scan Context 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

Dezelfde test wordt hieronder getoond in JavaScript en in TypeScript. De Axe DevTools API is in beide identiek; de TypeScript-versie gebruikt import syntax en annoteert de waarden Puppeteer en de scanuitvoer.

JavaScript

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

TypeScript

import puppeteer from 'puppeteer';
import type { Browser, Page } from 'puppeteer';
import { AxeDevToolsPuppeteer } from '@axe-devtools/puppeteer';
import type { AxeResults } from 'axe-core';

(async () => {

    //launch puppeteer web driver
    const browser: Browser = await puppeteer.launch();
    const page: Page = await browser.newPage();

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

    //analyze page
    const results: AxeResults = await new AxeDevToolsPuppeteer(page).analyze();

    //log results
    console.log(results);

    //close webdriver
    await 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.