Schreiben Sie Cucumber-Tests

Verwenden von Cucumber mit axe DevTools

Voraussetzungen

Um Barrierefreiheitstests zu schreiben und Ergebnisse zu erzielen, müssen Sie bereits eine Testdatei mit axe DevTools erstellt und den Selenium WebDriver Ihrer Wahl vorimportiert und vorinitialisiert haben. Wenn Sie dies noch nicht getan haben, lesen Sie diese Anleitung , um zu erfahren, wie es geht.

Konfiguration

Fügen Sie zunächst axe DevTools zu Ihrer Konfiguration hinzu

public class AppConfiguration {

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

Fügen Sie nun die erforderlichen Schritte zur 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 besteht darin, Selenium WebDriver zu instanziieren und auf eine Seite zuzugreifen

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

Anschließend können Sie ein axe DevTools Scan-Treiberobjekt erstellen und den WebDriver übergeben

AxeDriver axeDriver = new AxeDriver(webDriver);

Nehmen Sie abschließend den axeDriver in Ihre Schrittdefinitionen auf.

// 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));

Anschließend können Sie die Seite auf Barrierefreiheit testen. Derzeit unterstützt axe DevTools Pico- und Spring-Tests über Cucumber.

Verwendung

Cucumber-Schritte für Barrierefreiheit

Die Beispiele für die Barrierefreiheitsprüfungen unten verwenden Then the page should be axe clean[fehlendes Objekt], aber alle Prüfungen funktionieren austauschbar mit Then the page should be audited for accessibility[fehlendes Objekt]. Der Unterschied zwischen beiden besteht darin, ob der Test bei Verstößen gegen die Barrierefreiheit mit Then the page should be axe clean fehlschlägt, im Gegensatz zu keinem Fehlschlag mit Then the page should be audited for accessibility.

Um einen Cucumber-Schritt mit axe accessibility zu konstruieren, beginnen Sie mit dem Basisschritt und fügen Sie alle erforderlichen Klauseln an. Die folgenden Klauseln können alle kombiniert werden. Sie müssen jedoch in der angegebenen Reihenfolge vorkommen:

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

Basisschritt

Der Basisschritt ist die Kernkomponente des Cucumber-Schritts. Dies ist ein eigenständiger Schritt, der überprüft, ob die aktuell geladene Seite barrierefrei ist. Es führt eine Prüfung der Barrierefreiheit Ihrer Seite durch. Das Audit protokolliert Zugänglichkeitsprobleme in target/axe-report/accessibility-check.log und erstellt eine JSON-Ausgabe der Ergebnisse in 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.

Abgrenzung

Axe DevTools ermöglicht es, Barrierefreiheitsscans auf inklusive und exklusive Weise einzuschränken. Darüber hinaus können diese Geltungsbereiche ineinandergreifen, um komplexe Enklaven und Exklaven zu erstellen. Diese Bereiche funktionieren mit CSS-Selektoren.

Einschlussklausel

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

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

Ausschlussklausel

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

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

Verkettung von Inklusion und Exklusion

Um Einschluss- und Ausschlussklauseln zu verketten, verwenden Sie das Semikolon (;) oder das Wort „oder“, 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 mithilfe von Tags nach Gruppen auswählen oder Regeln einzeln anhand ihrer Regel-ID auswählen.

Regel-Tag-Klausel

Die Tag-Klausel gibt an, welcher Barrierefreiheitsstandard (oder welche Barrierefreiheitsstandards) bei der Seitenprüfung verwendet werden soll. Geben Sie die Barrierefreiheitsstandards mit Namen (Kennzeichnung) an. Die Angabe mehrerer Standards ist durch Kommas getrennt möglich. Z.B. according to: wcag2a, section508

Alle Tag-Namen sind dokumentiert zusätzlich zu einer vollständigen Liste der Regelbeschreibungen , die jedem Tag entsprechen.

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

Zusätzliche Regelklausel überprüfen

Mit dieser Klausel können Sie Ihren bestehenden Regeln weitere Regeln hinzufügen. Sie können eine einzelne Regel anhand der Regel-ID oder eine durch Kommas getrennte Liste von Regeln angeben. Eine Liste der Regeln und ihrer Regel-IDs finden Sie in der Regeldokumentation . Verwenden Sie ein Semikolon (;) oder das Wort and , um die Prüfregelnklausel 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

Klausel „Nur angegebene Regeln prüfen“

Durch Hinzufügen des Wortes only zur Prüfregelnklausel können Sie die Bedeutung des Schritts ändern. Wie bereits beschrieben, gibt die Prüfregeln-Klausel zusätzliche auszuführende Regeln an. Bei Verwendung des Worts only werden nur die angegebenen Regeln überprüft. Eine Liste der Regeln und ihrer Regel-IDs finden Sie in der Regeldokumentation . Verwenden Sie ein Semikolon (;) oder das Wort and , um die Prüfregelnklausel von allen vorhergehenden Klauseln zu trennen.

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

Klausel zum Überspringen von Regeln

Die Klausel zum Überspringen von Regeln gibt an, welche Regeln aus der vorhandenen Regelkonfiguration übersprungen werden sollen. Zu überspringende Regeln werden durch kommagetrennte Regel-IDs angegeben. Eine Liste der Regeln und ihrer Regel-IDs finden Sie in der Regeldokumentation . Verwenden Sie ein Semikolon (;) oder das Wort and , um die Prüfungsregelklausel 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

Regelsatzauswahlklausel

Greifen Sie über eine Cucumber-Klausel auf getaggte Regelsätze im axeDriver zu. Mit dieser Funktion können Sie einen Regelsatz (z. B. 508, wcag2, wcag2.1) angeben, um die Seitenzugänglichkeit zu prüfen.

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

Nutzungsservice

Erhalten Sie Einblick in die Nutzungstrends von axe DevTools in Ihrem Unternehmen

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.

Nächste Schritte

Informationen zur weiteren Verwendung Ihrer axe DevTools Scanergebnisse, z. B. für Berichterstellung, finden Sie in der Dokumentation zum axe DevTools Java Selenium-Paket.(java-test-selenium)

Fehlerbehebung

Wenn beim Einrichten Ihres Barrierefreiheitstests Probleme auftreten, wenden Sie sich direkt an Ihren Deque Vertreter, kontaktieren Sie uns über unseren Support-Desk oder senden Sie uns eine E-Mail.(https://www.deque.com/get-accessibility-help/support/)(mailto:helpdesk@deque.com) Wir unterstützen Sie gerne dabei, Ihre Bemühungen zur Barrierefreiheitsprüfung in Gang zu bringen.