É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

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

Obtenir le contexte du scan

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

Étapes Suivantes

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.