forked from helen-dikareva/axe-testcafe
-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: Improved example for usage of runAxe() with external HTML repor…
…ter (#5) * feat: updated types to include runAxe and configureAxe, added configureAxe, updated axe-core to include 4.0.2 version * feat: updated types to include runAxe and configureAxe, added configureAxe, updated axe-core to include 4.0.2 version * docs: code review update, README.md update * docs: improved example for runAxe() Initially, I submitted PR where runAxe() is exported to use it directly with custom axe result reporters. In this change I providing an example with `axe-html-reporter`.
- Loading branch information
1 parent
1e672f3
commit e8d311a
Showing
1 changed file
with
96 additions
and
87 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,87 +1,96 @@ | ||
| # @testcafe-community/axe | ||
| The TestCafe module that allows you to use the [aXe](https://github.com/dequelabs/axe-core) accessibility engine in TestCafe tests. | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| 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. | ||
|
|
||
| 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 `http://example.com`; | ||
|
|
||
| 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. | ||
|
|
||
|  | ||
|
|
||
| ## aXe options | ||
|
|
||
| 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 } } }; | ||
|
|
||
| await checkForViolations(t, context, options); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Legacy API | ||
|
|
||
| This project was forked from [axe-testcafe](https://github.com/helen-dikareva/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 `http://example.com`; | ||
|
|
||
| test('Automated accessibility testing', async t => { | ||
| const { error, violations } = await axeCheck(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) | ||
| }); | ||
| ``` | ||
| # @testcafe-community/axe | ||
| The TestCafe module that allows you to use the [aXe](https://github.com/dequelabs/axe-core) accessibility engine in TestCafe tests. | ||
|
|
||
| ## Installation | ||
|
|
||
| ```bash | ||
| 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. | ||
|
|
||
| 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 `http://example.com`; | ||
|
|
||
| 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. | ||
|
|
||
|  | ||
|
|
||
| ## aXe options | ||
|
|
||
| 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 } } }; | ||
|
|
||
| await checkForViolations(t, context, options); | ||
| }); | ||
| ``` | ||
|
|
||
| ## Legacy API | ||
|
|
||
| This project was forked from [axe-testcafe](https://github.com/helen-dikareva/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 `http://example.com`; | ||
|
|
||
| test('Automated accessibility testing', async t => { | ||
| const { error, violations } = await axeCheck(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'; | ||
| import { createHtmlReport } from 'axe-html-reporter'; // example of custom html report for axe results | ||
|
|
||
| fixture `TestCafe tests with Axe` | ||
| .page `http://example.com`; | ||
|
|
||
| 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}`); | ||
| createHtmlReport({ | ||
| violations: results.violations, | ||
| passes: results.passes, | ||
| incomplete: results.incomplete, | ||
| url: results.url, | ||
| projectKey: 'EXAMPLE', | ||
| }); // creates HTML report with the default file name `accessibilityReport.html` | ||
| }); | ||
| ``` |