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.

Voraussetzungen

Um Seiten mit Axe DevTools zu testen, müssen Sie es zuerst in Ihr Projekt importieren und initialisieren. Wenn Sie diesen Schritt noch nicht abgeschlossen haben, schauen Sie sich diesem Leitfaden an, wie es geht.

Erhalten 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

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

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.