axe-html-reporter

What is axe-html-reporter?

The axe-html-reporter npm package is used to generate HTML reports from accessibility test results produced by the axe-core library. It helps in visualizing the accessibility issues found during testing in a user-friendly HTML format.

What are axe-html-reporter's main functionalities?

Generate HTML Report

This feature allows you to generate an HTML report from the results of an accessibility test run using axe-core. The `createHtmlReport` function takes the results object and options for the output directory and report file name, and generates an HTML file.

const { createHtmlReport } = require('axe-html-reporter');
const fs = require('fs');

const results = { /* axe-core results object */ };

createHtmlReport({
  results,
  options: {
    outputDir: 'reports',
    reportFileName: 'accessibility-report.html'
  }
}).then(() => {
  console.log('Report generated successfully');
}).catch(err => {
  console.error('Error generating report:', err);
});

Other packages similar to axe-html-reporter

pa11y-reporter-html

The pa11y-reporter-html package is used to generate HTML reports from Pa11y accessibility test results. It is similar to axe-html-reporter in that it provides a way to visualize accessibility issues in an HTML format. However, it is specifically designed to work with Pa11y, another popular accessibility testing tool.

html-reporter

The html-reporter package is a generic tool for generating HTML reports from various types of test results, not limited to accessibility testing. It provides a flexible way to create custom HTML reports, but may require more configuration compared to axe-html-reporter, which is specifically tailored for axe-core results.

README

axe-html-reporter

Creates an HTML report from axe results object with list of violations, passes and incomplete results.

Allows specifying url, projectKey and outputDir.

See sample report output

Install

npm i axe-html-reporter

Usage

Example usage in TestCafe

To run TestCafe tests with axe-core, install testcafe, axe-core and @testcafe-community/axe:

npm i -D axe-html-reporter testcafe axe-core @testcafe-community/axe

For TestCafe example add the following clientScript in your .testcaferc.json config:

{
  "clientScripts":[{"module":"axe-core/axe.min.js"}]
}

In the example bellow fileName is not passed. In this case html report with default name accessibilityReport.html will be created in artifacts directory.

See full TestCafe test example is bellow:

import { runAxe } from '@testcafe-community/axe';
import { createHtmlReport } from 'axe-html-reporter';

fixture('TestCafe tests with Axe').page('http://example.com');

test('Automated accessibility testing', async (t) => {
    const axeContext = { exclude: [['select']] };
    const axeOptions = { rules: rulesMap() };
    const { error, results } = await runAxe(axeContext, axeOptions);
    await t.expect(error).eql(null, `axe check failed with an error: ${error.message}`);
    // creates html report with the default file name `accessibilityReport.html`
    createHtmlReport({
        violations: results.violations,
        passes: results.passes,
        incomplete: results.incomplete,
        url: results.url,
        projectKey: 'EXAMPLE',
    });
});

Run TestCafe test:

npx testcafe
 Running tests in:
 - Chrome 85.0.4183.121 / Linux

 TestCafe tests with Axe
HTML report was saved into the following directory /Users/axe-demos/artifacts/accessibilityReport.html
 ✓ Automated accessibility testing


 1 passed (1s)

Example usage in any JS framework

import { axeHtmlReporter } from 'axe-html-reporter';

(() => {
    const results = { violations: {}, passes: {}, incomplete: {}, inapplicable: {}, url: 'http://example.com' }; 
    // creates html report with the default name `accessibilityReport.html` file
    axeHtmlReporter({
        violations: results.violations,
        passes: results.passes,
        incomplete: results.incomplete,
    });
    // creates html report with the default name `accessibilityReport.html` file and adds url and projectKey
    axeHtmlReporter({
        violations: results.violations,
        passes: results.passes,
        incomplete: results.incomplete,
        projectKey: 'JIRA_PROJECT_KEY',
        url: results.url,
    });
    // creates html report with the name `exampleReport.html` in 'axe-reports' directory and adds url and projectKey to the header
    axeHtmlReporter({
        violations: results.violations,
        passes: results.passes,
        incomplete: results.incomplete,
        projectKey: 'JIRA_PROJECT_KEY',
        outputDir: 'axe-reports',
        url: results.url,
        fileName: 'exampleReport.html',
    });
})();

CommonJS

const { axeHtmlReporter } = require('axe-html-reporter');

(() => {
    // creates html report with the name `accessibilityReport.html` file
    axeHtmlReporter({ violations: results.violations });
})();