Security News
Combatting Alert Fatigue by Prioritizing Malicious Intent
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
axe-html-reporter-custom-template
Advanced tools
The module that allows you to create HTML Report from raw accessibility aXe result object
Creates an HTML report from axe-core library AxeResults object listing violations, passes, incomplete and incompatible results.
Allows specifying report creation options: templatePath
, reportFileName
, outputDir
, outputDirPath
, projectKey
and customSummary
.
Notes:
customSummary
allows having html parametersoutputDirPath
allows specifying absolute pathtemplatePath
allows specifying custom html template pathPlease 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:
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:
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}`);
// creates html report with the default file name `accessibilityReport.html`
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)
import { createHtmlReport } from 'axe-html-reporter';
(() => {
// creates html report with the default name `accessibilityReport.html` file
createHtmlReport({ results: 'AxeResults' }); // 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: 'AxeResults',
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: 'AxeResults',
options: {
projectKey: 'JIRA_PROJECT_KEY',
outputDir: 'axe-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
<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',
},
});
})();
const { createHtmlReport } = require('axe-html-reporter');
(() => {
// creates html report with the name `accessibilityReport.html` file
createHtmlReport({ results: { violations: 'Result[]' } });
})();
FAQs
The module that allows you to create HTML Report from raw accessibility aXe result object
The npm package axe-html-reporter-custom-template receives a total of 0 weekly downloads. As such, axe-html-reporter-custom-template popularity was classified as not popular.
We found that axe-html-reporter-custom-template demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
Security News
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.