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 Regelset-ID oder ein axe-Objekt sein. Wenn Sie kein zweites Argument angeben, müssen Sie die benutzerdefinierte Regelkonfigurationsdatei @axe-devtools/script-builder einrichten, sonst wirft der Konstruktor eine Ausnahme. Muss mit dem new-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 Erstellung und Integration benutzerdefinierter Regelsets 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 im Axe Universal Formatzurück. Die vorhandene analyze() Methode 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 zu analysierenden Elemente hinzu. Elemente außerhalb des übergebenen Umfangs werden .include() nicht gescannt.

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

ausschließen

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

Fügt einen CSS-Selektor zur Liste der von der Analyse auszuschließenden Elemente hinzu. Nur Elemente außerhalb des übergebenen Umfangs werden .exclude() gescannt.

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 <CSS-Selector> gescannt, außer den Elementen 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 repräsentiert, 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 axe-core-Konfiguration zu. Für weitere Informationen über diese Optionen, siehe die axe-core-Dokumentation.

Konfiguration

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

Konfiguration für axe-core festlegen. Dieser Wert wird direkt an axe.configure()weitergeleitet.

Optionen

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

Optionen zum direkten Übergeben an axe.run(). Siehe die axe-core-Dokumentation für die Verwendung. Diese Optionen überschreiben alle anderen konfigurierten Optionen, einschließlich Aufrufe von AxeDevToolsBuilder.withRules() und AxeDevToolsBuilder.withTags().

Nutzungsdienst

Standardmäßig ist der Nutzungsdienst deaktiviert, und die Standard-URL ist https://usage.deque.com.

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, sich für das Senden von Daten an den Nutzungsdienst zu entscheiden.

.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')