Research
Security News
Malicious npm Package Targets Solana Developers and Hijacks Funds
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
axe-html-reporter
Advanced tools
The module that allows you to create HTML Report from raw accessibility aXe result object
The axe-html-reporter npm package is used to generate HTML reports from accessibility test results produced by the axe-core library. It helps in visualizing the accessibility issues found during testing in a user-friendly HTML format.
Generate HTML Report
This feature allows you to generate an HTML report from the results of an accessibility test run using axe-core. The `createHtmlReport` function takes the results object and options for the output directory and report file name, and generates an HTML file.
const { createHtmlReport } = require('axe-html-reporter');
const fs = require('fs');
const results = { /* axe-core results object */ };
createHtmlReport({
results,
options: {
outputDir: 'reports',
reportFileName: 'accessibility-report.html'
}
}).then(() => {
console.log('Report generated successfully');
}).catch(err => {
console.error('Error generating report:', err);
});
The pa11y-reporter-html package is used to generate HTML reports from Pa11y accessibility test results. It is similar to axe-html-reporter in that it provides a way to visualize accessibility issues in an HTML format. However, it is specifically designed to work with Pa11y, another popular accessibility testing tool.
The html-reporter package is a generic tool for generating HTML reports from various types of test results, not limited to accessibility testing. It provides a flexible way to create custom HTML reports, but may require more configuration compared to axe-html-reporter, which is specifically tailored for axe-core results.
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-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:
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)
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
<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
We found that axe-html-reporter demonstrated a healthy version release cadence and project activity because the last version was released less than 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.
Research
Security News
A malicious npm package targets Solana developers, rerouting funds in 2% of transactions to a hardcoded address.
Security News
Research
Socket researchers have discovered malicious npm packages targeting crypto developers, stealing credentials and wallet data using spyware delivered through typosquats of popular cryptographic libraries.
Security News
Socket's package search now displays weekly downloads for npm packages, helping developers quickly assess popularity and make more informed decisions.