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 Seiten mit Axe DevTools zu testen, müssen Sie es zuerst in Ihr Projekt importieren und initialisieren. Falls Sie diesen Schritt noch nicht abgeschlossen haben, sehen Sie sich diesem Leitfaden an, um zu erfahren, wie das geht.

Scan-Kontext erhalten

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.