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 Ihrer Testdatei oder Ihren Testdateien die webdriverConfig()-Funktion, die wrapWebdriver()-Funktion und die WebdriverController-Klasse von @axe-core/watcher/webdriver:

    const {
      webdriverConfig,
      wrapWebdriver,
      WebdriverController
    } = require('@axe-core/watcher/webdriver')
  3. Aktualisieren Sie Ihren Testeinrichtungscode (typischerweise in einem before- oder beforeAll-Block) und geben Sie Chrome-Optionen an, wenn Sie Ihre browser-Instanz instanziieren und Ihren API-Schlüssel angeben:

    // Original code:
    let browser = await new Builder()
      .forBrowser('chrome')
      .build()
    
    // Becomes:
    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    const SERVER_URL = process.env.SERVER_URL
    
    let browser = await new Builder()
      .forBrowser('chrome')
      .setChromeOptions(
        webdriverConfig({
          axe: {
            apiKey: ACCESSIBILITY_API_KEY,
            projectId: PROJECT_ID,
            serverURL: SERVER_URL
          }
        }
      )
      .build()

    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. Erstellen Sie eine Instanz der WebdriverController:

    const controller = new WebdriverController(browser)
    note

    Wenn Sie Screenshot-Erfassung (takeScreenshots: true) aktivieren, beachten Sie, dass WebdriverController die Screenshot-Erfassung in @axe-core/watcher 4.6.0 nicht implementiert. Um Screenshots aufzunehmen, unterklassen Sie WebdriverController, überschreiben Sie captureScreenshot(), um die eigene takeScreenshot()-Methode von Selenium aufzurufen, und instanziieren Sie Ihre Unterklasse:

    class ScreenshotWebdriverController extends WebdriverController {
      async captureScreenshot() {
        return await this.driver.takeScreenshot()
      }
    }
    
    const controller = new ScreenshotWebdriverController(browser)
  5. Umschließen Sie Ihre browser-Instanz mit der wrapWebdriver()-Funktion:

    browser = wrapWebdriver(browser, controller)
  6. Stellen Sie schließlich sicher, dass alle Testergebnisse von Axe Watcher ausgegeben werden. Fügen Sie dazu den folgenden Codeblock zu Ihrem Testabbau-Code hinzu (typischerweise in einem afterEach-Block):

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