Importieren und Initialisieren für Playwright

Sobald Sie Axe DevTools for Web installiert haben, müssen Sie es in Ihr Test-Setup importieren und das Paket initialisieren.

Voraussetzungen

Um Axe DevTools for Web zu importieren und zu initialisieren, muss es zuerst installiert werden. Wenn Sie das noch nicht getan haben, lesen Sie die Anleitung, wie es aus einem Bundle, aus Ihrem Artefakt-Repository, oder aus Deques Agora installiert wird. Außerdem benötigen Sie eine heruntergeladene und konfigurierte Playwright-Version 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 seiner 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 seiner 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, sodass kein separates @types/-Paket installiert werden muss. Scan-Ergebnisse sind als AxeResults typisiert, die von axe-core exportiert werden:

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

Initialisierung von Playwright

Sobald Sie Axe DevTools for Web importiert haben, können Sie den Treiber initialisieren. Jeder Scan erfordert eine eigene Instanz von Axe DevTools for Web, daher werden Sie diese beim Schreiben von Tests initialisieren.

Der Initialisierungscode ist in JavaScript und TypeScript derselbe, außer 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 den 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();

Nächste Schritte

Sobald Sie Axe DevTools for Web installiert, importiert und initialisiert haben, sind Sie bereit, mit dem Scannen auf Barrierefreiheit und dem Schreiben von Barrierefreiheitstests fortzufahren. Um das zu tun, sehen Sie sich die Anleitung zu Tests schreiben an.

Fehlerbehebung

Wenn Sie Probleme beim Importieren oder Initialisieren von Axe DevTools for Web haben, kontaktieren Sie direkt Ihren Deque-Vertreter, erreichen Sie uns über unseren Support-Desk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.