Importieren und Initialisieren von WebdriverIO

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

Voraussetzungen

Um Axe DevTools für Web zu importieren und zu initialisieren, muss es zuerst installiert werden. Wenn Sie dies noch nicht getan haben, lesen Sie die Anleitung zur Installation aus einem Bundle, aus Ihrem Artefakt-Repository oder aus Deques Agora. Sie müssen auch WebdriverIO heruntergeladen und konfiguriert haben.

Importieren und Initialisieren

Importieren Sie sowohl Axe DevTools für Web als auch WebdriverIO. 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 { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const webdriverio = require('webdriverio');

JavaScript mit ES-Modulen

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

import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';

TypeScript

TypeScript verwendet dieselbe import-Syntax wie ES-Module. @axe-devtools/webdriverio enthält seine eigenen Typdeklarationen, sodass kein separates @types/-Paket installiert werden muss. Scan-Ergebnisse sind typisiert als AxeResults, die von axe-core exportiert werden:

import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';
import type { AxeResults } from 'axe-core';

Den Client initialisieren

An diesem Punkt können Sie Ihren Webdriver innerhalb Ihrer Testfunktion initialisieren. In JavaScript:

const client = await webdriverio.remote({
  capabilities: {
    browserName: 'chrome'
  }
});

In TypeScript ist der Client ein WebdriverIO.Browser, was der Typ ist, den AxeDevToolsWebdriverIO erwartet:

const client: WebdriverIO.Browser = await remote({
  capabilities: {
    browserName: 'chrome'
  }
});

Anschließend können Sie Axe DevTools für Web mit dem Webdriver-Client initialisieren. Diese Anweisung ist in beiden Sprachen gleich:

const axeDevTools = new AxeDevToolsWebdriverIO({ client });

Nächste Schritte

Sobald Sie Axe DevTools für Web und seinen Treiber installiert, importiert und initialisiert haben, können Sie zur Barrierefreiheitsscans und zum Schreiben von Barrierefreiheitstests übergehen. Jeder Scan mit Axe DevTools für Web erfordert eine neue Instanz. Um Ihre Scans einzurichten und durchzuführen, lesen Sie die Anleitung zu Tests schreiben.

Fehlerbehebung

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