Instrucciones para Cypress y TypeScript

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

Configurando tus pruebas con Cypress y TypeScript

Not for use with personal data
  1. En el nivel raíz de tu carpeta de pruebas, instala el paquete @axe-core/watcher y todas sus dependencias usando npm o tu gestor de paquetes preferido (por ejemplo, yarn o pnpm).

    npm install --save-dev @axe-core/watcher
  2. En cypress.config.ts, importa la función cypressConfig() del paquete @axe-core/watcher y envuelve tu configuración con ella:

    import { defineConfig } from 'cypress';
    import { cypressConfig } from '@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
    
    export default defineConfig(
      cypressConfig({
        axe: {
          apiKey: ACCESSIBILITY_API_KEY,
          projectId: PROJECT_ID,
          serverURL: SERVER_URL
        },
        // Your existing Cypress configuration code here
      })
    );

    Asegúrese de configurar ACCESSIBILITY_API_KEY y PROJECT_ID en su entorno con su clave API personal (que se encuentra en su cuenta de axe, pestaña API KEYS) y su ID de proyecto (mostrado en la parte superior de estas instrucciones cuando creó su proyecto o disponible en la página de Proyectos eligiendo Configurar proyecto bajo Configuración). Si su organización utiliza una instancia regional, nube privada o local de Axe Developer Hub, configure también SERVER_URL con la URL base de esa instancia (por ejemplo, https://axe-eu.deque.com); de lo contrario, omita SERVER_URL y se usará el https://axe.deque.com predeterminado.

  3. En tu archivo de soporte de Cypress (comúnmente llamado cypress/support/e2e.ts), importa @axe-core-watcher/cypress/support y llama a axeWatcherFlush() después de cada prueba:

    import '@axe-core/watcher/cypress/support';
    
    afterEach(() => {
      cy.axeWatcherFlush();
    });
  4. Has terminado. Ejecuta tus pruebas de extremo a extremo y verifica tus resultados. Ten en cuenta que @axe-core/watcher solo se ejecuta en Chrome para Testing o Chromium y solo debería ser usado en el modo ejecuta de Cypress. Puede usarse con --headless=new o --headed (por ejemplo, cypress run --headed --browser=chrome-for-testing).