Instrucciones para las Pruebas de Componentes de Cypress y 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

Configurando tus pruebas de componentes con Cypress y JavaScript

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.js, importa la función cypressConfig() del paquete @axe-core/watcher y envuelve tu configuración con ella. Establece el arreglo testingTypes para incluir component:

    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,
      testingTypes: ['component']
    },
    // Your existing Cypress configuration code here
    component: {
      // Your component testing configuration
      
      // For example:
      
      // devServer: {
      //  framework: 'react',
      //  bundler: 'webpack',
      //},
    },
  })
);

    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 para componentes de Cypress (comúnmente llamado cypress/support/component.js), importa el paquete @axe-core/watcher cypressCommands y llama a axeWatcherFlush() después de cada prueba:

    require('@axe-core/watcher/cypress/support');

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

  4. Ya está todo listo. Ejecuta tus pruebas de componentes y revisa tus resultados. Por favor, ten en cuenta que @axe-core/watcher solo se ejecuta en Chrome para Testing o Chromium y debe usarse únicamente en el modo de ejecución de Cypress. Puede usarse con --headless=new o --headed (por ejemplo, cypress run --headed --browser=chrome-for-testing --component).

Is this page helpful?

Help us improve this page

Still need help?