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/watcherDans 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 avec votre clé API personnelle (trouvée 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 sur la page Projets en choisissant **Configurer le projet** sous **Paramètres**). Si votre organisation utilise une instance Axe Developer Hub régionale, privée, 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)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 vidés. Pour ce faire, ajoutez le bloc de code suivant à votre code de démantèlement de test (généralement dans un bloc afterEach) :
afterEach(async () => {
await controller.flush()
})