important

Axe Watcher erfordert einen unterstützten Browser, der bereits auf Ihrem System installiert ist: Chrome für Tests (eine separate Browserinstallation, die sich von Google Chrome unterscheidet), Chromium oder Microsoft Edge. Google Chrome, Version 139 oder höher, wird nicht unterstützt. Siehe Einrichtung und Konfiguration von Browsern für die Verwendung mit Axe Watcher für Installations- und Konfigurationsanweisungen.

  1. Im Stammverzeichnis Ihres Testordners installieren Sie das Paket @axe-core/watcher und alle seine Abhängigkeiten mit npm oder Ihrem bevorzugten Paketmanager (zum Beispiel yarn oder pnpm).

    npm install --save-dev @axe-core/watcher

  2. Importieren Sie in Ihren Testdateien die Funktion wdioConfig(), die Funktion wrapWdio() und die Klasse WdioController von @axe-core/watcher/wdio:

    const {
  wdioConfig,
  wrapWdio,
  WdioController
} = require('@axe-core/watcher/wdio')

  3. In Ihrem Test-Setup-Code (typischerweise in einem before- oder beforeAll-Block), umgeben Sie jeglichen vorhandenen Code zum Erstellen einer browser-Instanz mit einem Aufruf an wdioConfig(), während Sie Ihren API-Schlüssel bereitstellen:

    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
const PROJECT_ID = process.env.PROJECT_ID
const SERVER_URL = process.env.SERVER_URL

const browser = await wdio.remote(
  wdioConfig({
    axe: {
      apiKey: ACCESSIBILITY_API_KEY,
      projectId: PROJECT_ID,
      serverURL: SERVER_URL
    }
  })
)

    Stellen Sie sicher, dass Sie ACCESSIBILITY_API_KEY und PROJECT_ID in Ihrer Umgebung auf Ihren persönlichen API-Schlüssel (zu finden in Ihrem Axe-Konto, im **API-SCHLÜSSEL**-Tab) und Ihre Projekt-ID (angezeigt am oberen Rand dieser Anweisungen, als Sie Ihr Projekt erstellt haben, oder verfügbar auf der Seite „Projekte“ durch Auswahl von **Projekt konfigurieren** unter **Einstellungen**) setzen. Wenn Ihre Organisation eine regionale, private Cloud oder eine lokale Axe Developer Hub-Instanz verwendet, setzen Sie auch SERVER_URL auf die Basis-URL dieser Instanz (zum Beispiel https://axe-eu.deque.com); andernfalls lassen Sie SERVER_URL weg und der Standard https://axe.deque.com wird verwendet.

  4. Sobald Sie eine browser-Instanz haben, erstellen Sie eine Instanz der WdioController-Klasse:

    const controller = new WdioController(browser)

  5. Umgeben Sie Ihre browser-Instanz mit der Funktion wrapWdio(), indem Sie die browser-Instanz und die controller-Instanz bereitstellen:

    wrapWdio(browser, controller)

  6. Zum Schluss stellen Sie sicher, dass alle Testergebnisse von Axe Watcher ausgegeben werden. Fügen Sie dazu den folgenden Codeblock in Ihren Test-Teardown-Code ein (typischerweise in einem afterEach-Block):

    afterEach(async () => {
  await controller.flush()
})