Anleitungen für WebDriverJS und TypeScript

This page is not available in the language you requested. You have been redirected to the English version of the page.

Link to this page copied to clipboard

Konfiguration Ihrer Tests mit WebDriverJS und TypeScript

Not for use with personal data

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.

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
```
Importieren Sie in Ihrer Testdatei oder Ihren Testdateien die webdriverConfig() Funktion, die wrapWebdriver() Funktion und die WebdriverController Klasse aus @axe-core/watcher/webdriver:
```
import {
  webdriverConfig,
  wrapWebdriver,
  WebdriverController
} from '@axe-core/watcher/webdriver'
```
Aktualisieren Sie Ihren Test-Setup-Code (typischerweise in einem before- oder beforeAll-Block), indem Sie Chrome-Optionen angeben, wenn Sie Ihre browser Instanz instanziieren, und geben Sie Ihren API-Schlüssel an:
```
// Original code:
const 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

const 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.
Erstellen Sie eine Instanz von 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 zu erfassen, erstellen Sie eine Unterklasse von WebdriverController, überschreiben Sie captureScreenshot(), um die eigene takeScreenshot()-Methode von Selenium aufzurufen, und instanziieren Sie stattdessen Ihre Unterklasse:
```
class ScreenshotWebdriverController extends WebdriverController {
  async captureScreenshot() {
    return await this.driver.takeScreenshot()
  }
}

const controller = new ScreenshotWebdriverController(browser)
```
Umschließen Sie Ihre browser Instanz mit der wrapWebdriver() Funktion:
```
browser = wrapWebdriver(browser, controller)
```
Stellen Sie schließlich sicher, dass alle Testergebnisse von Axe Watcher geleert werden. Fügen Sie dazu den folgenden Codeblock zu Ihrem Test-Teardown-Code hinzu (typischerweise in einem afterEach-Block):
```
afterEach(async () => {
  await controller.flush()
})
```

Anleitungen für WebDriverJS und TypeScript

Is this page helpful?

Help us improve this page

Still need help?