É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

Afin de tester les pages avec Axe DevTools, vous devez d'abord l'importer et l'initialiser dans votre projet. Si vous n'avez pas encore effectué cette étape, consultez ce guide pour savoir comment faire.

Obtention du contexte de scan

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

Prochaines étapes

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.