Schreiben von Tests für axe DevTools for Web für Puppeteer

Schreiben von Tests mit axe DevTools

Das Erstellen von Ergebnissen zum Zugänglichkeitsscan mit axe DevTools kann so einfach sein wie eine Codezeile. Diese Ergebnisse können im Rohzustand verwendet, in Verbindung mit einer Assertion-Bibliothek genutzt oder zum Erstellen von Zugänglichkeitsberichten 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, erfahren Sie in dieser Anleitung , wie es geht.

Scan-Kontext abrufen

Bevor Sie eine Seite auf Barrierefreiheit prüfen 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');

Umgehen der Inhaltssicherheitsrichtlinie

Wenn auf der Seite, die Sie scannen möchten, Content Security Policy aktiviert ist, kann es zu Problemen kommen. Wenn dieses Problem bei Ihnen auftritt, bietet axe DevTools eine Lösung. Fügen Sie nach der Erstellung Ihrer Seite einfach diese Anweisung ein:

await page.setBypassCSP(true);

Sobald Puppeteer auf die Seite zugegriffen hat, können Sie sie mit axe DevTools scannen und die Ergebnisse speichern. Die einfachste Möglichkeit, die Ergebnisse des Scans anzuzeigen, besteht darin, das Ergebnisobjekt zu console log.

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 nun erfolgreich einen Zugänglichkeitsscan abgeschlossen haben, können Sie mit fortfahren, fortgeschritteneren Scan-Themen wie Erstellen von Berichten und Verwenden des Ergebnisobjekts.

Fehlerbehebung

Wenn Sie Probleme beim Abrufen der Scanergebnisse haben, wenden Sie sich direkt an Ihren Deque-Vertreter, erreichen Sie uns über unseren Support-Desk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.