Génération de rapports avec Cypress
Intégration du package @axe-devtools/reporter avec @axe-devtools/cypress pour générer des rapports
Comment utiliser @axe-devtools/reporter avec @axe-devtools/cypress
Prérequis
Afin de pouvoir utiliser le reporter Axe DevTools, vous devez d'abord l'installer dans votre projet.
npm install @axe-devtools/reporterCes instructions s'appliquent à Cypress 10.0 et ultérieur.
Configuration
La configuration suivante est requise car Cypress a à la fois le contexte du navigateur et le contexte de nœud, et puisque @axe-devtools/reporter est un module de nœud, il doit être instancié dans le contexte de nœud, qui est seulement disponible lorsqu'il est encapsulé dans cy.task
Incluez ce qui suit dans 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' })
})
})Dans le fichier cypress.config.js , ajoutez les tâches du reporter à l'intérieur 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;
}
});
return config;
}
}
});Incluez ce qui suit dans 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()
})
})Voir aussi
- Téléchargement des résultats d'accessibilité JSON dans les rapports axe décrit comment télécharger vos résultats dans les rapports axe.
- Obtention d'une clé API Axe Reports explique comment obtenir une clé API pour commencer à utiliser Axe Reports.
- Création et filtrage de rapports montre comment vous pouvez créer des rapports d'accessibilité au format CSV, XML ou HTML à partir de vos résultats d'accessibilité JSON. Vous pouvez également filtrer votre sortie par gravité à l'aide de cet outil.
- Comment les résultats JSON sont stockés sur le disque décrit les conventions de nommage des fichiers pour les résultats d'accessibilité JSON.
