Generating Reports from axe DevTools JSON Results

Link to Generating Reports from axe DevTools JSON Results copied to clipboard

Using the @axe-devtools/reporter package for generating reports

Use the axe DevTools reporter with Playwright to produce accessibility reports for scanned pages

Generating reports is now just as easy as running scans. With the axe DevTools reporter, you can generate immediately viewable HTML reports, JUnit XML reports for viewing in CI testing environments, and CSV reports to import into a multitude of other tools. This guide details how to install, set up, and use the axe DevTools reporter.

Prerequisites

In order to use the axe DevTools reporter, you need an existing NodeJS project to integrate axe DevTools as well as the reporter into. This portion of the guide only covers the reporter setup, so if you don't already have axe DevTools running scans, read this guide on how to run scans with axe DevTools.

Installing the Reporter

If you already configured your ~/.npmrc file to download axe DevTools npm packages, all you need to do is run the command:

npm install @axe-devtools/reporter

If you haven't configured your installation authentication already, read one of the basic installation guides.

Adding the Reporter to your Project

Outside of a module, axe DevTools is imported and an instance created with a statement like this:

const Reporter = require('@axe-devtools/reporter').default;

Within a module, the syntax is slightly different. The statement should look like this:

import Reporter from '@axe-devtools/reporter';

In order to use the reporter, your axe DevTools library and webdriver will need to be imported as well.

Reporter Options

There are three major choices you need to make when using the axe DevTools reporter

  1. What to name the reports
  2. Where to store the reports
  3. What format to generate the reports in

You can name the reports whatever you choose. When you initialize the reporter, you pass it a suite name which all the reports generated with that instance will share. Each report also includes a name assigned on a per-scan basis. The location, or directory, where the reports will be stored is also entirely up to the user. This directory location is also set at the instance level, so all reports generated on one reporter instance will share a directory. The optional report formats are HTML, which we recommend for immediate user viewing, JUnit XML, which we recommend for use in CI environments, and CSV, which enables the scan results to be imported into other tools.

Using the Reporter

Once the reporter is imported into your project, you can initialize it. The constructor takes two arguments: the report suite name, and the destination directory for the reports. Your initialization statement should look something like this:

reporter = new Reporter('<suite-name>', '<dir-name>');

There are two steps to running the reporter once an axe DevTools scan has been run. First, the results must be logged for the reporter to access. Then, the reporter processes these results into the report.

reporter.logTestResult('<scan-name>', <results-object>);
reporter.buildHTML('<scan-dir>');

Sample file

This sample file uses the same base as the writing tests example, but it integrates the reporter as well.

const rimraf = require('rimraf');
const AxeDevtoolsBuilder = require('@axe-devtools/playwright').default;
const playwright = require('playwright');
const Reporter = require('@axe-devtools/reporter').default;

(async () => {
  rimraf.sync('./a11y_results/*');

  const browser = await playwright.chromium.launch();
  const context = await browser.newContext();
  const page = await context.newPage();

  const reporter = new Reporter('playwright', './a11y_results');

  await page.goto('https://dequeuniversity.com/demo/mars/');

  const results = await new AxeDevtoolsBuilder({ page }).analyze();

  reporter.logTestResult('tested-page', results);
  reporter.buildHTML('./a11y_results');
  await browser.close();
})();

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.

See Also

Is this page helpful?

Help us improve this page

Still need help?