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

Integrating the @axe-devtools/reporter package with @axe-devtools/cypress to generate reports

Not for use with personal data

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

Prerequisites

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

npm install @axe-devtools/reporter
note

These instructions apply to Cypress 10.0 and later.

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 in 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' })
  })
})

Within the cypress.config.js file, add the reporter tasks inside 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;
    }
  }
});

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

See Also

Is this page helpful?

Help us improve this page

Still need help?