Generating Reports with Cypress

Link to Generating Reports with Cypress copied to clipboard

How to utilize @axe-devtools/reporter with @axe-devtools/cypress

Prerequisites

In order to be able to use axe DevTools reporter you will first need to install it in your project.

npm install @axe-devtools/reporter

Setup

The following setup is required because Cypress has both the browser context and node context and since @axe-devtools/reporter is a node module it needs to be instantiated in the node context, which is only available when wrapped within cy.task

Include the following line in 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 })
  })
})

Include the following line in 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
    }
  })
}

Include the following line in cypress/integration/test.spec.js

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

See Also

Is this page helpful?

Help us improve this page

Still need help?