Génération de rapports avec Cypress

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

Intégration du package @axe-devtools/reporter avec @axe-devtools/cypress pour générer des rapports

Not for use with personal data

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/reporter
note

Ces 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