Installieren Sie auf der Stammebene Ihres Testordners das Paket @axe-core/watcher und alle seine Abhängigkeiten mit npm oder Ihrem bevorzugten Paketmanager (z. B. Yarn oder pnpm).

npm install --save-dev @axe-core/watcher

Importieren Sie in cypress.config.js die Funktion cypressConfig aus dem Paket @axe-core/watcher und umschließen Sie Ihre Konfiguration damit:

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

Importieren Sie in Ihre Cypress-Supportdatei (üblicherweise cypress/support/e2e.js genannt) die Cypress-Befehle des Pakets @axe-core/watcher und rufen Sie nach jedem Test axeWatcherFlush() auf:

require('@axe-core/watcher/dist/cypressCommands');

afterEach(() => {
  cy.axeWatcherFlush();
});

Sie haben alles erledigt. Führen Sie Ihre End-to-End-Tests durch und überprüfen Sie Ihre Ergebnisse. Bitte beachten Sie, dass @axe-core/watcher nur in Chrome ausgeführt wird und nur im Cypress-Ausführungsmodus verwendet werden sollte. Es kann verwendet werden mit --headless=neu oder --headed (zum Beispiel cypress run --headed --browser=chrome).