The module that allows you to create HTML Report from raw accessibility aXe result object
npm install axe-html-reporterCreates 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.
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);
``
npm i -D axe-html-reporter
To run TestCafe tests with Axe-core®, install testcafe, axe-core and @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});accessibilityReport.html
// creates html report with the default file name `
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)
`
`javascript
import { createHtmlReport } from 'axe-html-reporter';
(() => {
// creates html report with the default name accessibilityReport.html fileaccessibilityReport.html
createHtmlReport({ results: 'AxeCoreResults' }); // full AxeResults object
// creates html report with the default name file and all supported AxeResults valuesaccessibilityReport.html
createHtmlReport({ results: { violations: 'Result[]' } }); // passing only violations from axe.run output
// creates html report with the default name file and adds url and projectKeyexampleReport.html
createHtmlReport({
results: 'AxeCoreResults',
options: { projectKey: 'JIRA_PROJECT_KEY' },
});
// creates html report with the name in 'axe-reports' directory and adds projectKey to the headerTest Case: Full page analysis
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 =
Steps:
;
createHtmlReport({
results: 'AxeResults',
options: {
projectKey: 'DEQUE',
customSummary,
outputDir: 'docs',
reportFileName: 'index.html',
},
});
})();
`$3
`javascript
const { createHtmlReport } = require('axe-html-reporter');(() => {
// creates html report with the name
accessibilityReport.html file
createHtmlReport({ results: { violations: 'Result[]' } });
})();
``