Generación de informes con Cypress
Integración del paquete @axe-devtools/reporter con @axe-devtools/cypress para generar informes
Cómo utilizar @axe-devtools/reporter con @axe-devtools/cypress
Prerrequisitos
Para poder utilizar el generador de informes de Axe DevTools primero tendrás que instalarlo en tu proyecto.
npm install @axe-devtools/reporterEsta guía cubre la configuración específica de Cypress. Para una visión general del reportero y sus formatos de informes, consulta la Guía del reportero. Para la lista completa de métodos de construcción de informes y sus parámetros, consulta la Referencia de la API del reportero. El reportero construye sus informes a partir de los resultados registrados por el Registrador.
Estas instrucciones son aplicables a Cypress 10.0 y versiones posteriores.
Configuración
La siguiente configuración es necesaria porque Cypress tiene tanto el contexto del navegador como el contexto de node y como @axe-devtools/reporter es un módulo de node, necesita ser instanciado en el contexto de node, el cual solo está solamente disponible cuando se envuelve dentro de cy.task
Incluya lo siguiente en 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 del archivo cypress.config.js, agregue las tareas del reportero 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;
}
}
});Incluya lo siguiente en 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()
})
})Ver También
- Cargando Resultados de Accesibilidad JSON a Axe Reports describe cómo cargar tus resultados en Axe Reports.
- Obteniendo una Clave API de Axe Reports explica cómo obtener una clave API para comenzar a usar Axe Reports.
- Crear y Filtrar Informes muestra cómo puedes crear informes de accesibilidad en CSV, XML o HTML a partir de tus resultados de accesibilidad JSON. También puedes filtrar tu salida por severidad utilizando esta herramienta.
- Cómo se Almacenan los Resultados JSON en el Disco describe las convenciones de nomenclatura de archivos para resultados de accesibilidad JSON.
- Usando la CLI para Enviar Resultados de Accesibilidad al Centro de Desarrolladores de Axe muestra cómo puedes subir tus archivos de resultados
.jsona Centro de Desarrolladores de Axe.