Generating Reports with 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

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?