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

Ce guide couvre la configuration spécifique à Cypress. Pour un aperçu général du reporter et de ses formats de rapport, voir le Guide du reporter. Pour la liste complète des méthodes de création de rapports et de leurs paramètres, voir la Référence API du reporter. Le reporter construit ses rapports à partir des résultats enregistrés par la Journalisation.

note

Ces instructions s'appliquent à Cypress 10.0 et ultérieur.

Configuration

La configuration suivante est requise car Cypress a à la fois le contexte de navigateur et le contexte de nœud, et comme @axe-devtools/reporter est un module de nœud, il doit être instancié dans le contexte de nœud, ce 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 de rapporteur à 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;
        },
        // 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;
    }
  }
});

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

Is this page helpful?

Help us improve this page

Still need help?