# axe-html-reporter > The module that allows you to create HTML Report from raw accessibility aXe result object Latest version **2.2.11** (published 2024-09-05) · MIT license · 0 weekly downloads ## Install ```sh npm install axe-html-reporter pnpm add axe-html-reporter yarn add axe-html-reporter bun add axe-html-reporter ``` ## Health **Score 25/100 (F)** — status: abandoned. Positive: has types; no vulnerabilities; high quality score. Warnings: low downloads; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 2.2.11 | | Published | 2024-09-05 | | First published | 2020-10-14 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | CommonJS | | Node | >=8.9.0 | | Dependencies | 1 | | Unpacked size | 3 MB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | Liliia Pelypenko | | Maintainers | lpelypenko | | Keywords | axe, report, test, accessibility | ## Links - npm: https://www.npmjs.com/package/axe-html-reporter - Repository: https://github.com/lpelypenko/axe-html-reporter - Issues: https://github.com/lpelypenko/axe-html-reporter/issues - npm.io page: https://npm.io/package/axe-html-reporter ## Dependencies (1) - [mustache](https://npm.io/package/mustache.md) ^4.0.1 ## Alternatives - [duck](https://npm.io/package/duck.md) — 4.2M weekly downloads - [ava](https://npm.io/package/ava.md) — 560.2K weekly downloads - [storybook-addon-module-mock](https://npm.io/package/storybook-addon-module-mock.md) — 71.7K weekly downloads - [vest](https://npm.io/package/vest.md) — 50.1K weekly downloads - [@ethereum-waffle/mock-contract](https://npm.io/package/@ethereum-waffle/mock-contract.md) — 40.0K weekly downloads ## Recent versions - 2.2.11 (latest) — 2024-09-05 - 2.2.10 — 2024-08-22 - 2.2.9 — 2024-08-22 - 2.2.8 — 2024-08-22 - 2.2.7 — 2024-08-21 - 2.2.6 — 2024-08-21 - 2.2.5 — 2024-07-09 - 2.2.4 — 2024-07-09 - 2.2.3 — 2021-09-07 - 2.2.2 — 2021-05-21 - 2.2.1 — 2021-02-17 - 2.2.0 — 2021-01-03 - 2.1.1 — 2020-12-24 - 2.0.1 — 2020-10-29 - 2.0.0 — 2020-10-29 - … 5 more at https://npm.io/package/axe-html-reporter/versions ## README # axe-html-reporter Creates an HTML report from Axe-core® library AxeResults object listing violations, passes, incomplete and incompatible results. Allows specifying report creation options: `reportFileName`, `outputDir`, `outputDirPath`, `projectKey` and `customSummary`. Notes: - `customSummary` allows having html parameters - `outputDirPath` allows specifying absolute path Please check [sample report output.](https://lpelypenko.github.io/axe-html-reporter/) `createHtmlReport` returns HTML content that can be additionally used for specific integrations. If only HTML content needed, user can pass `doNotCreateReportFile: true` to stop report file creation. Suggestion on how to use this library if you don't need a report file but need only HTML it produces: ```javascript const reportHTML = createHtmlReport({ results: rawAxeResults, options: { projectKey: 'I need only raw HTML', doNotCreateReportFile: true, }, }); console.log('reportHTML will have full content of HTML file.'); // suggestion on how to create file by yourself if (!fs.existsSync('build/reports/saveReportHere.html')) { fs.mkdirSync('build/reports', { recursive: true, }); } fs.writeFileSync('build/reports/saveReportHere.html', reportHTML); ``` ## Install ``` npm i -D axe-html-reporter ``` ## Usage ### Example usage in TestCafe To run TestCafe tests with Axe-core®, install [testcafe](https://www.npmjs.com/package/testcafe), [axe-core](https://www.npmjs.com/package/axe-core) and [@testcafe-community/axe](https://www.npmjs.com/package/@testcafe-community/axe): ```shell script npm i -D axe-html-reporter testcafe axe-core @testcafe-community/axe ``` For TestCafe example add the following clientScript in your `.testcaferc.json` config: ```json { "clientScripts": [{ "module": "axe-core/axe.min.js" }] } ``` In the example bellow `fileName` is not passed. If `fileName` is not passed, HTML report will be created with default name `accessibilityReport.html` in `artifacts` directory. See full TestCafe test example is bellow: ```javascript import { runAxe } from '@testcafe-community/axe'; import { createHtmlReport } from 'axe-html-reporter'; fixture('TestCafe tests with Axe-core®').page('http://example.com'); test('Automated accessibility testing', async (t) => { const axeContext = { exclude: [['select']] }; const axeOptions = { rules: { 'object-alt': { enabled: true }, 'role-img-alt': { enabled: true }, 'input-image-alt': { enabled: true }, 'image-alt': { enabled: true }, }, }; const { error, results } = await runAxe(axeContext, axeOptions); await t.expect(error).notOk(`axe check failed with an error: ${error.message}`); // creates html report with the default file name `accessibilityReport.html` createHtmlReport({ results, options: { projectKey: 'EXAMPLE', }, }); }); ``` Run TestCafe test: ```shell script npx testcafe Running tests in: - Chrome 85.0.4183.121 / Linux TestCafe tests with Axe-core® 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 ```javascript import { createHtmlReport } from 'axe-html-reporter'; (() => { // creates html report with the default name `accessibilityReport.html` file createHtmlReport({ results: 'AxeCoreResults' }); // full AxeResults object // creates html report with the default name `accessibilityReport.html` file and all supported AxeResults values createHtmlReport({ results: { violations: 'Result[]' } }); // passing only violations from axe.run output // creates html report with the default name `accessibilityReport.html` file and adds url and projectKey createHtmlReport({ results: 'AxeCoreResults', options: { projectKey: 'JIRA_PROJECT_KEY' }, }); // creates html report with the name `exampleReport.html` in 'axe-reports' directory and adds projectKey to the header createHtmlReport({ results: 'AxeCoreResults', options: { projectKey: 'JIRA_PROJECT_KEY', outputDir: 'axe-core-reports', reportFileName: 'exampleReport.html', }, }); // creates html report with all optional parameters, saving the report into 'docs' directory with report file name 'index.html' const customSummary = `Test Case: Full page analysis
Steps:
  1. Open https://dequeuniversity.com/demo/mars/
  2. Analyze full page with all rules enabled
`; createHtmlReport({ results: 'AxeResults', options: { projectKey: 'DEQUE', customSummary, outputDir: 'docs', reportFileName: 'index.html', }, }); })(); ``` ### CommonJS ```javascript const { createHtmlReport } = require('axe-html-reporter'); (() => { // creates html report with the name `accessibilityReport.html` file createHtmlReport({ results: { violations: 'Result[]' } }); })(); ``` --- _Source: https://npm.io/package/axe-html-reporter · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._