Automating accessibility: Running axe-core with webdriverIO

Introduction:

Axe is an accessibility testing engine for websites and other HTML-based user interfaces. It’s fast, secure, lightweight, and was built to seamlessly integrate with any existing test environment so you can automate accessibility testing alongside your regular functional testing.

Axe-core requires injection below script tag to all frames for evaluating content inside that frame

<script src=”node_modules/axe-core/axe.min.js”></script>

But luckily , the accessibility vendor Deque Systems supports and provides axe-core for all modern automation tools and frameworks that injects the script tag automatically and allow running accessibility testing as part of your automation scripts.

https://github.com/dequelabs/axe-core/blob/33b2bf4d4a1aa4bded13deac72f80a39d195bde5/doc/projects.md

Getting started:

1. Install @axe-core/webdriverio

Install https://www.npmjs.com/package/@axe-core/webdriverio

npm install @axe-core/webdriverio

2. Run your tests

WebdriverIO comes in two flavours, one is webdriverIO runner which is a framework that contains all integrations like service setup, reporting etc already done for you. The second one is standalone more like the selenium webdriverJS, which you can use to automate browser or device by using it as a library.

lets see how to run axe-core in this two modes:

Running axe-core with webdriverIO runner:

const AxeBuilder = require('@axe-core/webdriverio').default;
describe('Check axe core', () => {
it('Print axe code results', async () => {
await browser.url('https://www.google.com');
const builder = new AxeBuilder({ client: browser })
const results = await builder.analyze();
console.log(JSON.stringify(results.violations, null, 2));
});
});

Running axe-core with webdriverIO standalone:

const AxeBuilder = require('@axe-core/webdriverio').default;
const { remote } = require('webdriverio');

(async () => {
  const client = await remote({
    logLevel: 'error',
    capabilities: {
      browserName: 'firefox'
    }
  });

  await client.url('https://dequeuniversity.com/demo/mars/');

  const builder = new AxeBuilder({ client });
 
  const results = await builder.analyze();
  console.log(results);

})();

Output: