Gerando Relatórios com Cypress
Integrando o pacote @axe-devtools/reporter com @axe-devtools/cypress para gerar relatórios
Como utilizar @axe-devtools/reporter com @axe-devtools/cypress
Pré-requisitos
Para poder usar o relator Axe DevTools, você precisará primeiro instalá-lo em seu projeto.
npm install @axe-devtools/reporterEste guia abrange a configuração específica para o Cypress. Para uma visão geral do repórter e seus formatos de relatório, consulte o Guia do repórter. Para a lista completa de métodos de construção de relatórios e seus parâmetros, consulte o Referência da API do repórter. O repórter cria seus relatórios a partir dos resultados registrados pelo Logger.
Estas instruções se aplicam ao Cypress 10.0 e versões posteriores.
Configuração
A configuração a seguir é necessária porque o Cypress tem tanto o contexto de navegador quanto o contexto de nó e, como @axe-devtools/reporter é um módulo de nó, ele precisa ser instanciado no contexto de nó, que está apenas disponível quando encapsulado dentro de cy.task
Inclua o seguinte em cypress/support/e2e.js:
import '@axe-devtools/cypress';
after(() => {
cy.getAxeResults().then(async results => {
const resultsDir = './results/'
// Use Cypress.spec.name for a unique filename per spec file to avoid overwriting results
await cy.writeFile(`${resultsDir}${Cypress.spec.name}.json`, results)
// reportName labels the results and is used as the prefix in the generated report filenames
await cy.task('reportAsHTML', { resultsDir, reportName: 'axeDevToolsCypress' })
})
})Dentro do arquivo cypress.config.js, adicione as tarefas do reporter dentro de setupNodeEvents:
const { defineConfig } = require('cypress');
const axeDevToolsPlugin = require('@axe-devtools/cypress/dist/plugin');
const { Reporter } = require('@axe-devtools/reporter');
module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
axeDevToolsPlugin(on);
on('task', {
// Reads all .json result files in resultsDir and generates an HTML report;
// reportName labels the results and is used as the prefix in the generated HTML filenames
reportAsHTML: async ({ resultsDir, reportName = 'axeDevToolsCypress' }) => {
const reporter = new Reporter(reportName, resultsDir);
await reporter.buildHTML(resultsDir);
return null;
},
// Reads all .json result files in resultsDir and generates a CSV report
reportAsCSV: async ({ resultsDir, reportName = 'axeDevToolsCypress' }) => {
const reporter = new Reporter(reportName, resultsDir);
await reporter.buildCSV(resultsDir);
return null;
},
// Reads all .json result files in resultsDir and generates a JUnit XML report
reportAsJunit: async ({ resultsDir, reportName = 'axeDevToolsCypress' }) => {
const reporter = new Reporter(reportName, resultsDir);
await reporter.buildJUnitXML(resultsDir);
return null;
},
// Reads all .json result files in resultsDir and generates a W3C EARL JSON-LD report
reportAsEARL: async ({ resultsDir, reportName = 'axeDevToolsCypress' }) => {
const reporter = new Reporter(reportName, resultsDir);
await reporter.buildEARL(resultsDir);
return null;
}
});
return config;
}
}
});Inclua o seguinte em cypress/e2e/test.cy.js:
describe('Axe DevTools Cypress', () => {
it('Scans the page for accessibility issues', () => {
// Visit the page to test
cy.visit('https://broken-workshop.dequelabs.com')
// Run an accessibility scan; results are collected and written to a file by the after() hook in support/e2e.js
cy.axeAnalyze()
})
})Veja Também
- Carregando resultados de acessibilidade JSON para o Axe Reports descreve como carregar seus resultados no 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 o CLI para enviar resultados de acessibilidade para o Axe Developer Hub mostra como você pode enviar seus arquivos de resultados
.jsonpara Axe Developer Hub.