Instructies voor Cypress en 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

Uw tests configureren met Cypress en JavaScript

Not for use with personal data
  1. Installeer in de hoofdmap van je testmap het @axe-core/watcher-pakket en al zijn afhankelijkheden met npm of je voorkeurspakketbeheerder (bijvoorbeeld yarn of pnpm).

    npm install --save-dev @axe-core/watcher
  2. In cypress.config.js, importeer de cypressConfig() functie uit het @axe-core/watcher pakket en omhul uw configuratie ermee:

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

    Zorg ervoor dat u ACCESSIBILITY_API_KEY en PROJECT_ID in uw omgeving instelt op uw persoonlijke API-sleutel (te vinden in uw axe-account, **API-SLEUTELS** tabblad) en uw project-ID (aangegeven bovenaan deze instructies toen u uw project maakte of beschikbaar op de projectenpagina door **Project configureren** te kiezen onder **Instellingen**). Als uw organisatie een regionale, private cloud of on-premises Axe Developer Hub-instance gebruikt, stel dan ook SERVER_URL in op de basis-URL van die instance (bijvoorbeeld https://axe-eu.deque.com); anders laat u SERVER_URL weg en wordt de standaard https://axe.deque.com gebruikt.

  3. In uw Cypress-ondersteuningsbestand (meestal genaamd cypress/support/e2e.js), importeer cypressCommands en roep axeWatcherFlush() aan na elke test:

    require('@axe-core/watcher/cypress/support');
    
    afterEach(() => {
      cy.axeWatcherFlush();
    });
  4. Je bent klaar. Voer je end-to-end-tests uit en controleer je resultaten. Houd er rekening mee dat @axe-core/watcher alleen wordt uitgevoerd in Chrome voor Testing of Chromium en alleen mag worden gebruikt in Cypress uitvoeren modus. Het kan worden gebruikt met --headless=new of --headed (bijvoorbeeld, cypress run --headed --browser=chrome-for-testing).