Instructions pour Cypress et JavaScript

This page is not available in the language you requested. You have been redirected to the English version of the page.
Link to this page copied to clipboard

Configurer vos tests avec Cypress et JavaScript

Not for use with personal data
  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 cypress.config.js, importez la fonction cypressConfig() du package @axe-core/watcher et encapsulez votre configuration avec elle :

    const { defineConfig } = require('cypress');
    const { cypressConfig } = require('@axe-core/watcher/cypress/config');
    
    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    const SERVER_URL = process.env.SERVER_URL
    
    module.exports = defineConfig(  
      cypressConfig({
        axe: {
          apiKey: ACCESSIBILITY_API_KEY,
          projectId: PROJECT_ID,
          serverURL: SERVER_URL
        },
        // Your existing Cypress configuration code here
      })
    );

    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.

  3. Dans votre fichier de support Cypress (souvent appelé cypress/support/e2e.js), importez cypressCommands et appelez axeWatcherFlush() après chaque test :

    require('@axe-core/watcher/cypress/support');
    
    afterEach(() => {
      cy.axeWatcherFlush();
    });
  4. Vous avez terminé. Exécutez vos tests de bout en bout et vérifiez vos résultats. Veuillez noter que @axe-core/watcher ne s'exécute que dans Chrome for Testing ou Chromium et ne doit être utilisé qu'en mode exécuter de Cypress. Il peut être utilisé avec --headless=new ou --headed (par exemple, cypress run --headed --browser=chrome-for-testing).