Writing Tests for Axe DevTools for Web for WebDriverJS

Writing tests with Axe DevTools

The individual snippets in the sections below are JavaScript, and they compile unchanged in TypeScript. The Complete Sample File section gives the full test in both languages.

Prerequisites

In order to test pages with Axe DevTools, you first need it imported and initialized in your project. If you haven't completed this step yet, view this guide on how to do it.

Getting Scan Context

Before you can scan a page for accessibility, it needs to be accessed by the webdriver.

await driver.get('<URL>');

Once the webdriver has accessed the page, you can scan it with Axe DevTools and save the results. The most simple way to view the results of the scan is to console log the results object.

const results = await new AxeDevToolsBuilder(driver).analyze();
console.log(results);

Complete Sample File

The same test is shown below in JavaScript and in TypeScript. The Axe DevTools API is identical in both; the TypeScript version uses import syntax and annotates the driver and the scan results.

JavaScript

const { AxeDevToolsBuilder } = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');

var driver = new WebDriver.Builder().forBrowser('chrome').build();

driver.get('https://google.com').then(function() {
  new AxeDevToolsBuilder(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    console.log(results);
  });
});

TypeScript

import { AxeDevToolsBuilder } from '@axe-devtools/webdriverjs';
import { Builder } from 'selenium-webdriver';
import type { WebDriver } from 'selenium-webdriver';
import type { AxeResults } from 'axe-core';

(async () => {
  const driver: WebDriver = new Builder().forBrowser('chrome').build();

  try {
    await driver.get('https://google.com');
    const results: AxeResults = await new AxeDevToolsBuilder(driver).analyze();
    console.log(results);
  } finally {
    await driver.quit();
  }
})();

Next Steps

Now that you've successfully completed an accessibility scan, you're ready to move on to more advanced scanning topics like generating reports and using the results object.

Troubleshooting

If you have trouble with getting scan results, contact your Deque representative directly, reach us via our support desk, or send us an email. We'll be happy to help.