Playwright-API-Referenz für Axe DevTools für Web

Konstruktor

In der Standardkonfiguration ist das einzige erforderliche Argument, das an den Konstruktor übergeben werden muss, die Playwright-Instanz. Wenn Sie eine andere axe-core-Version als die ursprünglich enthaltene oder ein benutzerdefiniertes Regelset verwenden möchten, können Sie diese Optionen ebenfalls in den Konstruktor übergeben.

Axe DevTools Playwright Konstruktor:

AxeDevToolsBuilder({ page: PlaywrightPage, source: string, rulesetId: AxeDevtoolsRulesetID})

Sie müssen eine Instanz von PlaywrightPage als erstes Argument übergeben. Das zweite Argument kann entweder eine Regelsatz-ID oder ein Axe-Objekt sein. Wenn Sie kein zweites Argument angeben, müssen Sie die benutzerdefinierte Regelkonfigurationsdatei @axe-devtools/script-builder konfigurieren, oder der Konstruktor wird eine Ausnahme auslösen. Muss mit dem neuen Schlüsselwort aufgerufen werden.

// instantiate with the Section 508 rule set
const builder = new AxeDevToolsBuilder({ page, rulesetId: '508' });

// or with a specific axe instance
const { source } = require('../axe-core-2.3.0');
const builder = new AxeDevToolsBuilder({ page, source });

Benutzerdefinierte Regeln

Für Informationen zur Verwendung benutzerdefinierter Regeln mit Axe DevTools lesen Sie den Leitfaden zur Generierung und Integration benutzerdefinierter Regelsätze im CLI-Leitfaden

analysieren

AxeDevToolsBuilder.analyze(): Promise<axe.Results | Error>

Führt eine Analyse durch und übergibt das Ergebnisobjekt und alle Fehler.

new AxeDevToolsBuilder({ page })
  .analyze()
  .then(results => {
    console.log(results);
  })
  .catch(e => {
    // Do something with error
  });

analysiereUniversell

AxeDevToolsBuilder.analyzeUniversal(): Promise<UniversalExport>

Führt eine Analyse durch und gibt Ergebnisse in Axe Universal Format zurück. Die vorhandene Methode analyze() bleibt unverändert.

new AxeDevToolsBuilder({ page })
  .analyzeUniversal()
  .then(results => {
    console.log(results);
  })
  .catch(e => {
    // Do something with error
  });

Ketten-Optionen

Es gibt zwei Optionen, um den Umfang Ihrer Axe DevTools-Scans festzulegen. Sie können wählen, spezifische CSS-Bereiche einzubeziehen oder auszuschließen. Die folgenden Kettenmethoden machen dies möglich. Diese Methoden können verkettet werden, um komplexe, fokussierte Scans zu erstellen.

einbeziehen

AxeDevToolsBuilder.include(selector: String | String[])

Fügt einen CSS-Selektor zur Liste der Elemente hinzu, die in die Analyse einbezogen werden sollen. Elemente außerhalb des Bereichs, der an .include() übergeben wird, werden nicht gescannt.

new AxeDevToolsBuilder({ page }).include('<CSS-Selector>');

ausschließen

AxeDevToolsBuilder.exclude(selector: String | String[])

Fügen Sie einen CSS-Selektor zur Liste der Elemente hinzu, die von der Analyse ausgeschlossen werden sollen. Es werden nur Elemente außerhalb des Bereichs gescannt, der an .exclude() übergeben wird.

Diese Methoden können verkettet werden, um den Scan-Bereich weiter zu verfeinern.

new AxeDevToolsBuilder({ page }).exclude('<CSS-Selector>');

In diesem Beispiel würden alle Elemente innerhalb von <CSS-Selector> gescannt, mit Ausnahme der Elemente innerhalb von <Inner-CSS-Selector>:

new AxeDevToolsBuilder({ page }).include('<CSS-Selector>').exclude('<Inner-CSS-Selector>');

Regelkonfiguration

Diese Optionen ändern die Regelkonfiguration für das ausgewählte Regelset. Diese Optionen überschreiben die Standardregelkonfiguration und ändern Ihre Ergebnisse. Zusätzliche Aufrufe mit diesen Methoden überschreiben vorherige Aufrufe.

mitRegeln

AxeDevToolsBuilder.withRules(rules: String|Array)

Begrenzt die Analyse auf nur die mit den angegebenen Regel-IDs. Akzeptiert einen String einer einzelnen Regel-ID oder ein Array mehrerer Regel-IDs.

//with a single rule ID
AxeDevToolsBuilder({ page }).withRules('html-lang');

//with an array of rule IDs
AxeDevToolsBuilder({ page }).withRules(['html-lang', 'image-alt']);

mitTags

AxeDevToolsBuilder.withTags(tags: String|Array)

Begrenzt die Analyse auf nur die Regeln, die mit dem bereitgestellten Tag markiert sind. Akzeptiert ein einzelnes Tag oder ein Array von Tags.

//with a single tag
AxeDevToolsBuilder({ page }).withTags('wcag2a');

//with an array of tags
AxeDevToolsBuilder({ page }).withTags(['wcag2a', 'wcag2aa']);

RegelnDeaktivieren

AxeDevToolsBuilder.disableRules(rules: String|Array)

Überspringt die Überprüfung der bereitgestellten Regeln. Akzeptiert einen String, der eine einzelne Regel-ID darstellt, oder ein Array mehrerer Regel-IDs. Nachfolgende Aufrufe von AxeDevToolsBuilder.options(), AxeDevToolsBuilder.disableRules() werden die angegebenen Optionen überschreiben.

new AxeDevToolsBuilder({ page }).disableRules('color-contrast');

axe-core-Optionen

Diese Optionen greifen auf die zugrunde liegende Konfiguration von Axe-Core zu. Für weitere Informationen über diese Optionen siehe die axe-core-Dokumentation.

Konfiguration

AxeDevToolsBuilder.configure(config: axe.Spec): AxeDevToolsBuilder

Einstellung der Konfiguration für Axe-Core. Dieser Wert wird direkt an axe.configure() übergeben.

Optionen

AxeDevToolsBuilder.options(runOptions: axe.RunOptions): AxeDevToolsBuilder

Optionen, die direkt an axe.run() übergeben werden sollen. Siehe die axe-core-Dokumentation für die Verwendung. Wird alle anderen konfigurierten Optionen überschreiben, einschließlich Aufrufe an AxeDevToolsBuilder.withRules() und AxeDevToolsBuilder.withTags().

Nutzungsdienst

Standardmäßig ist der Nutzungdienst aktiviert und die Standard-URL ist https://usage.deque.com. Setzen Sie die Umgebungsvariable AXE_TRACK_USAGE auf false, um ihn zu deaktivieren.

Umgebungsvariablen

Diese Umgebungsvariablen ermöglichen es Ihnen, den Nutzungsdienst zu konfigurieren und die Eigenschaften der gemeldeten Ereignisse zu ändern.

enableTracking

Diese Methode ermöglicht es Benutzern, dem Senden von Daten an den Nutzungsdienst zuzustimmen oder es abzulehnen. Das Senden ist standardmäßig aktiviert.

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

setTrackingUrl

Diese Methode ermöglicht es Benutzern, zu ändern, wohin die Datennutzungsmetriken gesendet werden.

.setTrackingUrl(url: string)

AxeDevToolsBuilder({ page }).setTrackingUrl('https://foobar.biz')

setDistinctId

Diese Methode ermöglicht es Benutzern, die gespeicherte oder verwendete eindeutige ID zu ändern.

.setDistinctId(distinctId: string)

AxeDevToolsBuilder({ page }).setDistinctId('foobar')