Écrire des tests pour Axe DevTools pour le Web pour WebdriverIO

É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 complet d'exemple fournit le test complet dans les deux langues.

Prérequis

Afin d'importer et d'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, depuis votre dépôt d'artifacts, ou depuis l'Agora de Deque. Vous devez également avoir WebdriverIO téléchargé et configuré.

Importation et Initialisation

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

JavaScript avec modules CommonJS

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

const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const webdriverio = require('webdriverio');

JavaScript avec modules ES

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

import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';

TypeScript

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

import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import { remote } from 'webdriverio';
import type { AxeResults } from 'axe-core';

Initialisation du Client

À ce stade, vous pourrez initialiser votre webdriver dans votre fonction de test. En JavaScript :

const client = await webdriverio.remote({
  capabilities: {
    browserName: 'chrome'
  }
});

En TypeScript, le client est un WebdriverIO.Browser, qui est le type attendu par AxeDevToolsWebdriverIO :

const client: WebdriverIO.Browser = await remote({
  capabilities: {
    browserName: 'chrome'
  }
});

Ensuite, vous pouvez initialiser Axe DevTools pour le Web avec le client webdriver. Cette instruction est la même dans les deux langages :

const axeDevTools = new AxeDevToolsWebdriverIO({ client });

Obtenir le contexte de balayage

Avant de pouvoir scanner une page pour l'accessibilité, elle doit être accessible par WebdriverIO.

await client.url('<URL>');

Une fois que WebdriverIO a accédé à la page, vous pouvez la scanner avec Axe DevTools et sauvegarder les résultats. La manière la plus simple de visualiser les résultats du scan est de les afficher dans la console.

const results = await axeDevTools.analyze();
console.log(results);

Exemple de fichier complet

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

JavaScript

const webdriverio = require('webdriverio');
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');

const simpleExample = async () => {
  const client = await webdriverio.remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

TypeScript

import { remote } from 'webdriverio';
import { AxeDevToolsWebdriverIO } from '@axe-devtools/webdriverio';
import type { AxeResults } from 'axe-core';

const simpleExample = async (): Promise<AxeResults> => {
  const client: WebdriverIO.Browser = await remote({
    capabilities: {
      browserName: 'chrome'
    }
  });

  await client.url('https://google.com');

  const axeDevTools = new AxeDevToolsWebdriverIO({ client });
  const results: AxeResults = await axeDevTools.analyze();
  await client.deleteSession();
  return results;
};

simpleExample()
  .then(results => {
    console.log(results);
  })
  .catch(err => {
    throw err;
  });

Prochaines étapes

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

Dépannage

Si vous avez des difficultés à obtenir les résultats du scan, contactez directement votre représentant Deque, contactez-nous via notre bureau d'assistance, ou envoyez-nous un e-mail. Nous serons heureux de vous aider.