API-Referenz für die JavaScript- und TypeScript-Version von Watcher

Dieser Referenzleitfaden beschreibt die von dem @axe-core/watcher-Paket bereitgestellten APIs (auch bekannt als Axe Watcher oder einfach Watcher) für JavaScript und TypeScript.

AxeConfiguration Schnittstelle

Die axe-Eigenschaft (ein Parameter, der an den Konfigurationsfunktionen übergeben wird) ist das übliche Mittel zur Änderung Ihrer AxeConfiguration für Axe Watcher, um Barrierefreiheitstests zu konfigurieren. Die folgenden Eigenschaften sind in AxeConfiguration enthalten:

apiKey

(Erforderlich) Der apiKey-Wert ist eine von zwei Eigenschaften (apiKey und projectId), die in Ihrem AxeConfiguration festgelegt werden müssen. Sie können seinen Wert von der Verwalten von API-Schlüsseln-Seite erhalten.

axe: {
  apiKey: process.env.AXE_DEVELOPER_HUB_API_KEY
}

autoAnalyze

(Optional) Setzen Sie diesen Wert auf false, um zu verhindern, dass Seiten automatisch analysiert werden. Für weitere Informationen über den manuellen Modus siehe Controlling Ihrer Scans.

axe: {
  autoAnalyze: false
}

buildID

(Optional) Die buildID-Eigenschaft, wenn sie nicht null ist, ermöglicht parallelen Testläufern, Ergebnisse zu generieren, die als ein einzelner Testlauf im Axe Developer Hub erscheinen. Im Falle paralleler Testläufe sollte jeder Testläufer die gleiche, nicht-null buildID-Zeichenkette teilen, wodurch jeder Testlauf seine Ergebnisse mit bestehenden Ergebnissen für die gleiche buildID und Git-Commit-SHA zusammenfügt. Wenn jedoch buildID null ist, bestehende mehrere Testläufe bestehende Ergebnisse mit der gleichen Git-Commit-SHA.

Siehe Tests parallel ausführen für weitere Informationen zur Verwendung von buildID mit verschiedenen Continuous-Integration-Anbietern.

axe: {
  buildID: process.env.CI_BUILD_ID
}

configurationOverrides

(Optional) Überschreibt Werte, die im globalen Konfiguration gesetzt sind. Siehe das ConfigurationOverrides-Schnittstelle für weitere Informationen.

axe: {
  configurationOverrides: {
    accessibilityStandard: 'WCAG 2.2 AA',
    bestPractices: true
  }
}

elementInternals

(Optional) Wenn true, sammelt Watcher ARIA-Rollen und -Eigenschaften, die über die ElementInternals-API von benutzerdefinierten Elementen gesetzt wurden, die attachInternals() verwenden. Dies reduziert falsche positive Ergebnisse auf Seiten, die benutzerdefinierte Elemente für interaktive Komponenten verwenden. Erfordert axe-core Version 4.12.0 oder höher.

axe: {
  elementInternals: true
}

excludeUrlPatterns

(Optional) Verhindert, dass jede URL, die mit einem der minimatch-Muster in dem excludeUrlPatterns-Array übereinstimmt, analysiert wird.

axe: {
  excludeUrlPatterns: [ 'https://*.example.com/**', 'https://example.org/**' ]
}

In URLs von der Analyse ausschließen finden Sie eine Tabelle von URLs und Beispielen von Mustern, um Übereinstimmungen zu überprüfen.

git

(Optional) Steuert, wie Watcher Git-Metadaten für den aktuellen Testlauf sammelt. Akzeptiert einen von drei Werten:

• true (Standard): Watcher sammelt automatisch Git-Informationen (Branch, Commit-SHA, Autor und andere Felder) mit dem lokalen Git-Binär.
• false: Deaktiviert die gesamte Git-Metadatensammlung. Verwenden Sie dies, wenn Sie in Umgebungen ohne Git arbeiten oder wenn die Git-Datensammlung nicht benötigt wird.
• Ein GitConfig-Objekt: Liefert explizite Git-Metadaten und überspringt die automatische Erkennung vollständig. Felder, die Sie auslassen, werden auf null standardmäßig gesetzt. Verwenden Sie dies, wenn Ihre Tests in einem Repository ausgeführt werden, das vom Repository unter Test getrennt ist, oder in CI-Umgebungen, in denen die automatische Git-Erkennung unzuverlässig ist.

Siehe Bereitstellen von Git-Metadaten für weitere Informationen.

Das GitConfig-Objekt hat die folgenden Felder:

branch, commitSha und url sind die gitvollen Felder: Eine Sitzung, die ohne alle drei eingereicht wird, wird als gitless aufgezeichnet und gespeichert, aber Axe Developer Hub wechselt zur gitlosen Sitzungsansicht, in der Zweig- und Commit-Geschichte aus vorherigen Sitzungen nicht sichtbar sein wird. Das Einreichen einer nachfolgenden Sitzung mit allen drei Feldern stellt die gitvolle Ansicht wieder her. Wenn nur eines oder zwei der drei vorhanden sind, verwirft Axe Watcher alle gitvollen Felder, zeichnet die Sitzung als gitlos auf und fügt der Antwort eine Warnung hinzu.

Beispiel zur Verwendung von CI-Umgebungsvariablen zur Angabe expliziter Git-Metadaten:

axe: {
  apiKey: process.env.AXE_DEVELOPER_HUB_API_KEY,
  projectId: process.env.AXE_PROJECT_ID,
  git: {
    commitSha: process.env.GIT_COMMIT,
    branch: process.env.GIT_BRANCH,
    url: process.env.GIT_URL,
    commitAuthor: process.env.GIT_AUTHOR_NAME,
    commitEmail: process.env.GIT_AUTHOR_EMAIL,
    commitMessage: process.env.GIT_COMMIT_MESSAGE,
    defaultBranch: 'main'
  }
}

projectId

(Erforderlich) Gibt die Projekt-ID an, die die Watcher-Zugänglichkeitsergebnisse erhalten wird. Ihre Projekt-ID wird mit den Anweisungen angezeigt, wenn Sie ein neues Projekt erstellen, und Sie können sie auch von der Axe Developer Hub Projekte Seite  erhalten.

axe: {
  projectId: process.env.AXE_PROJECT_ID
}

runContext

(Optional) Ermöglicht Ihnen die Wahl, welche Elemente in die Barrierefreiheitsanalyse Ihrer Seite ein- und ausgeschlossen werden.

Der Wert von runContext kann sein:

1. Ein einzelner CSS-Selektor für die einzuschließenden Elemente in der Analyse:

   axe: {
     runContext: '.main'
   }

2. Ein Array von CSS-Selektoren für die einzuschließenden Elemente in der Analyse:

   axe: {
     runContext: [ '.main', '.text-block' ]
   }

3. Ein Kontext-Objekt, das include und exclude-Eigenschaften enthält (wie im obigen Beispiel gezeigt). Sie können include oder exclude oder beide angeben. Jeder include oder exclude kann ein einzelner CSS-Selektor oder ein Array von CSS-Selektoren sein:

   axe: {
     runContext: {
       include: '.main',
       exclude: '.ad-section'
     }
   }

Mehr Details sind in der axe-core-Kontextdokumentation verfügbar.

runOptions

(Optional) Das runOptions-Objekt erlaubt das folgende Teilset von Eigenschaften aus dem axe-core Options-Typ:

• ancestry: Der Standard ist false. Wenn true, schließen die zurückgegebenen CSS-Selektoren auch die Vorfahrelemente der zurückgegebenen Elemente ein.

  important

  Wenn Ihre Seite dynamische IDs oder Klassen verwendet (Element-IDs oder -Klassen, die sich bei jedem Neuladen der Seite ändern), müssen Sie ancestry als true angeben, damit der Axe Developer Hub ordnungsgemäß erkennen und verfolgen kann, ob Zugänglichkeitsprobleme Duplikate sind, da der Axe Developer Hub standardmäßig erwartet, dass Element-IDs und -Klassen zwischen Testläufen gleich bleiben.

  Wenn ancestry true ist, verwendet der Axe Developer Hub stattdessen die Position des Elements innerhalb des DOM-Baums, um dasselbe Element zwischen Testläufen zu lokalisieren.

  Das folgende zeigt ein Beispiel eines Selektors, wenn ancestry false für ein iframe-Element mit einer ID von main-iframe ist (<iframe id="main-iframe" ...>):

  iframe#main-iframe

  Wenn ancestry true ist, würde der Selektor den gesamten Pfad vom Wurzelelement enthalten, und es sind keine IDs oder Klassen angegeben:

  html > body > div:nth-child(20) > div:nth-child(1) > div > div > ul > li:nth-child(1) > div > span > iframe

• runOnly: Dies ermöglicht es Ihnen, zu begrenzen, welche Regeln durch die Angabe von Namen oder Tags ausgeführt werden. Siehe runOnly unten für mehr Informationen.

• rules: Regeln aktivieren oder deaktivieren mithilfe der enabled-Eigenschaft. Siehe rules unten für mehr Informationen.

Das folgende zeigt ein Beispiel von runOptions:

axe: {
  runOptions: {
    ancestry: true,
    runOnly: {
      type: 'tag',
      values: [ 'wcag2a' ]
    },
    rules: {
      'ruleId1': { enabled: false },
      'ruleId2': { enabled: false }
    }
  }
}

runOnly

Der runOnly-Wert (Teil des runOptions-Objekts) kann einer der folgenden sein:

1. Ein String, der die Regel-ID der Regel darstellt, die Sie für die Barrierefreiheitsanalyse verwenden möchten:

   axe: {
     runOptions: {
       runOnly: 'ruleId'
     }
   }

2. Ein Array von Strings, das die Regel-IDs der Regeln darstellt, die Sie verwenden möchten:

   axe: {
     runOptions: {
       runOnly: [ 'ruleId1', 'ruleId2' ]
     }
   }

3. Ein Objekt mit type- und values-Eigenschaften. Der type-Wert ist ein String, der rule, rules, tag oder tags sein kann. Die values-Eigenschaft muss ein Array von Strings sein, das die Regel(n) oder Tag(s) repräsentiert, die Sie für die Barrierefreiheitsanalyse verwenden möchten. Das folgende Beispiel zeigt die Verwendung des runOnly-Objekts, um die Barrierefreiheitstests auf Regeln zu beschränken, die als wcag2a markiert sind:

   axe: {
     runOptions: {
       runOnly: {
         type: 'tag',
         values: [ 'wcag2a' ]
       }
     }  
   }

• Für weitere Beispiele zur Verwendung von runOnly (mit axe-core) siehe Beispiele für Optionsparameter
• Für weitere Informationen über verfügbare Tag-Werte siehe axe-core Tags.
• Für Informationen über die Regeln, Regel-IDs und Tags siehe Regelbeschreibungen

rules

Der rules-Wert (auf dem runOptions-Objekt) ermöglicht es Ihnen, bestimmte Regeln während der Analyse zu aktivieren (enabled: true) oder zu deaktivieren (enabled: false), wie unten gezeigt:

axe: {
  runOptions: {
    rules: {
      'ruleId1': { enabled: false },
      'ruleId2': { enabled: false }
    }
  }
}

serverURL

(Optional) Die URL des Axe Developer Hub-Servers, an den Watcher die Ergebnisse der Barrierefreiheitsanalyse sendet. Standardmäßig https://axe.deque.com.

Sie müssen diesen Wert nicht festlegen, wenn Ihr Projekt auf axe.deque.com erstellt wurde. Wenn Ihre Organisation jedoch eine regionale Instanz, eine private Cloud oder eine lokale Bereitstellung von Axe Developer Hub verwendet, setzen Sie serverURL auf die Basis-URL dieser Instanz:

axe: {
  apiKey: process.env.ACCESSIBILITY_API_KEY,
  projectId: process.env.PROJECT_ID,
  serverURL: process.env.SERVER_URL // e.g., 'https://axe-eu.deque.com'
}

sessionId

(Optional) Die sessionId-Eigenschaft wurde veraltet und sollte nicht mehr verwendet werden. Siehe buildID oben.

testingTypes

(Optional) Die testingTypes-Eigenschaft ist ein Array von Strings zur Verwendung mit Cypress, um Komponenten- oder e2e- (End-to-End) Tests (oder beides) anzugeben.

axe: {
  testingTypes: ['e2e', 'component']
}

timeout

(Optional) Das timeout-Objekt (vom Typ Timeouts) in AxeConfiguration setzt die Zeitüberschreitungswerte in Millisekunden für die jeweiligen Controllermethoden (oder benutzerdefinierte Befehle für Cypress). (Siehe die Controller-Klassen für Informationen über die Controller-Klassen und die Cypress Benutzerdefinierte Kommentare für Informationen über benutzerdefinierte Befehle von Cypress.) Wenn eine Zeitüberschreitung abläuft, schlägt der Test mit einer Nachricht fehl, die anzeigt, dass die Zeitüberschreitung überschritten wurde. Sie können die Zeitüberschreitung erhöhen, um den Fehler zu vermeiden.

Dieses Beispiel setzt die analyze-Zeitüberschreitung auf 8 Sekunden, flush auf 15 Sekunden, start auf 10 Sekunden und stop auf 10 Sekunden. (Die Standardwerte sind in der Tabelle unter Timeouts-Schnittstelle angegeben.)

axe: {
  timeout: {
    analyze: 8000,
    flush: 15000,
    start: 10000,
    stop: 10000,
  }
}

Konfigurationsfunktionen

Die von Watcher bereitgestellten Konfigurationsfunktionen ermöglichen es Ihnen, Ihre Einrichtung für das angegebene Test-Framework zu ändern sowie anzupassen, wie Sie Watcher ausführen möchten, um Ihren Bedürfnissen gerecht zu werden. Weitere Informationen finden Sie unter AxeConfiguration Interface.

cypressConfig

Erstellt eine Konfiguration für Cypress.

cypressConfig(config: Cypress.ConfigOptions & Configuration): Cypress.ConfigOptions

cypressConfig-Parameter

• config: Cypress.ConfigOptions & Configuration

  Schnitttyp von Cypress.ConfigOptions und Configuration.

Rückgaben: Cypress.ConfigOptions

cypressConfig-Beispiel

import { defineConfig } from 'cypress'
import { cypressConfig } from '@axe-core/watcher/cypress/config'

export default defineConfig(
  cypressConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    }
  })
)

playwrightConfig

Erstellt eine Konfiguration für Playwright.

playwrightConfig(opts: Configuration & LaunchOptions): LaunchOptions

playwrightConfig-Parameter

• opts: Configuration & LaunchOptions

  Schnitttyp von LaunchOptions und Configuration.

Rückgaben: LaunchOptions

playwrightConfig-Beispiel

import { chromium } from 'playwright'
import { playwrightConfig } from '@axe-core/watcher/playwright'

const browserContext = await chromium.launchPersistentContext(
  '',
  playwrightConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    }
  })
)

playwrightTest

Erstellt eine Konfiguration für Playwright Test.

playwrightTest(options: Options): ReturnValue

playwrightTest-Parameter

• options: Options

  Options ist ein Schnitttyp von Configuration und LaunchOptions.

Rückgaben: ReturnValue

playwrightTest-Beispiel

// fixtures.ts
import { playwrightTest } from '@axe-core/watcher/playwright-test'

export default playwrightTest({
  axe: {
    apiKey: process.env.API_KEY,
    projectId: process.env.PROJECT_ID
  }
})

puppeteerConfig

Erstellt eine Konfiguration für Puppeteer.

puppeteerConfig(opts: Configuration & LaunchOptions & BrowserLaunchArgumentOptions & BrowserConnectOptions): Options

puppeteerConfig-Parameter

• opts: Configuration & LaunchOptions & BrowserLaunchArgumentOptions & BrowserConnectOptions

  Schnitttyp von LaunchOptions, BrowserLaunchArgumentOptions, BrowserConnectOptions und Configuration.

Rückgaben: Options

puppeteerConfig-Beispiel

import puppeteer from 'puppeteer'
import { puppeteerConfig } from '@axe-core/watcher/puppeteer'

const browser = await puppeteer.launch(
  puppeteerConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    }
  })
)

wdioConfig

Erstellt eine WebdriverIO-Konfiguration.

wdioConfig({ axe, ...options}: Options): RemoteOptions

wdioConfig-Parameter

• arg: Options

  Options ist ein Schnitttyp von RemoteOptions und Configuration.

Rückgaben: RemoteOptions

wdioConfig-Beispiel

import { remote } from 'webdriverio'
import { wdioConfig } from '@axe-core/watcher/wdio'

const browser = await remote(
  wdioConfig({
    axe: {
      apiKey: process.env.API_KEY,
      projectId: process.env.PROJECT_ID
    },
    capabilities: { browserName: 'chrome' }
  })
)

wdioTestRunner

Erstellt eine WebdriverIO Testrunner-Konfiguration.

wdioTestRunner(...params: unknown[]): Options.Testrunner

wdioTestRunner-Parameter

• params: unknown[]

  Der params-Wert ist einer von:

  1. Ein Array, das einen Wert enthält, der ein Schnitttyp von Options.Testrunner und Configuration ist.
  2. Ein Array, in dem der erste Array-Wert ein AxeConfiguration ist und der zweite Wert ein Options.Testrunner.

Rückgaben: Options.Testrunner

wdioTestRunner-Beispiel

import { wdioTestRunner } from '@axe-core/watcher/wdio'

export const config = wdioTestRunner({
  axe: {
    apiKey: process.env.API_KEY,
    projectId: process.env.PROJECT_ID
  }
})

webdriverConfig

Erstellt eine Selenium WebDriver-Konfiguration.

webdriverConfig(arg: WebDriverArgs): Options

webdriverConfig-Parameter

• arg: WebDriverArgs

  Ein Configuration, erweitert, um ein Selenium WebDriver-Options-Element einzuschließen.

Rückgaben: Options

webdriverConfig Beispiel

import { Builder } from 'selenium-webdriver'
import { Options } from 'selenium-webdriver/chrome'
import { webdriverConfig } from '@axe-core/watcher/webdriver'

const options = new Options()
const browser = await new Builder()
  .forBrowser('chrome')
  .setChromeOptions(
    webdriverConfig({
      axe: {
        apiKey: process.env.API_KEY,
        projectId: process.env.PROJECT_ID
      },
      options
    })
  )
  .build()

Configuration Schnittstelle

Die Configuration-Schnittstelle wird mit der Konfigurationsfunktionen verwendet und enthält eine Eigenschaft:

Alle Konfigurationsfunktionen verwenden diese axe-Eigenschaft, um den Watcher einzurichten und Ihre Barrierefreiheitsprüfung zu konfigurieren. Siehe den obigen Abschnitt AxeConfiguration Interface für weitere Informationen.

ConfigurationOverrides Schnittstelle

Die ConfigurationOverrides-Schnittstelle ermöglicht es Ihnen, die globalen Konfigurationseinstellungen Ihrer Organisation für einzelne Testruns zu überschreiben. Diese Eigenschaft muss entsprechend den Berechtigungen der globalen Konfiguration Ihres Unternehmens verwendet werden.

accessibilityStandard

Legt den Barrierefreiheitsstandard fest, gegen den getestet werden soll. Verfügbare Optionen:

• „Alle“ - Testet gegen alle verfügbaren Standards
• „WCAG 2.2 AAA“
• „WCAG 2.2 AA“
• „WCAG 2.2 A“
• „WCAG 2.1 AAA“
• „WCAG 2.1 AA“
• „WCAG 2.1 A“
• „WCAG 2.0 AAA“
• „WCAG 2.0 AA“
• „WCAG 2.0 A“
• „Trusted Tester v5“
• „EN 301 549“
• „RGAAv4“ - RGAA Version 4 (Französischer Barrierefreiheitsstandard; erfordert axe-core 4.11.0 oder neuer)

Ihre Organisation muss das Überschreiben dieser Einstellung in der globalen Konfiguration erlauben, und der ausgewählte Standard muss zu den erlaubten Optionen gehören.

axe: {
  configurationOverrides: {
    accessibilityStandard: 'WCAG 2.2 AA'
  }
}

axeCoreVersion

Gibt an, welche Version von axe-core für das Testen verwendet werden soll. Verfügbare Optionen umfassen:

• „neueste“ - Neueste unterstützte Version, die derzeit mit Axe Watcher gebündelt ist
• Spezifische Versionen ab 4.4.0 und später (z.B. „4.10.2“, „4.9.1“, etc.)

Ihre Organisation muss das Überschreiben dieser Einstellung in der globalen Konfiguration erlauben, und die ausgewählte Version muss zu den erlaubten Optionen gehören.

axe: {
  configurationOverrides: {
    axeCoreVersion: 'latest'
  }
}

bestPractices

Aktiviert oder deaktiviert Best-Practice-Regeln für den Testrun. Best Practices verbessern die Barrierefreiheit, sind jedoch nicht Teil formaler Standards. Ihre Organisation muss das Überschreiben dieser Einstellung erlauben, damit sie wirksam wird.

axe: {
  configurationOverrides: {
    bestPractices: true
  }
}

experimentalRules

Aktiviert oder deaktiviert experimentelle Regeln für den Testrun. Experimentelle Regeln sind noch in der Entwicklung und können zu Fehlalarmen führen. Ihre Organisation muss das Überschreiben dieser Einstellung in der globalen Konfiguration erlauben, damit sie wirksam wird.

axe: {
  configurationOverrides: {
    experimentalRules: true
  }
}

Controller Klassen

Die folgenden Klassen erweitern die Controller-abstrakte Klasse, um Ihnen die manuelle Kontrolle über die Barrierefreiheitsanalyse der Seiten Ihrer Website zu ermöglichen.

Controller

abstract class Controller

Die Controller-abstrakte Klasse enthält die Methoden zur Steuerung der Seitenanalyse. Jede der konkreten Klassen erweitert diese Klasse, sodass die folgenden Methoden in allen konkreten Klassen verfügbar sind.

analyze

analyze(): Promise<void>

Analysiert die aktuelle Seite auf Barrierefreiheitsfehler. Sie rufen diese Methode auf, nachdem Sie eine Webseite zur Analyse vorbereitet haben (wie z.B. das Eingeben von Werten in ein Formular) und die automatische Analyse mit der stop-Methode oder durch Setzen von autoAnalyze auf false deaktiviert haben.

analyze Gibt zurück

Promise<void>

analyze Beispiel

await controller.analyze()

analyze Entsprechender Cypress-Befehl

cy.axeWatcherAnalyze()

flush

flush(): Promise<void>

Sendet alle Ergebnisse des Barrierefreiheits-Scans an Axe Developer Hub. Sollte am Ende des Testlaufs aufgerufen werden, um sicherzustellen, dass die Ergebnisse an die Axe Developer Hub-Server von Deque gesendet wurden.

flush Gibt zurück

Promise<void>

flush Beispiel

await controller.flush()

flush Entsprechender Cypress-Befehl

cy.axeWatcherFlush()

start

start(): Promise<void>

Setzt die Auto-Analyse von Webseiten fort. Diese Methode wird aufgerufen, wenn Sie die Auto-Analyse von Webseiten auf Barrierefreiheitsfehler fortsetzen möchten.

start Gibt zurück

Promise<void>

start Beispiel

await controller.start()

start Entsprechender Cypress-Befehl

cy.axeWatcherStart()

stop

stop(): Promise<void>

Stoppt die automatische Analyse von Webseiten. Nachdem Sie die stop-Methode aufgerufen haben, können Sie die erforderliche zusätzliche Einrichtung Ihrer Webseite durchführen und dann die analyze-Methode aufrufen, um die Seite auf Barrierefreiheitsfehler zu überprüfen.

stop Gibt zurück

Promise<void>

stop Beispiel

await controller.stop()

stop Entsprechender Cypress-Befehl

cy.axeWatcherStop()

PlaywrightController

Die PlaywrightController-Klasse ermöglicht es Ihnen, die Barrierefreiheitsanalyse für Testruns mit Playwright und Playwright Test manuell zu steuern. Sie können die automatische Barrierefreiheitsanalyse starten und stoppen und Seiten analysieren, die eine zusätzliche Einrichtung erfordern.

Für weitere Informationen über Playwright siehe Playwright-Dokumentation.

Konstruktor

new PlaywrightController(driver: Page): PlaywrightController

Parameter

• driver: Page

Der driver-Wert ist ein Playwright Page-Objekt.

Gibt PlaywrightController zurück

PlaywrightController Beispiel

import { PlaywrightController, wrapPlaywrightPage } from '@axe-core/watcher/playwright'

let page = await browserContext.newPage()
const controller = new PlaywrightController(page)
page = wrapPlaywrightPage(page, controller)

Siehe Controller für die in der abstrakten Basisklasse implementierten Methoden.

PuppeteerController

Die PuppeteerController-Klasse erlaubt Ihnen, Ihre Testruns mit Puppeteer manuell zu steuern. Manuelle Steuerung ermöglicht es Ihnen, die zusätzliche Einrichtung bereitzustellen, die von komplexeren Webseiten erfordert wird.

Für weitere Informationen über Puppeteer siehe Puppeteer.

Konstruktor

new PuppeteerController(driver: Page): PuppeteerController

Parameter

• driver: Page

Der driver-Wert ist ein Puppeteer Page-Objekt.

Gibt PuppeteerController zurück

PuppeteerController Beispiel

import { PuppeteerController, wrapPuppeteerPage } from '@axe-core/watcher/puppeteer'

let page = await browser.newPage()
const controller = new PuppeteerController(page)
page = wrapPuppeteerPage(page, controller)

Siehe Controller für die in der abstrakten Basisklasse implementierten Methoden.

WdioController

Die WdioController ermöglicht es Ihnen, Testruns mit WebdriverIO und WebdriverIO Testrunner manuell zu steuern. Für Seiten, die eine zusätzliche Einrichtung oder Konfiguration erfordern, können Sie den automatischen Test stoppen und jede Seite manuell analysieren, die eine solche Einrichtung erfordert.

Konstruktor

new WdioController(driver: Browser): WdioController

Parameter

• driver: Browser

Gibt WdioController zurück

WdioController Beispiel

import { WdioController, wrapWdio } from '@axe-core/watcher/wdio'

// browser is the WebdriverIO Browser instance from your wdioConfig() setup
const controller = new WdioController(browser)
wrapWdio(browser, controller)

Siehe Controller für die in der abstrakten Basisklasse implementierten Methoden.

WebdriverController

Konstruktor

new WebdriverController(driver: WebDriver): WebdriverController

Parameter

• driver: WebDriver

Der driver-Wert ist ein Selenium WebDriver-Objekt.

Gibt WebdriverController zurück

WebdriverController Beispiel

import { WebdriverController, wrapWebdriver } from '@axe-core/watcher/webdriver'

// browser is the Selenium WebDriver instance from your webdriverConfig() setup
const controller = new WebdriverController(browser)
browser = wrapWebdriver(browser, controller)

Siehe Controller für die Methoden, die in der abstrakten Basisklasse implementiert sind.

Cypress Custom Commands

In der Cypress-Browserautomatisierungsplattform werden die Methoden in den *Controller-Klassen als benutzerdefinierte Befehle implementiert. Weitere Informationen zur Implementierung und Verwendung benutzerdefinierter Befehle finden Sie unter Custom Commands auf der Cypress-Dokumentationsseite.

Die folgenden benutzerdefinierten Befehle werden implementiert. Jeder benutzerdefinierte Befehl gibt Chainable<void> zurück, um ein Verkettungen mit anderen Cypress-Befehlen zu ermöglichen.

Cypress-Befehl Beispiel

Das folgende Beispiel zeigt, wie man die Cypress-Befehle des Axe Developer Hub aus dem @axe-core/watcher-Paket importiert und dann den axeWatcherFlush-Befehl am Ende jedes Tests aufruft (indem man ihn innerhalb von afterEach() platziert):

// Import the axe-watcher commands.
require('@axe-core/watcher/cypress/support')

// Flush Axe-watcher results after each test.
afterEach(() => {
  cy.axeWatcherFlush()
})

Timeouts-Schnittstelle

Der Timeout Objekt (vom Typ Timeouts) in dem AxeConfiguration-Schnittstelle ermöglicht es Benutzern, die Zeitüberschreitungswerte (in Millisekunden) für die jeweiligen Controller-Funktionen oder die benutzerdefinierten Cypress-Befehle zu ändern.

interface Timeouts {
  start?: number
  stop?: number
  flush?: number
  analyze?: number
}