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

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 Playwright darauf zugreifen.

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

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 context = await browser.newContext({ bypassCSP: true })

Sobald Playwright 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 AxeDevtoolsBuilder({ page }).analyze();
console.log(results);

Vollständige Beispieldatei

const playwright = require('playwright');
const AxeDevtoolsBuilder = require('@axe-devtools/playwright').default;

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

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.