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
important

Axe Watcher requiere un navegador compatible: Chrome para pruebas (una instalación de navegador separada, distinta de Google Chrome), Chromium o Microsoft Edge. El navegador integrado Electron de Cypress no es compatible, por lo que debes invocar Cypress con cypress run --browser chrome-for-testing --headless (o chromium / edge). Consulta Configuración y Configuración de Navegadores para Usar con Axe Watcher para las instrucciones de instalación.

  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úrate de configurar ACCESSIBILITY_API_KEY y PROJECT_ID en tu entorno con tu clave de API personal (que se encuentra en tu cuenta de Axe, pestaña API KEYS) y tu ID de proyecto (mostrado en la parte superior de estas instrucciones cuando creaste tu proyecto o disponible en la página de Proyectos eligiendo Configurar proyecto en Configuración). Si tu organización utiliza una instancia local, privada o en la nube regional de Axe Developer Hub, también configura SERVER_URL con la URL base de esa instancia (por ejemplo, https://axe-eu.deque.com); de lo contrario, omite 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).

Is this page helpful?

Help us improve this page

Still need help?