Rédiger des tests Selenium

Utiliser Axe DevTools Java Selenium

Cette configuration Axe DevTools n'est pas liée de manière inhérente à une bibliothèque d'assertion. Cela permet des tests d'accessibilité simplifiés ainsi qu'une personnalisation complète des tests et l'utilisation avec des assertions personnalisées.

Prérequis

Pour utiliser Axe DevTools Java Selenium et en produire des résultats, vous devez avoir déjà créé un fichier de test avec Axe DevTools et avoir importé et initialisé votre choix de Selenium WebDriver. Si vous n'avez pas effectué cette étape, lisez d'abord ce guide pour savoir comment procéder.

Exécuter un scan

Avec cette configuration, l'exécution d'un scan d'accessibilité de base nécessite seulement trois lignes de code. Dans votre fichier de test, remplacez <URL> par l'adresse web souhaitée de la page que vous voulez tester. Les résultats du scan sont sauvegardés dans la variable results.

webdriver.get("<URL>");
Results results = axeSelenium.run(axedriver);
webdriver.quit();

Utiliser les résultats du scan

Une fois le scan effectué, vous voudrez peut-être faire quelque chose avec les résultats. L'option la plus simple est d'imprimer les résultats sur la console.

System.out.print(results);

Vous pouvez également utiliser les résultats pour vérifier les violations d'accessibilité. La façon la plus simple de le faire est avec une déclaration comme celle-ci :

if (!results.violationFree()) { 
    //do something, like throw an exception
}

Pour plus d'informations sur la façon d'utiliser l'objet des résultats pour écrire des tests personnalisés, consultez la page sur en utilisant les résultats.

Fichier de test exemple

Ce fichier de test fonctionne avec les mêmes blocs de construction couverts dans importer et initialiser ainsi que le guide d'écriture des tests sur cette page.

import com.deque.html.axedevtools.selenium.*;
import com.deque.html.axedevtools.selenium.results.*;

import org.openqa.selenium.WebDriver;
import org.openqa.selenium.chrome.ChromeDriver;

public class Example {
    public static void main(final String[] args) {
        AxeSelenium axeselenium = new AxeSelenium();
        WebDriver webdriver = new ChromeDriver();
        AxeDriver axedriver = new AxeDriver(wd);

        webdriver.get("<URL>");

        Results results = axeselenium.run(axedriver);

        webdriver.quit();

        if (!results.violationFree()) {
            int violationCount = results.getViolations().size();
            System.out.printf("Found %d violations!\n", violationCount);
            System.exit(1);
        }

        System.out.println("No violations found!");
    }
}

Dans cet exemple, Chrome et ChromeDriver sont utilisés. Cela peut être remplacé par tout autre pilote de navigateur selenium et navigateur. Si ce fichier de test trouve des problèmes d'accessibilité, il imprime le nombre de violations trouvées et se termine avec le code de sortie 1 (erreur). Pour utiliser ce fichier de test dans votre propre environnement, vous devrez ajouter une URL à la ligne.

webdriver.get("<URL>");

Référence supplémentaire

En plus de l'utilisation de base décrite ci-dessus, Axe DevTools Java Selenium offre plusieurs méthodes de chaînage pour modifier la façon dont le scan est exécuté. Ces méthodes peuvent modifier la portée du scan et le jeu de règles pour toute configuration souhaitée. Par défaut, toute la page est scannée et vérifiée pour les violations d'accessibilité selon les directives de niveau AA de la WCAG 2.0. Une note importante est que les appels successifs à la méthode run remplaceront toutes les préférences des méthodes de chaînage ci-dessous. Les changements apportés à la portée ou aux règles ne persistent pas pour plusieurs scans utilisant ces méthodes de chaînage.

Délimitation

Par défaut, toute la page est scannée. Cependant, Axe DevTools permet de scanner des portions spécifiques d'une page avec ses méthodes de chaînage de délimitation. Ces méthodes de délimitation modifient efficacement la "surface" de la page à scanner pour atteindre la ou les zones ciblées. De plus, une méthode d'ignorer les violations est disponible. "Délimiter" la page avec cette méthode ne réduit pas la zone du scan, mais ignore les violations d'un type spécifié dans la zone spécifiée et continue de scanner la zone pour d'autres violations potentielles. Toutes ces méthodes fonctionnent en se basant sur les zones de sélecteurs CSS. La zone de chaque sélecteur CSS sur une page donnée peut être déterminée en utilisant l'outil "inspecter l'élément" de votre navigateur.

Méthodes de délimitation

Comme expliqué ci-dessus, ces méthodes modifient efficacement la surface de la page à scanner. Il existe deux méthodes dans cette catégorie, une méthode "inclusive" et une méthode "exclusive". Elles peuvent être chaînées mutuellement pour créer plusieurs enclaves et exclaves de surface de scan.

Délimitation - Inclusion

La méthode de chaînage de délimitation par inclusion modifie le scan pour ne s'exécuter que dans la zone de page spécifiée par le(s) sélecteur(s) CSS passé(s). Il existe plusieurs façons d'utiliser la méthode d'inclusion : portée unique, portée multiple, portée composée et délimitation de cadre.

Cette méthode peut être utilisée avec un seul sélecteur de la manière suivante :

axeselenium.including("#selector1").run(axedriver);

Ce scan ne s'exécutera que dans le périmètre de sélection 1.

Vous pouvez configurer un scan avec plusieurs portées :

axeselenium.including("#selector1").including("#selector2").run(axedriver);

Cet appel scannera dans le périmètre du sélecteur 1 et du sélecteur 2. Ils peuvent soit être séparés par des virgules, soit déclarés dans une clause d'inclusion distincte.

Une délimitation composée peut être réalisée avec la syntaxe suivante :

axeselenium.including("#selector1 .selector2").run(axedriver);

Cette délimitation composée entraîne uniquement le scan des éléments avec le sélecteur 2 à l'intérieur du sélecteur 1. Cela est configuré en ne séparant pas les sélecteurs par des virgules.

Pour délimiter à l'intérieur d'un IFrame, un List<String> peut être passé. Le périmètre à scanner à l'intérieur de l'IFrame est passé comme paramètre supplémentaire.

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"})).run(axedriver);

Ce scan s'exécute sur les éléments dans le sélecteur 1, qui est à l'intérieur du cadre 1.

La délimitation à l'intérieur de plusieurs IFrames fonctionne de la même manière que la sélection multiple standard. Appelez simplement including à nouveau.

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#selector1"}))
    .including(Arrays.asList(new String[] {"#frame2", "#selector2"})).run(axedriver);

Ce scan ne s'exécute qu'à l'intérieur du sélecteur 1 dans le cadre 1, et du sélecteur 2 dans le cadre 2.

Il est également possible de délimiter à l'intérieur d'IFrames imbriqués :

axeselenium.including(Arrays.asList(new String[] {"#frame1", "#frame2", "#selector1"})).run(axedriver);

Ce scan s'exécute dans le périmètre du sélecteur 1 à l'intérieur du cadre 2, qui se trouve lui-même à l'intérieur du cadre 1.

Délimitation - Exclusion

En plus de la méthode de chaînage d'inclusion, cette API a une méthode d'exclusion. Cette méthode modifie le scan afin que seuls les éléments en dehors du périmètre spécifié soient scannés. Sa configuration et son utilisation sont identiques à la méthode d'inclusion, reportez-vous donc à la section ci-dessus pour plus de détails et d'exemples sur son utilisation. Un détail important à se rappeler est que les méthodes d'inclusion et d'exclusion peuvent être chaînées entre elles pour créer des périmètres complexes bien plus facilement qu'en utilisant uniquement l'inclusion ou l'exclusion.

Cet exemple montre une façon d'associer les méthodes d'inclusion et d'exclusion :

axeselenium.including("#selector1").excluding("#selector2").run(axedriver);

Ce scan ne s'exécute que sur la partie de la page qui est dans le sélecteur 1 qui n'est pas également dans le sélecteur 2.

Délimitation - Ignorer les violations

La dernière méthode de chaînage liée à la délimitation est la méthode d'ignorer les résultats. Cette méthode ne modifie pas l'étendue générale du scan, mais ignore les violations d'un type spécifié dans un périmètre spécifié. Elle fonctionne en passant les sélecteurs des éléments que vous souhaitez ignorer sous forme de tableau, couplés avec la règle qu'ils violent.

axeselenium.ignoring("[\".sidebar\", \"#branded-content\"]", "color-contrast").run(axedriver);

Ce scan ignorera les violations de contraste de couleur dans la section barre latérale et la section de contenu de marque.

Règles

Il existe trois façons de modifier votre configuration des règles pour chaque scan. Ces différentes méthodes permettent une granularité différente lors de la sélection des règles à tester. La méthode de règles la moins granulaire sélectionne un ensemble de règles, ou un groupe plus large de règles basées sur les standards d'accessibilité communs. La méthode des standards de règles légèrement plus granulaire, également connue sous le nom de tags, sélectionne les règles en fonction de la portée qu'elles ont au sein d'un plus grand standard d'accessibilité. Enfin, il existe trois options pour la configuration avec une règle à la fois. Dans l'ensemble, ces méthodes de chaînage vous permettent d'affiner votre scan pour exécuter précisément les règles que vous souhaitez.

Pour des informations sur les règles axe-core, visitez la page de vue d'ensemble des règles.

Sélection de règles

Cette méthode sélectionne des règles par leur association la plus agrégée - un ensemble de règles. Un ensemble de règles est une collection de toutes les règles qui se rapportent à une norme d'accessibilité reconnue dans l'industrie. Ensembles de règles pour WCAG 2.0, 2.1 et 2.2; ADA Section 508; Trusted Tester v5; EN 301 549; et RGAA. De plus, des règles de bonnes pratiques peuvent être activées avec un indicateur booléen.

Les ensembles de règles sont souvent composés de plusieurs tags, qui sont des règles groupées par des distinctions plus spécifiques. Par exemple, l'ensemble wcag2 contient toutes les règles étiquetées wcag2a règles de niveau A pour WCAG 2.0, wcag2aa pour les règles de niveau AA pour WCAG 2.0, et wcag2aaa pour les règles de niveau AAA pour WCAG 2.0.

Utilisez cette option lorsque vous souhaitez sélectionner un ensemble de règles non modifié.

axeselenium.forRuleset("wcag2.1").run(axedriver);

Ce test sera exécuté uniquement avec les règles de WCAG 2.1.

Pour activer les règles de bonnes pratiques, utilisez la deuxième forme de forRuleset.

axeselenium.forRuleset("wcag2.1", true).run(axedriver);

Sélection de la norme

La méthode de chaîne de normes d'accessibilité ou de tags permet une granularité légèrement plus fine au sein des ensembles de règles d'axe-core. Pour les règles basées sur WCAG, cette méthode vous permet de sélectionner uniquement les règles étiquetées A simple ou AA double. Cette liste détaille les noms de tags disponibles et leurs normes correspondantes.

Cette option est particulièrement utile lors du test d'une partie spécifique d'un ensemble de règles, par exemple, uniquement les règles A simple sous WCAG 2.0.

Bien qu'elles ne soient pas définies explicitement comme une partie de toute norme d'accessibilité, nous proposons un certain nombre de règles que nous appelons « meilleures pratiques ». Bien que non strictement nécessaires, tester avec ces règles aidera votre site web à être aussi équitable que possible dans son utilisation.

Une seule norme peut être sélectionnée de la manière suivante :

axeselenium.accordingTo("wcag2a").run(axedriver);

Ce test sera exécuté uniquement avec les règles étiquetées sous WCAG 2.0 niveau A.

En outre, plusieurs tags peuvent être spécifiés pour sélectionner plusieurs normes d'accessibilité :

axeselenium.accordingTo("wcag2a", "section508").run(axedriver);

Ces tests exécuteront à la fois les règles étiquetées sous WCAG 2.0 niveau A et ADA Section 508.

Sélection de la règle

Enfin, vous pouvez modifier votre ensemble de règles par une seule règle. Pour des informations sur les noms de toutes les règles d'axe-core et sur ce que teste chaque règle, consultez le documentation des descriptions de règles axe-core.

Ces méthodes fonctionnent bien lorsque votre groupe final de règles souhaité ne diffère d'un ensemble de règles ou d'une norme/tag existant que par quelques règles individuelles. Pour construire un ensemble de règles entièrement personnalisé, consultez nos options de règles personnalisées.

Vérification de règles supplémentaires

La méthode de chaîne de vérification vous permet d'ajouter des règles supplémentaires pour tester en plus de votre ensemble de règles standard.

Cette méthode peut être utilisée pour vérifier une règle supplémentaire unique :

axeselenium.checking("label").run(axedriver);

où l'analyse est effectuée avec l'ensemble de règles par défaut en plus de la règle « label ».

Elle peut également être utilisée pour vérifier plusieurs règles supplémentaires de deux manières différentes :

axeselenium.checking("label", "tabindex").run(axedriver);
axeselenium.checking("label").checking("tabindex").run(axedriver);

où l'analyse est exécutée avec l'ensemble de règles par défaut ainsi que les règles « label » et « tabindex ».

Elle peut également servir à ajouter une ou plusieurs règles à un tag spécifié :

axeselenium.accordingTo("wcag2a").checking("tabindex").run(axedriver);

où l'analyse est effectuée en testant par rapport aux règles de niveau A de la WCAG 2.0, avec l'ajout de la règle « tabindex ».

Sauter des Règles

Similaire à la méthode de vérification, la méthode de saut modifie les règles par défaut à utiliser par la ou les règles spécifiées. Cependant, au lieu de l'ajouter à l’ensemble de règles, la méthode de saut retire la ou les règles spécifiées de celles utilisées pour tester la page. Sa configuration et son utilisation sont identiques à la méthode de vérification, alors référez-vous à la section ci-dessus pour plus de détails et d'exemples sur la façon de l'utiliser. Un détail important à retenir est que les méthodes de vérification et de saut peuvent être enchaînées entre elles pour créer des ensembles de règles personnalisés beaucoup plus simplement qu'en utilisant uniquement les méthodes d'ignorance ou de vérification seules.

axeselenium.accordingTo("wcag2a").checking("tabindex").skipping("label").run(axedriver);

Cet exemple montre une analyse testant les règles de niveau A de la WCAG 2.0, avec l'ajout de la règle « tabindex » et la suppression de la règle « label ».

Vérification Uniquement

La méthode de vérification uniquement vérifie seulement la ou les règles spécifiées. Toute règle non spécifiquement indiquée ne sera pas incluse dans l'analyse.

Cette méthode en chaîne peut être utilisée pour spécifier une règle unique :

axeselenium.checkingOnly("tabindex").run(axedriver);

où l'analyse est effectuée avec uniquement la règle « tabindex ».

Elle peut également servir à spécifier plus d'une règle de ces deux manières :

axeselenium.checkingOnly("label", "tabindex").run(axedriver);
axeselenium.checkingOnly("label").checkingOnly("tabindex").run(axedriver);

où l'analyse est effectuée avec uniquement les règles « label » et « tabindex ».

Désactivation du iframe

Sur les pages volatiles, les iframes peuvent causer des problèmes. Axe doit être injecté dans chaque cadre et configuré de la même manière dans chacun d'eux. Si des iframes sont ajoutés ou supprimés pendant que AxeSelenium::run teste votre page, il est possible que des exceptions soient levées ou qu'un comportement inattendu se produise. Par mesure de sécurité, AxeSelenium expose une méthode pour désactiver toute interaction avec les iframes, AxeSelenium::disableIframeTesting. Lorsqu'elle est activée, axe-core ne sera pas injecté dans les iframes de la page, ni exécuté dans ces iframes. Seule la page de niveau supérieur sera vérifiée.

Elle peut être utilisée ainsi :

axeselenium.disableIframeTesting().run(axedriver);

Service d'Utilisation

Obtenez un aperçu des tendances d'utilisation d'Axe DevTools au sein de votre organisation

Le service d'utilisation peut être configuré via des variables d'environnement ou des méthodes à l'exécution. Lorsqu'ils sont utilisés ensemble, les valeurs des méthodes sont prioritaires. Remarque : tous les champs de données du service d'utilisation ne peuvent pas être définis via des méthodes.

Par défaut, le service d'utilisation est activé et les résultats sont envoyés à 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.

Activation du Suivi

Cette méthode permet aux utilisateurs de choisir d'envoyer ou non des données au service d'utilisation. L'envoi est activé par défaut.

.enableTracking(boolean state)

Définir l'URL de Suivi

Cette méthode permet aux utilisateurs de modifier l'endroit où les données de métriques d'utilisation sont envoyées. Par défaut, cela revient à https://usage.deque.com

.setTrackingUrl(String url)

Définir l'ID Distinct

Cette méthode permet aux utilisateurs de modifier l'identifiant distinct stocké/utilisé

.setDistinctId(String distinctId)

Étapes Suivantes

Une fois que vous écrivez des tests avec Axe DevTools, lisez-en plus sur utilisation des résultats pour écrire des tests personnalisés plus détaillés, ou lisez-en plus sur utilisation du rapporteur pour générer des rapports des analyses d'accessibilité.

Dépannage

Si vous rencontrez des problèmes pour configurer vos tests d'accessibilité, contactez directement votre représentant Deque, joignez-nous via notre service d'assistance, ou envoyez-nous un email. Nous sommes heureux de vous aider à lancer vos efforts de tests d'accessibilité.