Web Accessibility Testing using Axe & Cypress.io and create csv report

In this article, we learn about setting up accessibility test for web application using axe with Cypress then generating the csv report which have all the finding in it.

You need the following packages to be installed in your project

axe-core, cypress-axe-core and fast-csv

Create a Custom command in the cypress to enable accessibility check and writing the results in the terminal as well as in the csv file.

Cypress.Commands.add('checkAxeViolations', label => {
  const A11Y_OPTIONS = {
    runOnly: {
      type: 'tag',
      values: ['wcag21aa', 'wcag2aa'],
    },
  };
  cy.checkA11y(
    {
      axeOptions: [A11Y_OPTIONS],
      shouldFailFn: violations =>
        violations.filter(v => v.id !== 'color-contrast' && ['serious', 'critical'].includes(v.impact)),
      skipFailures: true,
      violationsCb: violations => terminalLog(violations.results),
    },
    label,
  );
});

function terminalLog(violations) {
  console.log(`${violations.length} accessibility violation${violations.length === 1 ? '' : 's'} detected`);
  // pluck specific keys to keep the table readable
  const violationData = violations.map(({ id, impact, description, nodes, help, helpUrl }) => ({
    id,
    impact,
    description,
    nodes: nodes.length,
    spec: Cypress.spec.name,
    help,
    helpUrl,
  }));

  cy.task('writeToCsv', { name: 'axeReport', data: violationData });

  console.table(violationData);
}

Example code for checking accessibility on a user’s page

Then(/^I am presented with user page$/, () => {
  cy.visit('/users');
  cy.injectAxe();
  cy.checkAxeViolations();
});

Configure the method in the cypress.config.ts for writing the results in the csv file

module.exports = defineConfig({
   e2e: {
    setupNodeEvents(on, cypressConf) {
      const pathToAxeReportFile = path.resolve('.', 'axeReport');
      on('task', {
        writeToCsv({ name : name, data : data } ) {
          let ws = fs.createWriteStream(`${pathToAxeReportFile}/${name}.csv`, { flags: 'a+' });

          writeToStream( ws, data, { headers: true, writeHeaders: false , objectMode: true, includeEndRowDelimiter: true});
          return null;
        }
   }
}

run the tests and the csv report will be generated on top level folder. report contains all the necessary information like impact, helpUrl etc for developers to triage and fix the issues.