Playwright API-Referenz für axe DevTools fürs Web

Konstruktor

In der Standardkonfiguration ist das einzige Argument, das an den Konstruktor übergeben werden muss, die Playwright-Instanz. Wenn Sie eine andere Axe-Core-Version als die ursprünglich enthaltene oder einen benutzerdefinierten Regelsatz verwenden möchten, können Sie diese Optionen auch an den Konstruktor übergeben.

Axe DevTools Playwright-Konstruktor:

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

Sie müssen als erstes Argument eine Instanz von PlaywrightPage ü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. Andernfalls löst die Konstruktorfunktion eine Ausnahme aus. Muss mit dem neuen Schlüsselbegriff 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

Informationen zur Verwendung benutzerdefinierter Regeln mit axe DevTools finden Sie im Handbuch zur Generierung und Integration benutzerdefinierter Regelsätze im CLI-Handbuch

analysieren

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

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

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

Kettenoptionen

Für die Eingrenzung Ihrer axe DevTools-Scans stehen Ihnen zwei Optionen zur Verfügung. Sie können bestimmte CSS-Bereiche ein- oder ausschließen. Die folgenden Verkettungsmethoden machen dies möglich. Diese Methoden können verkettet werden, um komplexe, fokussierte Scans zu erstellen.

beinhaltet

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

Fügt der Liste der in die Analyse einzubeziehenden Elemente einen CSS-Selektor hinzu. Elemente außerhalb des an .include() übergebenen Bereichs werden nicht gescannt.

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

ausschließen

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

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

Diese Methoden können verkettet werden, um den Scan-Umfang weiter einzugrenzen.

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 den ausgewählten Regelsatz. Diese Optionen überschreiben die Standardregelkonfiguration und ändern Ihre Ergebnisse. Zusätzliche Aufrufe mit diesen Methoden überschreiben vorherige Aufrufe.

mitRules

AxeDevToolsBuilder.withRules(rules: String|Array)

Beschränkt die Analyse auf diejenigen mit den angegebenen Regel-IDs. Akzeptiert eine Zeichenfolge mit einer einzelnen Regel-ID oder ein Array mit mehreren 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)

Beschränkt die Analyse auf nur die Regeln, die mit dem angegebenen Tag getaggt 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']);

Regeln deaktivieren

AxeDevToolsBuilder.disableRules(rules: String|Array)

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

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

axe-core-Optionen

Diese Optionen greifen auf die zugrunde liegende axe-core-Konfiguration zu. Weitere Informationen zu diesen Optionen finden Sie in der axe-core-Dokumentation.

Konfiguration

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

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

Optionen

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

Optionen zur direkten Übergabe an axe.run(). Siehe die axe-core-Dokumentation zur Verwendung. Überschreibt alle anderen konfigurierten Optionen, einschließlich Aufrufe von AxeDevToolsBuilder.withRules() und AxeDevToolsBuilder.withTags().

Usage Service

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

Umgebungsvariablen

Mit dieser Methode können Benutzer bestimmte Werte des Nutzungsdienstes über Umgebungsvariablen ändern.

Tracking aktivieren

Mit dieser Methode können Benutzer der Übermittlung von Daten an den Nutzungsdienst zustimmen.

.enableTracking(state: boolean)

AxeDevToolsBuilder({ page }).enableTracking(true)

setTrackingUrl

Mit dieser Methode können Benutzer ändern, wohin die Nutzungsdaten gesendet werden.

.setTrackingUrl(url: string)

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

setDistinctId

Mit dieser Methode können Benutzer ändern, welche eindeutige ID gespeichert oder verwendet wird.

.setDistinctId(distinctId: string)

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