important

Axe Watcher nécessite un navigateur pris en charge déjà installé sur votre système : Chrome pour Testing (une installation de navigateur distincte de Google Chrome), Chromium ou Microsoft Edge. Google Chrome, version 139 ou ultérieure, n'est pas pris en charge. Consultez Configuration et installation des navigateurs pour une utilisation avec Axe Watcher pour les instructions d'installation et de configuration.

  1. Au niveau racine de votre dossier de test, installez le package @axe-core/watcher et toutes ses dépendances en utilisant npm ou votre gestionnaire de packages préféré (par exemple, yarn ou pnpm).

    npm install --save-dev @axe-core/watcher
  2. Dans votre fichier ou vos fichiers de test, importez la fonction webdriverConfig(), la fonction wrapWebdriver() et la classe WebdriverController de @axe-core/watcher/webdriver :

    const {
      webdriverConfig,
      wrapWebdriver,
      WebdriverController
    } = require('@axe-core/watcher/webdriver')
  3. Mettez à jour votre code de configuration de test (généralement dans un bloc before ou beforeAll), en spécifiant les options Chrome lors de l'instanciation de votre instance browser, en fournissant votre clé API :

    // Original code:
    let browser = await new Builder()
      .forBrowser('chrome')
      .build()
    
    // Becomes:
    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    const SERVER_URL = process.env.SERVER_URL
    
    let browser = await new Builder()
      .forBrowser('chrome')
      .setChromeOptions(
        webdriverConfig({
          axe: {
            apiKey: ACCESSIBILITY_API_KEY,
            projectId: PROJECT_ID,
            serverURL: SERVER_URL
          }
        }
      )
      .build()

    Assurez-vous de définir ACCESSIBILITY_API_KEY et PROJECT_ID dans votre environnement sur votre clé API personnelle (disponible dans votre compte Axe, onglet **CLÉS API**) et votre ID de projet (indiqué en haut de ces instructions lorsque vous avez créé votre projet ou disponible à partir de la page Projets en choisissant **Configurer le projet** sous **Paramètres**). Si votre organisation utilise une instance Axe Developer Hub régionale, cloud privé ou sur site, définissez également SERVER_URL sur l'URL de base de cette instance (par exemple, https://axe-eu.deque.com) ; sinon, omettez SERVER_URL et la valeur par défaut https://axe.deque.com sera utilisée.

  4. Créez une instance de WebdriverController :

    const controller = new WebdriverController(browser)
    note

    Si vous activez capture d'écran (takeScreenshots: true), notez que WebdriverController n'implémente pas la capture d'écran dans @axe-core/watcher 4.6.0. Pour capturer des captures d'écran, sous-classez WebdriverController, remplacez captureScreenshot() pour appeler la méthode takeScreenshot() de Selenium, et instanciez votre sous-classe à la place :

    class ScreenshotWebdriverController extends WebdriverController {
      async captureScreenshot() {
        return await this.driver.takeScreenshot()
      }
    }
    
    const controller = new ScreenshotWebdriverController(browser)
  5. Enveloppez votre instance browser avec la fonction wrapWebdriver() :

    browser = wrapWebdriver(browser, controller)
  6. Enfin, assurez-vous que tous les résultats de test de Axe Watcher sont bien purgés. Pour ce faire, ajoutez le bloc de code suivant à votre code de démontage de test (généralement dans un bloc afterEach) :

    afterEach(async () => {
      await controller.flush()
    })