Skip to content

Commit

Permalink
Package to run a11y tests using pa11y and puppeteer
Browse files Browse the repository at this point in the history
  • Loading branch information
Dikshita25 committed Aug 19, 2022
0 parents commit ef5a1f4
Show file tree
Hide file tree
Showing 7 changed files with 1,035 additions and 0 deletions.
1 change: 1 addition & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
*node_modules
76 changes: 76 additions & 0 deletions README.md
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]()
13 changes: 13 additions & 0 deletions bin/index.js
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);
40 changes: 40 additions & 0 deletions index.js
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;
Loading

0 comments on commit ef5a1f4

Please sign in to comment.