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.

Die einzelnen Codeausschnitte in den folgenden Abschnitten sind JavaScript und können unverändert in TypeScript kompiliert werden. Der Vollständige Beispieldatei Abschnitt 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. Falls Sie dies noch nicht getan haben, lesen Sie die Anleitung zur Installation aus einem Bundle, aus Ihrem Artefakt-Repository oder aus Deques Agora. Außerdem benötigen Sie eine heruntergeladene und konfigurierte Version von Playwright Ihrer Wahl.

Importieren und Initialisieren

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

JavaScript mit CommonJS-Modulen

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

const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');

JavaScript mit ES-Modulen

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

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';

TypeScript

TypeScript verwendet die gleiche import-Syntax wie ES-Module. @axe-devtools/playwright liefert seine eigenen Typdeklarationen mit, so dass kein separates @types/-Paket installiert werden muss. Scan-Ergebnisse werden als AxeResults typisiert, die axe-core exportiert:

import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import * as playwright from 'playwright';
import type { AxeResults } from 'axe-core';

Initialisierung von Playwright

Sobald Sie Axe DevTools für Web importiert haben, können Sie den Treiber initialisieren. Jeder Scan erfordert eine eigene Instanz von Axe DevTools für Web, daher initialisieren Sie diese, während Sie Tests schreiben.

Der Initialisierungscode ist in JavaScript und TypeScript gleich, mit der Ausnahme, dass TypeScript die von Playwright zurückgegebenen Typen ableiten oder annotieren kann. In JavaScript:

// This will open up a headless instance of chromium
const browser = await playwright.chromium.launch();
const context = await browser.newContext();
const page = await context.newPage();

In TypeScript, mit ausgeschriebenen Typen:

import type { Browser, BrowserContext, Page } from 'playwright';

// This will open up a headless instance of chromium
const browser: Browser = await playwright.chromium.launch();
const context: BrowserContext = await browser.newContext();
const page: Page = await context.newPage();

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

Umgehung der Content Security Policy

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

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

JavaScript

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

TypeScript

import * as playwright from 'playwright';
import type { Browser, BrowserContext, Page } from 'playwright';
import { AxeDevToolsBuilder } from '@axe-devtools/playwright';
import type { AxeResults } from 'axe-core';

(async () => {

    //Launch the Playwright Driver
    const browser: Browser = await playwright.chromium.launch();
    //Create a new browser context
    const context: BrowserContext = await browser.newContext();
    //Create a new page in the browser
    const page: Page = await context.newPage();

    //launch page for testing (has intentional accessibility issues)
    await page.goto('https://broken-workshop.dequelabs.com');

    //analyze page
    const results: AxeResults = await new AxeDevToolsBuilder({ page }).analyze();

    //log results
    console.log(results);

    //close webdriver
    await 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.