Cucumber-Tests schreiben

Verwendung von Cucumber mit Axe DevTools

Voraussetzungen

Um Barrierefreiheitstests zu schreiben und Ergebnisse zu erzielen, müssen Sie bereits eine Testdatei mit Axe DevTools erstellt haben und Ihren gewünschten Selenium WebDriver vorab importiert & initialisiert haben. Wenn Sie dies noch nicht getan haben, lesen Sie diesem Leitfaden, um zu erfahren, wie Sie dies tun können.

Konfiguration

Fügen Sie zuerst Axe DevTools zu Ihrer Konfiguration hinzu

public class AppConfiguration {

    @Bean
    public static AxeWorld axeWorld() {
        return new AxeWorld();
    }
}

Fügen Sie nun die erforderlichen Schritte für die Verwendung von Axe DevTools hinzu

public class StepDefinitions {

    private AxeWorld axeWorld;

    public StepDefinitions(AxeWorld axeWorld) {
        this.axeWorld = axeWorld;
    }

    private WebDriver webDriver;

    @Before
    public void setup() throws IOException {
        webDriver = new ChromeDriver();
        axeWorld.setPage(new AxeDriver(webDriver));
    }

    @After
    public void tearDown() throws Exception {
        webDriver.quit();
    }

    @When("^I visit \"([^\"]*)\"$")
    public void iVisit(String url) throws Throwable {
        webDriver.get(url);

    }
}

Tests schreiben

Bevor Sie eine Seite testen können, müssen Sie darauf zugreifen. Der erste Schritt ist, Selenium WebDriver zu instanziieren und eine Seite aufzurufen

WebDriver webDriver = new ChromeDriver();
webDriver.get("'https://broken-workshop.dequelabs.com'");

Dann können Sie ein Axe DevTools-Scan-Treiberobjekt erstellen und den WebDriver übergeben

AxeDriver axeDriver = new AxeDriver(webDriver);

Schließlich fügen Sie den axeDriver in Ihre Schrittdefinitionen ein

// Inject AxeWorld into your step definitions.
public StepDefinitions(AxeWorld axeWorld) {
  this.axeWorld = axeWorld;
}
// Provide the page to the Axe World
axeWorld.setPage(new axeDriver(webDriver));

Sie können dann die Seite auf Barrierefreiheit testen. Derzeit unterstützt Axe DevTools Pico- und Spring-Tests durch Cucumber.

Verwendung

Barrierefreiheit Cucumber-Schritte

Die unten stehenden Beispielprüfungen zur Barrierefreiheit verwenden Then the page should be axe clean, aber alle Prüfungen funktionieren austauschbar mit Then the page should be audited for accessibility. Der Unterschied zwischen diesen beiden besteht darin, ob der Test bei Barrierefreiheitsverletzungen mit Then the page should be axe clean fehlschlägt oder nicht mit Then the page should be audited for accessibility fehlschlägt.

Um einen Axe-Barrierefreiheit-Cucumber-Schritt zu erstellen, beginnen Sie mit dem Basis-Schritt und fügen Sie alle notwendigen Klauseln hinzu. Alle folgenden Klauseln können gemischt und angepasst werden; jedoch müssen sie in der angegebenen Reihenfolge erscheinen:

Then the page should be axe clean [including] [excluding] [according-to] [checking-rules/checking-only-rules] [skipping-rules]

Basis-Schritt

Der Basis-Schritt ist die Kernkomponente des Cucumber-Schritts. Er ist ein vollständiger Schritt für sich und überprüft, ob die aktuell geladene Seite zugänglich ist. Er führt ein Audit der Barrierefreiheit Ihrer Seite durch. Das Audit protokolliert Barrierefreiheitsprobleme in target/axe-report/accessibility-check.log und erstellt eine JSON-Ausgabe der Ergebnisse unter target/axe-report/accessibility-check.json.

Then the page should be axe clean

This step will cause test suite failures if accessibility violations are found

Then the page should be audited for accessibility

This step will require handling of violations outside of test suite failures, as this step does not trigger the suite to fail if violations are found.

Einbeziehung

Axe DevTools ermöglicht es, Barrierefreiheitsscans sowohl inklusiv als auch exklusiv zu begrenzen. Zusätzlich können diese Bereiche in einander arbeiten, um komplexe Enklaven und Exklaven zu erstellen. Diese Bereiche basieren auf CSS-Selektoren.

Einschlussklausel

Die Einschlussklausel within "#selector" gibt an, welche Elemente auf der Seite überprüft werden sollen. Nur Elemente innerhalb des ausgewählten Bereichs werden gescannt. Die Einschlussklausel muss einen gültigen CSS-Selektor enthalten, der in doppelte Anführungszeichen eingeschlossen ist. Verwenden Sie zusammengesetzte Selektoren, um mehrere Elemente auszuwählen. Zum Beispiel within "#header, .footer"

Then the page should be axe clean within "#selector"

Ausschlussklausel

Die Ausschlussklausel excluding "#selector" gibt an, welche Elemente ignoriert werden sollen. Keine Elemente innerhalb des ausgewählten Bereichs werden gescannt. Die Ausschlussklausel muss einen gültigen CSS-Selektor enthalten, der in doppelte Anführungszeichen eingeschlossen ist. Verwenden Sie zusammengesetzte Selektoren, um mehrere Elemente auszuwählen. Zum Beispiel excluding "#widget, .ad"

Then the page should be axe clean excluding "#selector"

Verkettung von Einschluss und Ausschluss

Um Einschluss- und Ausschlussklauseln zu verketten, verwenden Sie das Semikolon (;) oder das Wort aber, um sie zu trennen.

Then the page should be axe clean within "main"; excluding "aside"
Then the page should be axe clean within "main" but excluding "aside"

Regelkonfiguration

Es gibt einige Möglichkeiten, Ihre Standardregelkonfiguration mit der Cucumber-API zu ändern. Sie können Regeln über Gruppen durch die Verwendung von Tags auswählen oder Regeln einzeln nach deren Regel-ID auswählen.

Regel-Tag-Klausel

Die Tag-Klausel gibt an, welche Barrierefreiheitsstandards (oder Standards) in der Seitenprüfung verwendet werden sollen. Geben Sie die Barrierefreiheitsstandards nach Namen (Tag) an. Mehrere Standards können durch Kommas getrennt angegeben werden. Zum Beispiel according to: wcag2a, section508

Alle Tag-Namen sind dokumentiert zusätzlich zu einem vollständige Liste der Regeldokumentationen, das jedem Tag entspricht.

Then the page should be axe clean according to: best-practice

Zusätzliche Regeln prüfen Klausel

Diese Klausel ermöglicht es Ihnen, zusätzliche Regeln Ihren bestehenden Regeln hinzuzufügen. Sie können eine einzelne Regel nach Regel-ID angeben oder eine Liste von Regeln, die durch Kommas getrennt sind. Sehen Sie sich die Regeldokumentation für eine Liste der Regeln und deren Regel-IDs an. Verwenden Sie ein Semikolon (;) oder das Wort and, um die check-rules-Klausel von allen vorhergehenden Klauseln zu trennen.

Then the page should be axe clean checking: color-contrast

Then the page should be axe clean according to: wcag2a; checking: color-contrast
Then the page should be axe clean according to: wcag2a and checking: color-contrast

Nur spezifizierte Regeln prüfen Klausel

Indem Sie das Wort only zur check-rules-Klausel hinzufügen, können Sie die Bedeutung des Schrittes ändern. Wie zuvor beschrieben, gibt die check-rules-Klausel zusätzliche Regeln an, die ausgeführt werden sollen. Nur spezifizierte Regeln werden überprüft, wenn das Wort only verwendet wird. Sehen Sie sich die Regeldokumentation für eine Liste der Regeln und deren Regel-IDs an. Verwenden Sie ein Semikolon (;) oder das Wort and, um die check-rules-Klausel von allen vorhergehenden Klauseln zu trennen.

Then the page should be axe clean checking only: color-contrast

Regeln überspringen Klausel

Die Regeln überspringen-Klausel gibt an, welche Regeln aus der bestehenden Regelkonfiguration übersprungen werden sollen. Zu überspringende Regeln werden durch Regel-IDs angegeben, die durch Kommas getrennt sind. Sehen Sie sich die Regeldokumentation für eine Liste der Regeln und deren Regel-IDs an. Verwenden Sie ein Semikolon (;) oder das Wort and, um die check-rules-Klausel von allen vorhergehenden Klauseln zu trennen.

Then the page should be axe clean skipping: color-contrast

Then the page should be axe clean according to: wcag2a; skipping: color-contrast
Then the page should be axe clean according to: wcag2a but skipping: color-contrast

Regelsatzauswahl Klausel

Greifen Sie auf getaggte Regelsätze im axeDriver durch eine Cucumber-Klausel zu. Diese Funktionalität ermöglicht es Ihnen, einen Regelsatz (z.B.: 508, wcag2, wcag2.1) zur Prüfung der Seitenzugänglichkeit anzugeben.

Then the page should be axe clean according to ruleset: wcag2.1

Verwendungsdienst

Gewinnen Sie Einblick in die Nutzungstrends von Axe DevTools in Ihrer Organisation

Standardmäßig ist der Nutzungsdienst aktiviert und die Standard-URL ist https://usage.deque.com. Setzen Sie die Umgebungsvariable AXE_TRACK_USAGE auf false, um ihn zu deaktivieren. Wenn Ihre Nutzungsvorgänge Deque nicht erreichen, setzen Sie die Umgebungsvariable AXE_METRICS_URL explizit.

Umgebungsvariablen

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

Nächste Schritte

Für die weitere Nutzung Ihrer Axe DevTools-Scan-Ergebnisse, wie bspw. für Berichte, siehe die Dokumentation des Axe DevTools Java Selenium-Pakets

Fehlerbehebung

Wenn Sie Probleme beim Einrichten Ihrer Barrierefreiheitsprüfungen haben, kontaktieren Sie direkt Ihren Deque-Ansprechpartner, erreichen Sie uns über unsere Support-Abteilung oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne, Ihre Barrierefreiheitsprüfung in Schwung zu bringen.