Écrire des tests Cucumber

Utilisation de Cucumber avec axe DevTools

Prérequis

Afin d'écrire des tests d'accessibilité et de produire 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);

    }
}

Rédaction de 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 pilote d'analyse axe DevTools et transmettre le WebDriver

AxeDriver axeDriver = new AxeDriver(webDriver);

Enfin, incluez l'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 l’accessibilité de la page. Actuellement, axe DevTools prend en charge les tests Pico et Spring via Cucumber.

Usage

Étapes d'accessibilité Cucumber

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 éléments réside dans le fait que les tests échoueront en cas de violation d'accessibilité avec Then the page should be axe clean, contre ne pas échouer avec Then the page should be audited for accessibility.

Pour construire une étape d'accessibilité de type Axe Cucumber, commencez par l'étape de base et ajoutez toutes les clauses nécessaires. Toutes les clauses suivantes peuvent être mélangées et appariées ; 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 principal de l'étape Cucumber. Il s’agit d’une étape complète en soi qui vérifie que la page actuellement chargée est accessible. Il effectue un audit sur l'accessibilité de votre page. L'audit enregistre les problèmes d'accessibilité dans target/axe-report/accessibility-check.log et crée une sortie JSON des résultats dans 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.

Portée

Axe DevTools permet d'effectuer des analyses d'accessibilité de manière inclusive et exclusive. De plus, ces portées peuvent fonctionner les unes avec les autres pour créer des zones d'inclusion et d'exclusion complexes. Ces portées fonctionnent à partir de sélecteurs CSS.

Clause d'inclusion

La clause d'inclusion within "#selector" spécifie les éléments à vérifier sur la page. Seuls les éléments dans la portée sélectionnée seront analysé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 les éléments à ignorer. Aucun élément dans la portée sélectionnée ne sera analysé. 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îner inclusion et exclusion

Afin d'enchaîner les clauses d'inclusion et d'exclusion, utilisez le point-virgule (;) ou le mot ou 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ègle standard à l'aide de l'API Cucumber. Vous pouvez sélectionner des règles par groupe grâce à l'utilisation de balises ou sélectionner des règles individuellement par leur ID de règle.

Clause d'étiquette de règle

La clause d'étiquette spécifie la ou les normes d'accessibilité à utiliser dans la vérification de la page. Spécifiez les normes d'accessibilité par nom (Étiquette). Plusieurs normes peuvent être spécifiées en les séparant par des virgules. Par exemple according to: wcag2a, section508

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

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

Vérification de la clause 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 règle unique par ID de règle ou une liste de règles séparées par des virgules. Consultez la documentation des règles pour obtenir une liste des règles et de leurs identifiants de règle. Utilisez un point-virgule (;) ou le mot 'à' and pour séparer la clause de vérification des règles de toutes les clauses précédentes.

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

Vérification uniquement des règles spécifiées

En ajoutant le mot only [missing word]à la clause de vérification des règles, vous pouvez modifier 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 obtenir une liste des règles et de leurs identifiants de règle. Utilisez un point-virgule (;) ou le mot 'à' and pour séparer la clause de vérification des règles de toutes les clauses précédentes.

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

Clause de saut de règles

L'instruction skipping-rules spécifie les règles à ignorer dans la configuration de règle existante. Les règles à ignorer sont spécifiées par des ID de règle séparés par des virgules. Consultez la documentation des règles pour obtenir une liste des règles et de leurs identifiants de règle. Utilisez un point-virgule (;) ou le mot and à pour séparer la clause de vérification des règles de toutes les clauses précédentes.

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 des règles

Accédez aux ensembles de règles balisés dans 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

Approfondissez votre compréhension des tendances d'utilisation d'axe DevTools au sein de votre organisation

Par défaut, le service d'utilisation est désactivé et l'URL par défaut est https://usage.deque.com.

Variables d'environnement

Cette méthode permet aux utilisateurs de modifier des valeurs spécifiques du service d'utilisation via des variables d'environnement

Prochaines étapes

Pour une utilisation ultérieure des résultats de votre analyse axe DevTools, comme la création de rapports, consultez la 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, contactez-nous via notre service d'assistance ou envoyez-nous un e-mail. Nous sommes heureux de vous aider à démarrer vos efforts de tests d'accessibilité.