-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Package to run a11y tests using pa11y and puppeteer
- Loading branch information
0 parents
commit ef5a1f4
Showing
7 changed files
with
1,035 additions
and
0 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 |
---|---|---|
@@ -0,0 +1 @@ | ||
*node_modules |
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 |
---|---|---|
@@ -0,0 +1,76 @@ | ||
### Run accessibility tests using Pa11y and Puppeteer | ||
This package allows you to run accessibility tests using [Pa11y](https://pa11y.org/) which is an automated testing pal. | ||
|
||
#### Installation | ||
1. Install the package using command: | ||
``` | ||
npm install -g accessibility-pa11y-aider | ||
``` | ||
#### Configuration | ||
1. A configuration file should be created in-order to get started with accessibility testing, which will contain pre-defined test settings for running the tests againist browsers etc. | ||
|
||
Here's an extract of `pa11y.config.js`: | ||
`github.com/pa11y-examples/.../pa11y.config.js` | ||
``` | ||
module.exports = { | ||
launch_url: "https://www.saucedemo.com", | ||
src_folders: "tests", | ||
reports_path: "reports", | ||
reporter: ["json", "html"], | ||
test_settings: { | ||
runners: [ | ||
'axe', | ||
'htmlcs' | ||
], | ||
standard: 'WCAG2A', | ||
timeout: 120000, | ||
includeNotices: true, | ||
includeWarnings: true | ||
}, | ||
puppeteer_settings: { | ||
headless: false, | ||
executablePath: '/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome' | ||
} | ||
}; | ||
``` | ||
The above `config` contains couple of configurations: | ||
* launch_url : contains the default url to be launched by the browser | ||
* src_folders: Need to define the folder name which contains tests to be run | ||
* reports_path: Location to be specified for test results to be saved | ||
* reporter: Specify the kind of reports needs to be generated. Currently supports 2 formats i.e `json` and `html` | ||
* test_settings: Below are the default settings that will be passed during test execution: | ||
|
||
| Name | Types | Default | description | | ||
| :---------- |:------: | :------:| ----------------------------------------- | | ||
| runners | array | none | An array of runner names which correspond to existing and installed pa11y runners, If runner is not found then pa11y will throw error | | ||
| standard | string | WCAG2AA | The accessibility standard to use when testing pages. This should be one of WCAG2A, WCAG2AA, or WCAG2AAA. Note: only used by htmlcs runner | | ||
| timeout | integer | none | The time in milliseconds that a test should be allowed to run before calling back with a timeout error.Please note that this is the timeout for the entire test run (including time to initialise Chrome, load the page, and run the tests) | | ||
| includeNotices | boolean | false | Whether to include results with a type of notice in the Pa11y report.Issues with a type of notice are not directly actionable and so they are excluded by default. You can include them by using this option | | ||
| includeWarnings | boolean | false | Whether to include results with a type of warning in the Pa11y report. Issues with a type of warning are not directly actionable and so they are excluded by default.You can include them by using this option | | ||
|
||
* puppeteer_settings: Puppeteer is used internally to launch the browser. Puppeteer by default uses Chromium in headless mode, however the user can defined the necessary configurations mentioned in the official documentation [link](https://github.com/puppeteer/puppeteer#default-runtime-settings) | ||
|
||
2. Create a `firstTest.js` under `tests` folder : | ||
``` | ||
module.exports = { | ||
url: `${process.env.BASE_URL}/`, | ||
actions: [ | ||
'set field #username to standard_user', | ||
'set field #password to secret_sauce', | ||
'click element input[name=login-button]', | ||
'wait for element div[class="app_logo"] to be visible' | ||
] | ||
} | ||
``` | ||
3. Run the command and observe the coverage of a11y (accessibility) issues | ||
* To run all the tests under `tests` folder, use command: | ||
``` | ||
npm run runAccessibility | ||
``` | ||
* To run only a specific test from the `tests` folder, use command: | ||
``` | ||
runAccessibility --test tests/firstTest.js | ||
``` | ||
|
||
#### Example | ||
Sample repository for [references]() |
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 |
---|---|---|
@@ -0,0 +1,13 @@ | ||
#!/usr/bin/env node | ||
|
||
const yargs = require("yargs"); | ||
|
||
const options = yargs | ||
.usage("Usage: -t <test>") | ||
.option("t", { alias: "test", describe: "Run specific test", type: "string" }) | ||
.argv; | ||
|
||
const Pa11yAccessibility = require('../index'); | ||
const config = require(`${process.cwd()}/pa11y.config`) | ||
const accessibility = new Pa11yAccessibility(config); | ||
accessibility.run(options); |
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 |
---|---|---|
@@ -0,0 +1,40 @@ | ||
const { constructURL, createBrowserInstance, getAllTests, saveHtmlReports, saveJsonReport } = require('./utils'); | ||
const pa11y = require('pa11y'); | ||
|
||
class Pa11yAccessibility { | ||
constructor (pa11yConfig) { | ||
this.config = pa11yConfig; | ||
}; | ||
|
||
async run(options) { | ||
const browser = await createBrowserInstance(this.config.puppeteer_settings); | ||
const files = await getAllTests(this.config.src_folders, options) | ||
|
||
for (let file of files) { | ||
let filePath = file; | ||
if (!file.includes(process.cwd())) { | ||
filePath = require('path').resolve(process.cwd(), this.config.src_folders, file); | ||
} | ||
const testContent = require(filePath); | ||
const results = await pa11y(constructURL(this.config.launch_url, testContent.url), {...this.config.test_settings, browser, actions: testContent.actions}); | ||
|
||
//default reporter set | ||
let reporters = ['html']; | ||
|
||
if (this.config.reporter.length) { | ||
reporters = this.config.reporter; | ||
} | ||
for (const reporter of reporters) { | ||
if (reporter === 'html') { | ||
await saveHtmlReports(file, results, this.config.reports_path) | ||
} else { | ||
await saveJsonReport(file, results, this.config.reports_path) | ||
} | ||
} | ||
} | ||
|
||
browser.close(); | ||
} | ||
}; | ||
|
||
module.exports = Pa11yAccessibility; |
Oops, something went wrong.