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. Em seus arquivos de teste, importe a função wdioConfig(), a função wrapWdio() e a classe WdioController de @axe-core/watcher/wdio:

    import {
      wdioConfig,
      wrapWdio,
      WdioController
    } from '@axe-core/watcher/wdio'
  3. No seu código de configuração de teste (normalmente em um bloco before ou beforeAll), envolva qualquer código existente para criar uma instância de browser com uma chamada para wdioConfig(), fornecendo sua chave de API:

    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    const SERVER_URL = process.env.SERVER_URL
    
    const browser = await remote(
      wdioConfig({
        axe: {
          apiKey: ACCESSIBILITY_API_KEY,
          projectId: PROJECT_ID,
          serverURL: SERVER_URL
        }
      })
    )

    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.

  4. Uma vez que você tenha uma instância de browser, crie uma instância da classe WdioController:

    const controller = new WdioController(browser);
  5. Envolva sua instância de browser com a função wrapWdio(), fornecendo a instância browser e a instância controller:

    wrapWdio(browser, controller)
  6. Finalmente, certifique-se de que todos os resultados dos testes do axe Watcher sejam descarregados. Para fazer isso, adicione o bloco de código a seguir ao seu código de encerramento de teste (normalmente em um bloco afterEach):

    afterEach(async () => {
      await controller.flush()
    })