Security News
New Proposed CISA Mandate Would Require Critical Infrastructure to Report Ransom Payments Within 24 Hours
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
axe-html-reporter
Advanced tools
The module that allows you to create HTML Report from raw accessibility aXe result object
Weekly downloads
Readme
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 parametersoutputDirPath
allows specifying absolute 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 receives a total of 197,546 weekly downloads. As such, axe-html-reporter popularity was classified as popular.
We found that axe-html-reporter 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
CISA has proposed a set of new rules that would require critical infrastructure to report cyber incidents and ransom payments.
Security News
Redis is no longer OSS, breaking its explicit commitment to remain under the BSD 3-Clause License forever. This has angered contributors who are now working to fork the software.
Product
Socket AI now enables 'AI detected potential malware' alerts by default, ensuring users benefit from AI-powered state-of-the-art malware detection without needing to opt-in.