Axe and WebdriverIO
WebdriverIO is a popular browser automation framework, with lots of features and great documentation.
The Axe-core package can be used in combination with WebdriverIO to do automated accessibility testing.
You can specify one or more browsers in the WebdriverIO config file, indicate how many tests you want to run in parallel and analyze HTML pages for accessiblity issues.
Installation
To get started, make sure you have WebdriverIO installed:
npm i @wdio/cli @wdio/local-runner @wdio/testingbot-service @wdio/dot-reporter @wdio/mocha-framework
Next, we'll need to install the @axe-core/webdriverio package as well:
Configuration
Once everything is installed, we need to configure WebdriverIO to connect to the TestingBot browser grid:
exports.config = {
/**
* specify test files
*/
specs: [
'./runner-specs/mocha.test.js'
],
/**
* capabilities
*/
capabilities: [{
browserName: 'chrome',
browserVersion: 'latest',
platformName: 'WIN10'
}],
/**
* test configurations
*/
logLevel: 'silent',
coloredLogs: true,
screenshotPath: 'screenshots',
waitforTimeout: 10000,
framework: 'mocha',
services: [
['testingbot']
],
user: 'api_key',
key: 'api_secret',
reporters: ['dot'],
reporterOptions: {
outputDir: './'
},
mochaOpts: {
ui: 'bdd'
}
};
Example
Now we can create our first accessibility test with axe-core.
const AxeBuilder = require('@axe-core/webdriverio').default;
describe('Accessibility Test', () => {
it('should get the accessibility results from a page', async() => {
const builder = new AxeBuilder({ client: browser })
await browser.url('https://testingbot.com')
const result = await builder.analyze()
console.log('got', result)
})
})
The result object will contain various accessibility results and violations. You can check for the
violations
object in the results and gather various meta-data for each violation, includingimpact
(severity) and the DOM nodes affected.
More Information
More information is available on the @axe-core/webdriverio documentation page.
Various options are available, including:
- Include/exclude DOM elements from analysis.
- Limit analysis to specific accessibility rules.