Au niveau racine de votre dossier de test, installez le package @axe-core/watcher et toutes ses dépendances à l'aide de npm ou de votre gestionnaire de packages préféré (par exemple, Yarn ou pnpm).
npm install --save-dev @axe-core/watcher
Dans cypress.config.js, importez la fonction cypressConfig du package @axe-core/watcher et encapsulez votre configuration avec cette fonction :
const { defineConfig } = require('cypress');
const { cypressConfig } = require('@axe-core/watcher');
const API_KEY = process.env.API_KEY
module.exports = defineConfig(
cypressConfig({
axe: {
apiKey: API_KEY
},
// Your existing Cypress configuration code here
})
);
Dans votre fichier de support Cypress (communément appelé cypress/support/e2e.js), importez les commandes Cypress du package @axe-core/watcher et appelez axeWatcherFlush() après chaque test :
require('@axe-core/watcher/dist/cypressCommands');
afterEach(() => {
cy.axeWatcherFlush();
});
Vous avez terminé. Exécutez vos tests de bout en bout et vérifiez vos résultats. Veuillez noter que @axe-core/watcher ne fonctionne que dans Chrome et ne doit être utilisé qu'en mode d'exécution Cypress. Il peut être utilisé avec --headless=new ou --headed (par exemple, cypress run --headed --browser=chrome
).