Gerando Relatórios a partir dos Resultados JSON do Axe DevTools

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

Usando o pacote @axe-devtools/reporter para gerar relatórios

Not for use with personal data

Use o relator do Axe DevTools com o Playwright para produzir relatórios de acessibilidade para as páginas analisadas

Gerar relatórios agora é tão fácil quanto executar as análises. Com o relator do Axe DevTools, você pode gerar relatórios HTML que são visualizáveis imediatamente, relatórios JUnit XML para visualização em ambientes de teste CI, e relatórios CSV para importar em uma variedade de outras ferramentas. Este guia detalha como instalar, configurar e usar o relator do Axe DevTools.

Pré-requisitos

Para usar o relator do Axe DevTools, você precisa de um projeto NodeJS existente para integrar o Axe DevTools e o relator. Esta parte do guia cobre apenas a configuração do relator, então, se você ainda não tem o Axe DevTools executando análises, leia este guia sobre como executar análises com o Axe DevTools.

Instalando o Reporter

Se você já configurou seu arquivo ~/.npmrc para baixar os 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 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 usar o relator, sua biblioteca Axe DevTools e o webdriver também precisarão ser importados.

Opções do Reporter

Existem três principais escolhas que você precisa fazer ao usar o relator do Axe DevTools

Como nomear os relatórios
Onde armazenar os relatórios
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á duas etapas para executar o relator após uma varredura do Axe DevTools. Primeiro, os resultados devem ser registrados para que o relator possa acessá-los. Depois, o relator 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 escrever testes, mas também integra o relator.

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 das análises, entre em contato diretamente com seu representante Deque, alcance-nos via 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 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.