Schreiben von Tests für Axe DevTools für Web für WebDriverJS

Tests mit Axe DevTools schreiben

Die einzelnen Schnipsel in den untenstehenden Abschnitten sind JavaScript und sie werden unverändert in TypeScript kompiliert. Der Vollständige Beispieldatei-Abschnitt gibt den vollständigen Test in beiden Sprachen wieder.

Voraussetzungen

Um Axe DevTools für Web zu importieren und zu initialisieren, muss es zuerst installiert werden. Falls Sie das noch nicht getan haben, lesen Sie die Anleitung zur Installation aus einem Bundle, aus Ihrem Artefakt-Repository oder aus Deques Agora. Sie benötigen außerdem einen heruntergeladenen und konfigurierten Selenium WebDriver Ihrer Wahl.

Importieren und Initialisieren

Importieren Sie sowohl Axe DevTools für Web als auch WebDriverJS. Die Syntax hängt von der Sprache und dem Modulsystem ab, das Ihr Projekt verwendet. Wählen Sie diejenige, die zu Ihrem Projekt passt:

JavaScript mit CommonJS-Modulen

Dies ist der Standard für ein Node.js-Projekt ohne "type": "module" in seiner package.json.

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const webdriver = require('selenium-webdriver');

JavaScript mit ES-Modulen

Verwenden Sie diese Syntax in einem Projekt mit "type": "module" in seiner package.json oder in .mjs-Dateien.

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import webdriver from 'selenium-webdriver';

TypeScript

TypeScript verwendet die gleiche import-Syntax wie ES-Module. @axe-devtools/webdriverjs liefert eigene Typdeklarationen, daher gibt es kein separates @types/-Paket zu installieren. Scan-Ergebnisse sind als AxeResults typisiert, die axe-core exportiert:

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

Den Treiber initialisieren

Sobald Sie Axe DevTools für Web importiert haben, können Sie den Treiber initialisieren. Jeder Scan erfordert eine eigene Instanz von Axe DevTools für Web, daher initialisieren Sie diese während des Schreibens von Tests.

In JavaScript:

const driver = new webdriver.Builder().forBrowser('chrome').build();

In TypeScript, unter Verwendung der oben importierten Builder- und WebDriver-Typen:

const driver: WebDriver = new Builder().forBrowser('chrome').build();

Scan-Kontext beziehen

Bevor Sie eine Seite auf Barrierefreiheit scannen können, muss sie vom Webdriver aufgerufen werden.

await driver.get('<URL>');

Sobald der Webdriver die Seite aufgerufen hat, können Sie sie mit Axe DevTools scannen und die Ergebnisse speichern. Der einfachste Weg, die Ergebnisse des Scans anzuzeigen, ist es, das Ergebnisobjekt im Konsolenprotokoll auszugeben.

const results = await new AxeDevToolsBuilder(driver).analyze();
console.log(results);

Vollständige Beispieldatei

Der gleiche Test wird unten in JavaScript und in TypeScript gezeigt. Die Axe DevTools API ist in beiden identisch; die TypeScript-Version verwendet die import-Syntax und annotiert den Treiber und die Scan-Ergebnisse.

JavaScript

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');

var driver = new WebDriver.Builder().forBrowser('chrome').build();

driver.get('https://google.com').then(function() {
  new AxeDevToolsBuilder(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    console.log(results);
  });
});

TypeScript

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

(async () => {
  const driver: WebDriver = new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://google.com');
    const results: AxeResults = await new AxeDevToolsBuilder(driver).analyze();
    console.log(results);
  } finally {
    await driver.quit();
  }
})();

Nächste Schritte

Da Sie nun erfolgreich einen Barrierefreiheitsscan abgeschlossen haben, können Sie sich fortgeschritteneren Scan-Themen wie Berichte erstellen und Verwendung des Ergebnisobjekts zuwenden.

Fehlerbehebung

Falls Sie Schwierigkeiten mit den Scanning-Ergebnissen haben, wenden Sie sich direkt an Ihren Deque-Vertreter, kontaktieren Sie uns über unser Support-Desk, oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.