Générer des 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
Not for use with personal data

Comment utiliser @axe-devtools/reporter avec @axe-devtools/cypress

Prérequis

Afin de pouvoir utiliser le rapporteur axe DevTools, vous devez d'abord l'installer dans votre projet.

npm install @axe-devtools/reporter

Configuration

La configuration suivante est requise car Cypress possède à la fois le contexte du navigateur et le contexte du nœud et car @axe-devtools/reporter est un module de nœud, il doit être instancié dans le contexte du nœud, qui n'est disponible que lorsqu'il est encapsulé dans **** cy.task

Inclure la ligne suivante dans cypress/support/index.js

import '@axe-devtools/cypress';

after(() => {
  cy.getAxeResults().then(async results => {
    // create the directory with results
    const resultsDir = './results/'
    await cy.writeFile(`${resultsDir}results.json`, results)
    await cy.task('reportAsHTML', { resultsDir })
  })
})

Inclure la ligne suivante dans cypress/plugins/index.js

const axeDevToolsPlugin = require('@axe-devtools/cypress/dist/plugin');
const Reporter = require('@axe-devtools/reporter').default

module.exports = (on, config) => {
  axeDevToolsPlugin(on)

  on('task', {
    // task to create HTML report
    reportAsHTML: async ({ resultsDir, branding = 'axeDevToolsCypress' }) => {
      reporter = new Reporter(branding, resultsDir)
      await reporter.buildHTML(resultsDir);
      return null
    },
    // task to create CSV report
    reportAsCSV: async ({ resultsDir, branding = 'axeDevToolsCypress' }) => {
      reporter = new Reporter(branding, resultsDir)
      await reporter.buildCSV(resultsDir);
      return null
    },
    // task to create Junit XML report
    reportAsJunit: async ({ resultsDir, branding = 'axeDevToolsCypress' }) => {
      reporter = new Reporter(branding, resultsDir)
      await reporter.buildJUnitXML(resultsDir);
      return null
    }
  })
}

Inclure la ligne suivante dans cypress/integration/test.spec.js

describe('Axe DevTools Cypress', () => {
  it('Get results from analyzing', () => {
    cy.visit('https://broken-workshop.dequelabs.com')
    cy.axeAnalyze()
  })
})

Voir aussi

Is this page helpful?

Help us improve this page

Still need help?