The TestCafe module that allows you to use the aXe accessibility engine in TestCafe tests
npm install @testcafe-community/axe``bash`
yarn add -D axe-core @testcafe-community/axe
Or using npm:
`bash`
npm i -D axe-core @testcafe-community/axe
You can write a TestCafe test with automated accessibility checks like this.
Add the following clientScript in your testcafe config:
`js`
"clientScripts":[{"module":"axe-core/axe.min.js"}]
`js
import { checkForViolations } from '@testcafe-community/axe';
fixture TestCafe tests with Axe
.page ;
test('Automated accessibility testing', async t => {
// do stuff on your page
await checkForViolations(t);
});
`
If any accessibility issues are found, you will see a detailed report in the error log.
The @testcafe-community/axe module allows you to define the context and options axe.run parameters in a TestCafe test.
`js
import { checkForViolations } from '@testcafe-community/axe';
test('Automated accessibility testing', async (t) => {
const context = { exclude: [['select']] };
const options = { rules: { 'html-has-lang': { enabled: false } } };
await checkForViolations(t, context, options);
});
`
This project was forked from axe-testcafe which has been dormant for quite some time. If you prefer to use that API you can still use that:
`js
import { axeCheck, createReport } from 'axe-testcafe';
fixture TestCafe tests with Axe
.page ;
test('Automated accessibility testing', async t => {
const { error, violations } = await axeCheck(t);
await t.expect(violations.length === 0).ok(createReport(violations));
});
`
If you prefer to use a custom reporter for axe results you can get result object using runAxe function:
`js
import { runAxe } from '@testcafe-community/axe';
import { createHtmlReport } from 'axe-html-reporter'; // example of custom html report for axe results
fixture TestCafe tests with Axe
.page ;
test('Automated accessibility testing', async t => {
const { error, results } = await runAxe(); // "context" and "options" parameters are optional
// "results" constant contains full axe Results object (https://www.deque.com/axe/core-documentation/api-documentation/#results-object)
await t.expect(error).eql(null, axe check failed with an error: ${error});accessibilityReport.html
createHtmlReport({
violations: results.violations,
passes: results.passes,
incomplete: results.incomplete,
url: results.url,
projectKey: 'EXAMPLE',
}); // creates HTML report with the default file name
});