Écrire des tests Cucumber

Utiliser Cucumber avec Axe DevTools

Prérequis

Pour écrire des tests d'accessibilité et obtenir des résultats, vous devez avoir déjà créé un fichier de test avec Axe DevTools et votre choix de Selenium WebDriver pré-importé et pré-initialisé. Si vous ne l'avez pas encore fait, lisez ce guide pour savoir comment procéder.

Configuration

Tout d'abord, ajoutez Axe DevTools à votre configuration

public class AppConfiguration {

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

Ajoutez maintenant les étapes requises pour utiliser Axe DevTools

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

    }
}

Écriture des tests

Avant de pouvoir tester une page, vous devez y accéder. La première étape consiste à instancier Selenium WebDriver et à accéder à une page

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

Ensuite, vous pouvez créer un objet de pilote de scan Axe DevTools et passer le WebDriver

AxeDriver axeDriver = new AxeDriver(webDriver);

Enfin, incluez le axeDriver dans vos définitions d'étapes

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

Vous pouvez ensuite tester la page pour l'accessibilité. Actuellement, Axe DevTools prend en charge les tests Pico et Spring via Cucumber.

Utilisation

Étapes Cucumber pour l'accessibilité

Les exemples de vérifications d'accessibilité ci-dessous utilisent Then the page should be axe clean, mais toutes les vérifications fonctionnent de manière interchangeable avec Then the page should be audited for accessibility. La différence entre ces deux est de savoir si le test échouera sur des violations d'accessibilité avec Then the page should be axe clean, ou ne pas échouer avec Then the page should be audited for accessibility.

Pour construire une étape Cucumber d'accessibilité axe, commencez par l'étape de base et ajoutez les clauses nécessaires. Toutes les clauses suivantes peuvent être mélangées et assorties ; cependant, elles doivent apparaître dans l'ordre spécifié :

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

Étape de base

L'étape de base est le composant central de l'étape Cucumber. Elle est une étape complète à elle seule et vérifie que la page actuellement chargée est accessible. Elle effectue un audit de l'accessibilité de votre page. L'audit consigne les problèmes d'accessibilité dans target/axe-report/accessibility-check.log et crée une sortie JSON des résultats à 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.

Détermination de la portée

Axe DevTools permet d'effectuer des scans d'accessibilité avec une portée inclusive et exclusive. De plus, ces portées peuvent fonctionner les unes avec les autres pour créer des enclaves et exclaves complexes de portée. Ces portées fonctionnent à l'aide de sélecteurs CSS.

Clause d'inclusion

La clause d'inclusion within "#selector" spécifie quels éléments vérifier sur la page. Seuls les éléments dans la portée sélectionnée seront scannés. La clause d'inclusion doit inclure un sélecteur CSS valide entouré de guillemets doubles. Utilisez des sélecteurs composés pour sélectionner plusieurs éléments. Par exemple within "#header, .footer"

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

Clause d'exclusion

La clause d'exclusion excluding "#selector" spécifie quels éléments ignorer. Aucun élément dans la portée sélectionnée ne sera scanné. La clause d'exclusion doit inclure un sélecteur CSS valide entouré de guillemets doubles. Utilisez des sélecteurs composés pour sélectionner plusieurs éléments. Par exemple excluding "#widget, .ad"

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

Enchaînement des clauses d'inclusion et d'exclusion

Pour enchaîner les clauses d'inclusion et d'exclusion, utilisez le point-virgule (;) ou le mot mais pour les séparer.

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

Configuration des règles

Il existe plusieurs façons de modifier votre configuration de règles standard à l'aide de l'API Cucumber. Vous pouvez sélectionner des règles par groupe à l'aide de tags, ou sélectionner des règles individuellement par leur ID de règle.

Clause du tag de règle

La clause de tag spécifie quelle norme d'accessibilité (ou quelles normes) utiliser dans la vérification de la page. Spécifiez les normes d'accessibilité par nom (tag). Plusieurs normes peuvent être spécifiées lorsqu'elles sont séparées par des virgules. Par exemple according to: wcag2a, section508

Tous les les noms de tags sont documentés en plus d'une liste complète des descriptions des règles qui correspondent à chaque tag.

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

Clause de vérification des règles supplémentaires

Cette clause vous permet d'ajouter des règles supplémentaires à vos règles existantes. Vous pouvez spécifier une seule règle par son ID de règle, ou une liste de règles séparées par des virgules. Consultez la documentation des règles pour une liste des règles et de leurs IDs de règle. Utilisez un point-virgule (;) ou le mot and pour séparer la clause de vérification des règles de toute clause précédente.

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

Clause de vérification uniquement des règles spécifiées

En ajoutant le mot only à la clause de vérification des règles, vous pouvez changer la signification de l'étape. Comme décrit précédemment, la clause de vérification des règles spécifie des règles supplémentaires à exécuter. Seules les règles spécifiées sont vérifiées si le mot only est utilisé. Consultez la documentation des règles pour une liste des règles et de leurs IDs de règle. Utilisez un point-virgule (;) ou le mot and pour séparer la clause de vérification des règles de toute clause précédente.

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

Clause des règles à sauter

La clause des règles à sauter spécifie quelles règles ignorer dans la configuration de règles existante. Les règles à sauter sont spécifiées par leurs IDs de règle séparés par des virgules. Consultez la documentation des règles pour une liste des règles et de leurs IDs de règle. Utilisez un point-virgule (;) ou le mot and pour séparer la clause de vérification des règles de toute clause précédente.

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

Clause de sélection de l'ensemble des règles

Accédez aux ensembles de règles tagués dans le axeDriver via une clause Cucumber. Cette fonctionnalité vous permet de spécifier un ensemble de règles (par exemple : 508, wcag2, wcag2.1) pour auditer l'accessibilité des pages.

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

Service d'utilisation

Obtenez des informations sur les tendances d'utilisation d'Axe DevTools au sein de votre organisation

Par défaut, le service d'utilisation est activé et l'URL par défaut est https://usage.deque.com. Définissez la variable d'environnement AXE_TRACK_USAGE sur false pour le désactiver. Si vos événements d'utilisation n'atteignent pas Deque, définissez explicitement la variable d'environnement AXE_METRICS_URL.

Variables d'environnement

Ces variables d'environnement vous permettent de configurer le service d'utilisation et de modifier les propriétés des événements signalés.

Prochaines étapes

Pour une utilisation ultérieure de vos résultats d'analyse Axe DevTools, comme le reporting, consultez le documentation du package Axe DevTools Java Selenium

Dépannage

Si vous rencontrez des problèmes lors de la configuration de vos tests d'accessibilité, contactez directement votre représentant Deque, atteignez-nous via notre service d'assistance, ou envoyez-nous un email. Nous serons ravis de vous aider à démarrer vos efforts de tests d'accessibilité.