Tests für Axe DevTools für Web für Playwright schreiben

Tests mit Axe DevTools schreiben

Ergebnisse von Barrierefreiheitsscans mit Axe DevTools zu erzeugen, kann so einfach wie eine einzige Codezeile sein. Diese Ergebnisse können roh verwendet, in Kombination mit einer Assertionsbibliothek genutzt oder für die Erstellung von Barriereberichte verwendet werden.

Voraussetzungen

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

Scan-Kontext erhalten

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

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

Content Security Policy umgehen

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

await context = await browser.newContext({ bypassCSP: true })

Sobald Playwright die Seite aufgerufen hat, können Sie sie mit Axe DevTools scannen und die Ergebnisse speichern. Die einfachste Möglichkeit, die Ergebnisse des Scans anzusehen, besteht darin, das Ergebnisobjekt im Konsolenprotokoll auszugeben.

const results = await new AxeDevToolsBuilder({ page }).analyze();
console.log(results);

Vollständige Beispieldatei

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

Nächste Schritte

Nachdem Sie nun erfolgreich einen Barrierefreiheitsscan durchgeführt haben, sind Sie bereit, zu fortgeschritteneren Scanthemen wie Berichte erstellen und das Ergebnisobjekt verwenden überzugehen.

Fehlerbehebung

Wenn Sie Probleme mit der Erzielung von Scan-Ergebnissen haben, kontaktieren Sie Ihren Deque-Ansprechpartner direkt, erreichen Sie uns über unseren Support-Desk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.