Karma

Testes com Karma e Axe DevTools

Esta integração com Karma funciona independentemente do framework de UI selecionado. Esta integração funcionará testando React, Angular, Vue, etc.

Pré-requisitos

Para testar seu conteúdo usando Karma e Axe DevTools, você primeiro precisa dos seguintes pacotes instalados em seu projeto:

• @axe-devtools/karma-json-reporter
• @axe-devtools/browser
• @axe-devtools/cli

Configuração do Karma

Primeiro, precisaremos configurar nosso arquivo karma.config (ou karma.conf) para incluir o @axe-devtools/karma-json-reporter como um plugin.

plugins: [
  require('@axe-devtools/karma-json-reporter')
]

Então adicione axeDevTools à propriedade reporters. Também pode adicionar a propriedade axeDevToolsReporter com o diretório de destino (dir). Por padrão, os relatórios serão criados no diretório axeDevToolsReports no nível raiz do seu projeto.

reporters: ['axeDevTools'],
axeDevToolsReporter: {
  dir: 'axe-results'
},

Uma vez configurado, o @axe-devtools/karma-json-reporter adicionará um objeto de relatórios global aos seus testes chamado axeDevToolsReporter.

Configuração de casos de teste

Para executar o axe dentro das especificações de teste para cada componente ou página, adicione a seguinte importação:

import * as AxeDevTools from "@axe-devtools/browser";

Em seguida, dentro das funções de configuração de seus testes (por exemplo, before() ou beforeEach()), adicione a seguinte função init() para atribuir um conjunto de regras específico. Por padrão, o conjunto de regras wcag2.1 é usado.

before(() => {
  AxeDevTools.init("wcag2.1");
});

Agora precisamos criar um teste como o mostrado abaixo, onde iremos verificar o componente ou página para problemas de acessibilidade. No entanto, para chamar AxeDevTools.run() corretamente, qualquer componente não nativo precisará ser compilado em um elemento nativo para verificar adequadamente o componente.

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  expect(results.violations).toHaveLength(0);
});

Relatórios com Karma e Axe DevTools

Configurar Relatórios no Teste

Cada vez que AxeDevTools.run() for chamado, adicione uma chamada para axeDevToolsReporter.logTestResult() e passe os resultados da execução do axe. A função logTestResult pode opcionalmente receber um id como primeiro parâmetro, que será usado como o nome do teste.

it("should have no accessibility violations", async () => {
  const fixture = TestBed.createComponent(AppComponent);
  fixture.detectChanges();
  const compiled = fixture.debugElement.nativeElement;
  
  const results = await AxeDevTools.run(compiled);
  axeDevToolsReporter.logTestResult(results);
  expect(results.violations).toHaveLength(0);
});

Agora, quando os testes forem executados, o @axe-devtools/karma-json-reporter criará um arquivo JSON para cada análise do Axe DevTools registrada (chamada axeDevToolsResults).

Executando o Axe DevTools CLI

Uma vez que os testes são concluídos e os relatórios foram gerados, podemos gerar um relatório do Axe DevTools usando o @axe-devtools/cli.

"test": "karma start && axe reporter ./axe-results --format=html",

Resolução de Problemas

Se você tiver problemas para obter resultados de varredura, entre em contato com seu representante Deque diretamente, contate-nos através do nosso suporte técnico, ou envie-nos um e-mail. Ficaremos felizes em ajudar.

Para mais informações sobre o Axe DevTools em geral, veja a página de visão geral do Axe DevTools

Veja Também

• Enviando Resultados de Acessibilidade JSON para o axe Reports descreve como enviar seus resultados para o axe Reports.
• Obtendo uma Chave de API do axe Reports explica como obter uma chave de API para começar a usar o axe Reports.
• Criando e Filtrando Relatórios mostra como você pode criar relatórios de acessibilidade em CSV, XML ou HTML a partir dos seus resultados de acessibilidade em JSON. Você também pode filtrar sua saída por gravidade usando esta ferramenta.
• Como Resultados JSON são Armazenados no Disco descreve as convenções de nomenclatura de arquivos para resultados de acessibilidade em JSON.
• Usando a CLI para Enviar Resultados de Acessibilidade para o axe Developer Hub mostra como você pode enviar seus arquivos de resultados .json para axe Developer Hub.