Écrire des tests pour Axe DevTools for Web pour WebDriverJS

Écrire des tests avec Axe DevTools

Les extraits individuels dans les sections ci-dessous sont en JavaScript et ils se compilent sans modification en TypeScript. La section Fichier d'exemple complet donne le test complet dans les deux langues.

Prérequis

Pour importer et initialiser Axe DevTools pour le Web, il doit d'abord être installé. Si ce n'est pas encore fait, lisez le guide sur la façon de l'installer à partir d'un bundle, à partir de votre dépôt d'artifacts, ou à partir de l'Agora de Deque. Vous devez également disposer d'un Selenium WebDriver téléchargé et configuré de votre choix.

Importation et Initialisation

Importez à la fois Axe DevTools pour le Web et WebDriverJS. La syntaxe dépend du langage et du système de modules utilisés par votre projet. Choisissez celui qui correspond à votre projet :

JavaScript avec modules CommonJS

C'est la configuration par défaut pour un projet Node.js sans "type": "module" dans son package.json.

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const webdriver = require('selenium-webdriver');

JavaScript avec modules ES

Utilisez cette syntaxe dans un projet avec "type": "module" dans son package.json, ou dans des fichiers .mjs.

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import webdriver from 'selenium-webdriver';

TypeScript

TypeScript utilise la même syntaxe import que les modules ES. @axe-devtools/webdriverjs inclut ses propres déclarations de types, donc il n'y a pas de paquet @types/ séparé à installer. Les résultats de l'analyse sont typés comme AxeResults, que axe-core exporte :

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

Initialisation du Driver

Une fois que vous avez importé Axe DevTools pour le Web, vous pouvez initialiser le driver. Chaque analyse nécessite sa propre instance de Axe DevTools pour le Web, donc vous l'initialiserez lors de l'écriture des tests.

En JavaScript :

const driver = new webdriver.Builder().forBrowser('chrome').build();

En TypeScript, en utilisant les types Builder et WebDriver importés ci-dessus :

const driver: WebDriver = new Builder().forBrowser('chrome').build();

Obtenir le contexte de numérisation

Avant de pouvoir analyser une page pour l'accessibilité, elle doit être accessible par le webdriver.

await driver.get('<URL>');

Une fois que le webdriver a accédé à la page, vous pouvez l'analyser avec Axe DevTools et sauvegarder les résultats. La manière la plus simple de visualiser les résultats de l'analyse est d'afficher l'objet des résultats dans la console.

const results = await new AxeDevToolsBuilder(driver).analyze();
console.log(results);

Fichier d'exemple complet

Le même test est présenté ci-dessous en JavaScript et en TypeScript. L'API Axe DevTools est identique dans les deux ; la version TypeScript utilise la syntaxe import et annote le pilote ainsi que les résultats de l'analyse.

JavaScript

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');

var driver = new WebDriver.Builder().forBrowser('chrome').build();

driver.get('https://google.com').then(function() {
  new AxeDevToolsBuilder(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    console.log(results);
  });
});

TypeScript

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

(async () => {
  const driver: WebDriver = new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://google.com');
    const results: AxeResults = await new AxeDevToolsBuilder(driver).analyze();
    console.log(results);
  } finally {
    await driver.quit();
  }
})();

Étapes suivantes

Maintenant que vous avez réussi à effectuer un scan d'accessibilité, vous êtes prêt à passer à des sujets de scan plus avancés comme générer des rapports et utiliser l'objet des résultats.

Dépannage

Si vous avez des difficultés à obtenir les résultats de l'analyse, contactez directement votre représentant Deque, rejoignez-nous via notre service d'assistance, ou envoyez-nous un email. Nous serons heureux de vous aider.