Gerando Relatórios a partir de Resultados JSON do axe DevTools

Use o reporter do axe DevTools com Playwright para produzir relatórios de acessibilidade para páginas escaneadas

Gerar relatórios agora é tão fácil quanto realizar escaneamentos. Com o reporter do axe DevTools, você pode gerar relatórios HTML visualizáveis imediatamente, relatórios JUnit XML para visualização em ambientes de teste CI, e relatórios CSV para importar em uma infinidade de outras ferramentas. Este guia detalha como instalar, configurar e usar o reporter do axe DevTools.

Pré-requisitos

Para usar o reporter do axe DevTools, você precisa de um projeto NodeJS existente para integrar tanto o axe DevTools quanto o reporter. Esta parte do guia cobre apenas a configuração do reporter, então, se você ainda não tem o axe DevTools realizando escaneamentos, leia este guia sobre como executar escaneamentos com o axe DevTools.

Instalando o Reporter

Se você já configurou seu ~/.npmrc arquivo para baixar pacotes npm do axe DevTools, tudo o que você precisa fazer é executar o comando:

npm install @axe-devtools/reporter

Se você ainda não configurou a autenticação da sua instalação, leia um dos guias básicos de instalação.

Adicionando o Reporter ao seu Projeto

Fora de um módulo, o axe DevTools é importado e uma instância criada com uma declaração como esta:

const { Reporter } = require('@axe-devtools/reporter');

Dentro de um módulo, a sintaxe é ligeiramente diferente. A declaração deve parecer com essa:

import { Reporter } from '@axe-devtools/reporter';

Para utilizar o reporter, sua biblioteca do axe DevTools e o webdriver deverão ser importados também.

Opções do Reporter

Há três principais escolhas que você precisa fazer ao usar o reporter do axe DevTools

1. Como nomear os relatórios
2. Onde armazenar os relatórios
3. Em que formato gerar os relatórios

Você pode nomear os relatórios como preferir. Quando você inicia o reporter, você passa um nome de suíte que todos os relatórios gerados com essa instância compartilharão. Cada relatório também inclui um nome atribuído com base em cada escaneamento. O local, ou diretório, onde os relatórios serão armazenados também é completamente de escolha do usuário. Esse local de diretório também é definido no nível da instância, então todos os relatórios gerados em uma instância de reporter compartilharão um diretório. Os formatos opcionais de relatório são HTML, que recomendamos para visualização imediata do usuário, JUnit XML, que recomendamos para uso em ambientes de CI, CSV, que permite importar os resultados do escaneamento em outras ferramentas, e EARL (Evaluation and Report Language), que gera um documento W3C EARL JSON-LD para relatórios de acessibilidade legíveis por máquina.

Usando o Reporter

Uma vez que o reporter é importado para o seu projeto, você pode inicializá-lo. O construtor leva dois argumentos: o nome do conjunto de relatórios e o diretório de destino para os relatórios. Sua declaração de inicialização deve se parecer com esta:

reporter = new Reporter('<suite-name>', '<dir-name>');

Há dois passos para executar o reporter uma vez que um escaneamento do axe DevTools foi realizado. Primeiro, os resultados devem ser registrados para acesso do reporter. Em seguida, o reporter processa esses resultados no relatório.

reporter.logTestResult('<scan-name>', <results-object>);
reporter.buildHTML('<scan-dir>');

Arquivo de exemplo

Este arquivo de exemplo usa a mesma base do exemplo de escrever testes , mas também integra o reporter.

const rimraf = require('rimraf');
const { AxeDevToolsBuilder } = require('@axe-devtools/playwright');
const playwright = require('playwright');
const { Reporter } = require('@axe-devtools/reporter');

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results = await new AxeDevToolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

Solução de problemas

Se você tiver problemas para obter os resultados de escaneamento, entre em contato diretamente com seu representante Deque, nos contate através do nosso balcão de suporte, ou nos envie um email. Ficaremos felizes em ajudar.

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 de seus resultados de acessibilidade 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 JSON.
• Usando a CLI para Enviar Resultados de Acessibilidade para o axe Developer Hub mostra como você pode enviar seus .json arquivos de resultados para axe Developer Hub.