---
title: Accessibility Testing with Axe and WebdriverIO
description: Run Automated Accessibility tests against websites with WebdriverIO and
  Axe-core.
source_url:
  html: https://testingbot.com/support/accessibility/webdriverio.html
  md: https://testingbot.com/support/accessibility/webdriverio.html.md
---

# 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 accessibility issues.

## Installation

To get started, make sure you have WebdriverIO installed:

```bash
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](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/webdriverio) package as well:

```bash
npm i @axe-core/webdriverio
```

## Configuration

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

```javascript
exports.config = {

	/**
	 * specify test files
	 */
	specs: [
		'./runner-specs/mocha.test.js'
	],

	/**
	 * capabilities
	 */
	capabilities: [{
		browserName: 'chrome',
		browserVersion: 'latest',
		platformName: 'WIN11'
	}],

	/**
	 * test configurations
	 */
	logLevel: 'silent',
	coloredLogs: true,
	screenshotPath: 'screenshots',
	waitforTimeout: 10000,
	connectionRetryTimeout: 480000,
	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.

```javascript
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](https://github.com/dequelabs/axe-core-npm/tree/develop/packages/webdriverio).

Various options are available, including:

- Include/exclude DOM elements from analysis. 
- Limit analysis to specific accessibility rules. 

## Looking for more help?

Have questions or need more information? Reach out via email or Slack.

[Email us](https://testingbot.com/contact/new) [Join our Slack](https://join.slack.com/t/testingb0t/shared_invite/zt-3bcw9xch-jk19~6XPs_xBrsAgAedkCw)