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
important

Axe Watcher nécessite un navigateur compatible : Chrome for Testing (une installation de navigateur distincte, différente de Google Chrome), Chromium ou Microsoft Edge. Le navigateur Electron intégré de Cypress n'est pas compatible, donc lancez Cypress avec cypress run --browser chrome-for-testing --headless (ou chromium / edge). Consultez Configuration et Paramétrage des Navigateurs pour Utiliser Axe Watcher pour les instructions d'installation.

  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 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.

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

Is this page helpful?

Help us improve this page

Still need help?