codeceptjs-a11y-helper
CodeceptJS Accessibility helper wraps on top of axe-playwright to perform a11y check against your web application.
Allure reports: https://kobenguyent.github.io/codeceptjs-a11y-helper/#
NPM package: https://www.npmjs.com/package/codeceptjs-a11y-helper
Installation
npm i codeceptjs-a11y-helper --save-dev
Configuration
This helper should be added in your codeceptjs config file: codecept.conf.*
Example:
{
...
helpers: {
A11yHelper: {
require: 'codeceptjs-a11y-helper',
}
}
...
}
Usage
- To use this helper, you must enable Playwright helper.
- After install the helper, you can use it by calling
I.runA11yCheck()
- If there is auto complete for actor I, try running
npx codeceptjs def
Options
By default, this setting is enabled, you can either input those settings in config file or runA11yCheck()
, precedence is as followed:
defaults settings, settings in config, settings from runA11yCheck()
- context: null,
- axeOptions:
{ runOnly: { type: 'tag', values: ['wcag2a', 'wcag2aa', 'wcag2aaa', 'wcag21a', 'wcag21aa', 'wcag22aa', 'best-practice', 'wcag***', 'ACT', 'experimental', 'cat.*',], }, }
- detailedReport: true
- detailedReportOptions: { html: true },
- skipFailures: true,
- reporter: 'html',
- outputDir: 'output',
- reportFileName: 'accessibility-audit.html'
More info could be found here
Note: If you pass skipFailures=false
, test would fail if violations found and there is no HTML report generated.
- Within config file:
{
...
helpers: {
A11yHelper: {
require: 'codeceptjs-a11y-helper',
outputDir: 'hello',
reportFileName: 'a11y-audit.html'
}
}
...
}
- From
runA11yCheck()
:
Feature('A11Y Check');
Scenario('a11y check', async ({ I }) => {
I.amOnPage('https://js.devexpress.com/Demos/WidgetsGallery/Demo/Slider/Overview/jQuery/Light/')
await I.runA11yCheck({ outputDir: 'hello'})
});
Output
A11Y Check --
[1] Starting recording promises
Timeouts:
› [Session] Starting singleton browser session
a11y check
I am on page "https://js.devexpress.com/Demos/WidgetsGallery/Demo/Slider/Overview/jQuery/Light/"
I run a11y check {"outputDir":"hello"}
HTML report was saved into the following directory /Users/kobenguyent/Desktop/codeceptjs-playwright-fun/hello/accessibility-audit.html
✔ OK in 6028ms
OK | 1 passed // 7s