diff --git a/README.md b/README.md index 7b42925..8da0747 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,12 @@ The TestCafe module that allows you to use the [aXe](https://github.com/dequelab yarn add -D axe-core @testcafe-community/axe ``` +Or using npm: + +```bash +npm i -D axe-core @testcafe-community/axe +``` + ## How to use You can write a TestCafe test with automated accessibility checks like this. @@ -38,6 +44,8 @@ If any accessibility issues are found, you will see a detailed report in the err The `@testcafe-community/axe` module allows you to define the `context` and `options` [axe.run parameters](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axerun) 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 } } }; @@ -61,3 +69,19 @@ test('Automated accessibility testing', async t => { await t.expect(violations.length === 0).ok(createReport(violations)); }); ``` + +## Using full axe result object and axe.configure + +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'; + +fixture `TestCafe tests with Axe` + .page `http://example.com`; + +test('Automated accessibility testing', async t => { + const { error, results } = await runAxe(t); + // results constant contains full axe Results object (https://www.deque.com/axe/core-documentation/api-documentation/#results-object) +}); +``` diff --git a/index.d.ts b/index.d.ts index b4dc6d8..264cf99 100644 --- a/index.d.ts +++ b/index.d.ts @@ -1,5 +1,23 @@ declare module '@testcafe-community/axe' { - import { ElementContext, RunOnly, AxeResults, Result } from 'axe-core'; + import { ElementContext, RunOnly, AxeResults, Result, Spec } from 'axe-core'; + + interface AxeCheck { + results: AxeResults; + error?: any; + } + + export function runAxe( + context?: ElementContext, + options?: { + runOnly?: RunOnly; + rules?: Object; + iframes?: Boolean; + elementRef?: Boolean; + selectors?: Boolean; + } + ): Promise; + + export function configureAxe(spec: Spec): Promise; export function axeCheck( t: TestController, @@ -11,7 +29,7 @@ declare module '@testcafe-community/axe' { elementRef?: Boolean; selectors?: Boolean; } - ): Promise; + ): Promise; export function createReport(violations: Result[]): string; diff --git a/index.js b/index.js index 16b0a66..cffc899 100644 --- a/index.js +++ b/index.js @@ -9,6 +9,11 @@ const runAxe = ClientFunction((context, options = {}) => { }); }); +const configureAxe = ClientFunction((spec) => { + return axe.configure(spec); + } +); + const createReport = violations => { if (!violations.length) { return green('0 violations found'); @@ -68,6 +73,7 @@ const checkForViolations = async (t, context, options) => { module.exports = { runAxe, + configureAxe, axeCheck, createReport, checkForViolations diff --git a/package.json b/package.json index 77c595b..5ab6614 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "index.d.ts" ], "peerDependencies": { - "axe-core": ">=2.2.3 <4", + "axe-core": ">=2.2.3 <=4", "testcafe": "*" }, "dependencies": {