Instruções para Cypress e 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 seus testes com Cypress e TypeScript

Not for use with personal data
  1. No nível raiz da sua pasta de testes, instale o pacote @axe-core/watcher e todas as suas dependências usando o npm ou seu gerenciador de pacotes preferido (por exemplo, yarn ou pnpm).

    npm install --save-dev @axe-core/watcher
  2. No cypress.config.ts, importe a função cypressConfig() do pacote @axe-core/watcher e envolva sua configuração com ela:

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

    Certifique-se de definir ACCESSIBILITY_API_KEY e PROJECT_ID no seu ambiente para a sua chave API pessoal (encontrada na sua conta axe, aba **API KEYS**) e para o ID do seu projeto (mostrado na parte superior destas instruções quando você criou o seu projeto ou disponível na página Projetos ao escolher **Configurar projeto** em **Configurações**). Se a sua organização usa uma instância regional, em nuvem privada ou local do Axe Developer Hub, também defina SERVER_URL para a URL base dessa instância (por exemplo, https://axe-eu.deque.com); caso contrário, omita SERVER_URL e o padrão https://axe.deque.com será utilizado.

  3. No seu arquivo de suporte do Cypress (comumente chamado de cypress/support/e2e.ts), importe @axe-core-watcher/cypress/support e chame axeWatcherFlush() após cada teste:

    import '@axe-core/watcher/cypress/support';
    
    afterEach(() => {
      cy.axeWatcherFlush();
    });
  4. Tudo pronto. Execute seus testes de ponta a ponta e verifique seus resultados. Por favor, note que @axe-core/watcher roda apenas no Chrome para Testes ou Chromium e deve ser usado apenas no modo executar do Cypress. Pode ser usado com --headless=new ou --headed (por exemplo, cypress run --headed --browser=chrome-for-testing).