Schreiben von Tests für Axe DevTools für Web mit Puppeteer

Tests schreiben mit Axe DevTools

Barrierefreiheits-Scan-Ergebnisse mit Axe DevTools zu erzeugen, kann so einfach wie eine einzelne Codezeile sein. Diese Ergebnisse können roh verwendet, in Verbindung mit einer Assertionsbibliothek genutzt oder zur Erstellung von Barrierefreiheitsberichten verwendet werden.

Die einzelnen Schnipsel in den folgenden Abschnitten sind JavaScript und lassen sich unverändert in TypeScript kompilieren. Der Abschnitt Vollständige Beispieldatei enthält den vollständigen Test in beiden Sprachen.

Voraussetzungen

Um Axe DevTools für Web zu importieren und zu initialisieren, muss es zuerst installiert werden. Wenn Sie dies noch nicht getan haben, lesen Sie die Anleitung zur Installation aus einem Paket, aus Ihrem Artefakt-Repository oder von Deques Agora. Sie benötigen auch Puppeteer installiert.

Importieren und Initialisieren

Importieren Sie sowohl Axe DevTools für Web als auch Puppeteer. Die Syntax hängt von der Sprache und dem Modulsystem ab, das Ihr Projekt verwendet. Wählen Sie das aus, das zu Ihrem Projekt passt:

JavaScript mit CommonJS-Modulen

Dies ist der Standard für ein Node.js-Projekt ohne "type": "module" in dessen package.json.

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

JavaScript mit ES-Modulen

Verwenden Sie diese Syntax in einem Projekt mit "type": "module" in dessen package.json oder in .mjs-Dateien.

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

TypeScript

TypeScript verwendet die gleiche import-Syntax wie ES-Module. @axe-devtools/puppeteer liefert seine eigenen Typdeklarationen, sodass kein separates @types/-Paket installiert werden muss. Die Scanergebnisse sind typisiert als AxeResults, welches von axe-core exportiert wird:

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

Für jeden Scan wird ein neues AxeDevToolsPuppeteer-Objekt erstellt.

Abrufen des Scan-Kontexts

Bevor Sie eine Seite auf Barrierefreiheit scannen können, muss sie von Puppeteer aufgerufen werden.

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

Umgehung der Content Security Policy

Wenn die Seite, die Sie scannen möchten, eine aktivierte Content Security Policy hat, könnten Probleme auftreten. Falls Sie auf dieses Problem stoßen, bietet Axe DevTools eine Lösung an. Fügen Sie einfach diese Anweisung hinzu, nachdem Ihre Seite erstellt wurde:

await page.setBypassCSP(true);

Sobald Puppeteer die Seite aufgerufen hat, können Sie sie mit Axe DevTools scannen und die Ergebnisse speichern. Der einfachste Weg, die Scan-Ergebnisse anzusehen, ist das Konsolenprotokollieren des Ergebnisobjekts.

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

Vollständige Beispieldatei

Der gleiche Test wird unten in JavaScript und TypeScript gezeigt. Die Axe DevTools API ist in beiden identisch; die TypeScript-Version verwendet die import-Syntax und annotiert die Werte Puppeteer und den Scan-Rückgabewert.

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

Nächste Schritte

Nachdem Sie erfolgreich einen Barrierefreiheits-Scan abgeschlossen haben, können Sie sich mit fortgeschritteneren Themen beschäftigen, wie Berichte erstellen und das Ergebnisobjekt verwenden.

Fehlerbehebung

Wenn Sie Probleme mit den Scan-Ergebnissen haben, kontaktieren Sie direkt Ihren Deque-Vertreter, erreichen Sie uns über unseren Supportdesk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.