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 seu arquivo wdio.config.ts, importe a função wdioTestRunner(), a função wrapWdio() e a classe WdioController de @axe-core/watcher/wdio:

    import {
      wdioTestRunner,
      wrapWdio,
      WdioController
    } from '@axe-core/watcher/wdio'
  3. Antes de exportar sua configuração do WebdriverIO, envolva-a com uma chamada para wdioTestRunner() enquanto fornece sua chave de API:

    // Original code:
    
    export const config = {
      // Your config options here...
    }
    
    // Becomes:
    
    const ACCESSIBILITY_API_KEY = process.env.ACCESSIBILITY_API_KEY
    const PROJECT_ID = process.env.PROJECT_ID
    const SERVER_URL = process.env.SERVER_URL
    
    export const config = wdioTestRunner({
      axe: {
        apiKey: ACCESSIBILITY_API_KEY,
        projectId: PROJECT_ID,
        serverURL: SERVER_URL
      }, {
        // Your config options 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.

  4. No código de configuração do seu teste (normalmente em um bloco before ou beforeAll), crie uma instância da classe WdioController e, em seguida, envolva seu objeto browser:

    const controller = new WdioController(browser)
    wrapWdio(browser, controller)
  5. Por fim, certifique-se de que todos os resultados dos testes do axe Watcher sejam descarregados. Para fazer isso, adicione o seguinte bloco de código ao seu código de encerramento de teste (normalmente em um bloco afterFetch):

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