cypress-axe-reporter

Cypress-Axe reporter that outputs accessibility violations in a HTML format.

Example report

Setup

This setup tutorial works with Cypress >= v10, and Cypress-Axe >= v1.5.0

1. install cypress-axe-reporter

   npm i --save-dev cypress-axe-reporter
   

   or

   yarn add -D cypress-axe-reporter
   

2. Change cypress reporter & setup hooks

   Edit config file (cypress.config.js by default)

   1const { defineConfig } = require("cypress");
   2
   3module.exports = defineConfig({
   4    reporter: "cypress-axe-reporter",
   5    e2e: {
   6        setupNodeEvents(on, config) {
   7            require("cypress-axe-reporter/plugin")(on);
   8        },
   9    },
   10});

   If you are to override before:run or after:run hooks, use this:

   1const { defineConfig } = require("cypress");
   2const { beforeRunHook, afterRunHook } = require("cypress-axe-reporter/lib");
   3
   4module.exports = defineConfig({
   5    reporter: "cypress-axe-reporter",
   6    e2e: {
   7        setupNodeEvents(on, config) {
   8            on("before:run", async (details) => {
   9                await beforeRunHook(details);
   10            });
   11
   12            on("after:run", async (results) => {
   13                await afterRunHook(results);
   14            });
   15        },
   16    },
   17});

3. Add to cypress/support/e2e.js

   1import "cypress-axe-reporter/register";

4. Specify cy.cypressAxeReporterCallBack as the violationCallback argument

   1it("check for violations", () => {
   2    cy.checkA11y(null, null, cy.cypressAxeReporterCallBack);
   3});

5. Run cypress

Custom options

If you want to customize your HTML report, add the desired flags to reporterOptions

1const { defineConfig } = require("cypress");
2
3module.exports = defineConfig({
4    reporter: "cypress-axe-reporter",
5    reporterOptions: {
6        reportDir: "cypress/report-folder/",
7    },
8    e2e: {
9        setupNodeEvents(on, config) {
10            require("cypress-axe-reporter/plugin")(on);
11        },
12    },
13});

CLI Flags

Flag	Type	Default	Description
--reportFilename	string	accessibility-report	Filename of saved report.
--reportDir	string	[cwd]/reports/	Path to save report
--reportTitle	string	Accessibility Report	Report title
--reportPageTitle	string	Accessibility Report	Browser title
--saveJson	boolean	false	Should report data be saved to JSON file
--saveHtml	boolean	true	Should report be saved to HTML file
--includeSummary	boolean	false	Should report include count of all violations found violations