Features
Start a free trial

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:

Copy code
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:

Copy code
npm i @axe-core/webdriverio

Configuration

Once everything is installed, we need to configure WebdriverIO to connect to the TestingBot browser grid:

Copy code
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.

Copy code
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, including impact (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.