Importation et initialisation pour WebdriverIO

Une fois que vous avez installé Axe DevTools pour Web, vous devez l’importer dans votre environnement de test et initialiser le package.

Prérequis

Pour importer et initialiser Axe DevTools pour Web, il doit d'abord être installé. Si ce n'est pas encore fait, lisez le guide sur comment l'installer à partir d'un bundle, à partir de votre dépôt d'artéfacts, ou à partir de l'Agora de Deque. Vous devez également avoir téléchargé et configuré WebdriverIO.

Importation et initialisation

Importez à la fois Axe DevTools pour Web et WebdriverIO. La syntaxe dépend du langage et du système de modules utilisés par votre projet. Choisissez celle 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 { 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 fournit ses propres déclarations de types, il n'y a donc pas de paquet @types/ séparé à installer. Les résultats d'analyse sont typés en tant que AxeResults, que 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, ce que AxeDevToolsWebdriverIO attend :

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

Prochaines étapes

Une fois que vous avez installé, importé et initialisé Axe DevTools pour Web et son pilote, vous êtes prêt à passer à l'analyse de l'accessibilité et à l'écriture de tests d'accessibilité. Chaque analyse avec Axe DevTools pour Web nécessite une nouvelle instance, donc pour configurer et exécuter vos analyses, consultez le guide sur écriture de tests.

Dépannage

Si vous rencontrez des problèmes avec l'importation ou l'initialisation d'Axe DevTools pour Web, contactez directement votre représentant Deque, contactez-nous via notre service d'assistance, ou envoyez-nous un email. Nous serons ravis de vous aider.