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
, projectKey
and customSummary
.
customSummary
allows having html parameters.
Please check 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. 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:
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: {
'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}`);
createHtmlReport({
results,
options: {
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 { createHtmlReport } from 'axe-html-reporter';
(() => {
createHtmlReport({ results: 'AxeResults' });
createHtmlReport({ results: { violations: 'Result[]' } });
createHtmlReport({
results: 'AxeResults',
options: { projectKey: 'JIRA_PROJECT_KEY' },
});
createHtmlReport({
results: 'AxeResults',
options: {
projectKey: 'JIRA_PROJECT_KEY',
outputDir: 'axe-reports',
reportFileName: 'exampleReport.html',
},
});
const customSummary = `Test Case: Full page analysis
<br>Steps:</br>
<ol style="margin: 0">
<li>Open https://dequeuniversity.com/demo/mars/</li>
<li>Analyze full page with all rules enabled</li>
</ol>`;
createHtmlReport({
results: 'AxeResults',
options: {
projectKey: 'DEQUE',
customSummary,
outputDir: 'docs',
reportFileName: 'index.html',
},
});
})();
CommonJS
const { createHtmlReport } = require('axe-html-reporter');
(() => {
createHtmlReport({ results: { violations: 'Result[]' } });
})();