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.

De individuele fragmenten in de onderstaande secties zijn JavaScript en worden zonder wijzigingen gecompileerd in TypeScript. De Volledig Voorbeeldbestand sectie geeft de volledige test in beide talen.

Vereisten

Om Axe DevTools voor Web te importeren en te initialiseren, moet het eerst geïnstalleerd zijn. Als je dat nog niet gedaan hebt, lees dan de handleiding over hoe je het installeert vanuit een bundel, vanuit je artefactopslagplaats, of vanuit Deque's Agora. Je hebt ook een gedownloade en geconfigureerde versie van Playwright naar keuze nodig.

Importeren en Initialiseren

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

JavaScript met CommonJS-modules

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

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

JavaScript met ES-modules

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

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';

TypeScript

TypeScript gebruikt dezelfde import-syntax als ES-modules. @axe-devtools/playwright levert zijn eigen typedeclaraties, dus er is geen apart @types/-pakket om te installeren. Scanresultaten zijn getypt als AxeResults, wat door axe-core wordt geëxporteerd:

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import type { AxeResults } from 'axe-core';

Playwright Initialiseren

Zodra je Axe DevTools voor Web hebt geïmporteerd, kun je de driver initialiseren. Elke scan vereist zijn eigen exemplaar van Axe DevTools voor Web, dus je initialiseert dat tijdens het schrijven van tests.

De initialisatiecode is hetzelfde in JavaScript en TypeScript, behalve dat TypeScript de typen kan afleiden of annoteren die Playwright retourneert. In JavaScript:

// This will open up a headless instance of chromium
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

In TypeScript, met de typen uitgeschreven:

import type { Browser, BrowserContext, Page } from 'playwright';

// This will open up a headless instance of chromium
const browser: Browser = await playwright.chromium.launch();
const context: BrowserContext = await browser.newContext();
const page: Page = await context.newPage();

Scancontext ophalen

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

Dezelfde test wordt hieronder getoond in JavaScript en in TypeScript. De Axe DevTools API is in beide hetzelfde; de TypeScript-versie gebruikt import syntaxis en annoteert de waarden Playwright en de scan-uitvoer.

JavaScript

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

TypeScript

import * as playwright from 'playwright';
import type { Browser, BrowserContext, Page } from 'playwright';
import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import type { AxeResults } from 'axe-core';

(async () => {

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

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

    //analyze page
    const results: AxeResults = await new AxeDevToolsBuilder({ 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 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.