Instructions pour WebDriverJS et JavaScript

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

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')

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.

Créez une instance de WebdriverController :

const controller = new WebdriverController(browser)

class ScreenshotWebdriverController extends WebdriverController {
  async captureScreenshot() {
    return await this.driver.takeScreenshot()
  }
}

const controller = new ScreenshotWebdriverController(browser)

Enveloppez votre instance browser avec la fonction wrapWebdriver() :

browser = wrapWebdriver(browser, controller)

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