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.ts die Funktion cypressConfig aus dem Paket @axe-core/watcher und umschließen Sie Ihre Konfiguration damit:

import { defineConfig } from 'cypress';
import { cypressConfig } from '@axe-core/watcher';

const API_KEY = process.env.API_KEY

export default defineConfig(
  cypressConfig({
    axe: {
      apiKey: API_KEY
    },
    // Your existing Cypress configuration code here
  })
);

Importieren Sie in Ihrer Cypress-Supportdatei (üblicherweise cypress/support/e2e.ts genannt) das @axe-core/watcher Paket cypressCommands und rufen Sie nach jedem Test axeWatcherFlush() auf:

import '@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 läuft 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).