Code Samples for the @axe-devtools/reporter Package

Link to Code Samples for the @axe-devtools/reporter Package copied to clipboard

This article provides code examples that demonstrate how to use the @axe-devtools/reporter package with other axe DevTools Node packages.

note

The AxeDevToolsReporter class inherits from the AxeDevToolsLogger class, you can call logger methods using the AxeDevToolsReporter class, specifically the logTestResult method.

Browser JavaScript

The code example in this section shows an implementation of a React test with the React Testing Library and the conversion of the results into an HTML report.

Packages used:

  • @axe-devtools/browser
  • @axe-devtools/reporter
import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import axeDevTools from '@axe-devtools/browser';
import AxeDevToolsReporter from '@axe-devtools/reporter';
import "babel-polyfill"

const axeReporter = new AxeDevToolsReporter("AxeDevTools-Badcomp-Results", "./test-results/");

describe('Bad Component', () => {

  beforeEach(function(done) {
    axeDevTools.init('wcag2', function() {
      done();
    });
  });

   test('Component has no accessibility violations, w/ axe DevTools reporter', (done) => {
     const {container} = render(<Badcomp></Badcomp>);
     axeDevTools.run(container, (err, results) => {
       axeReporter.logTestResult("badComp", results);
       expect(results.violations.length).toBe(0);
       done();
     });
   });

  afterAll(async (done)  => {
    await axeReporter.buildHTML('./test-results/'); 
    done();
  });
});

For more information about the Node browser package (@axe-devtools/browser), see the documentation or a ready-to-run example on GitHub.

Playwright

Packages used:

  • @axe-devtools/playwright
  • @axe-devtools/reporter
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();
})();

For more information about the Node Playwright package (@axe-devtools/playwright), see the documentation or a ready-to-run example on GitHub.

Puppeteer

Packages used:

  • @axe-devtools/puppeteer
  • @axe-devtools/reporter
const puppeteer = require('puppeteer');
const rimraf = require('rimraf');
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');
const Reporter = require('@axe-devtools/reporter').default;

(async () => {
    //remove previous axe devtools output files
    rimraf.sync("./a11y_Results/*");

    //launch reporter
    reporter = new Reporter('puppeteer', './a11y_Results');

    //launch puppeteer web driver
    const browser = await puppeteer.launch();
    const page = await browser.newPage();

    //launch page for testing
    await page.goto('https://broken-workshop.dequelabs.com');

    //analyze page
    const results = await new AxeDevToolsPuppeteer(page).analyze();
    
    //create report
    reporter.logTestResult('Tested Page', results);
    reporter.buildHTML('./a11y_Results');

    //close browser
    browser.close();
})();

For more information about the Node Puppeteer package (@axe-devtools/puppeteer), see the documentation or a ready-to-run example on GitHub.

WebDriverIO

Packages used:

  • @axe-devtools/webdriverio
  • @axe-devtools/reporter
const rimraf = require('rimraf');
const webdriverio = require('webdriverio');
const { AxeDevToolsWebdriverIO } = require('@axe-devtools/webdriverio');
const Reporter = require('@axe-devtools/reporter').default;

(async () => {
    //remove previous axe devtools output files
    rimraf.sync("./a11y_Results/*");

    //initialize driver
    const client = webdriverio.remote({
      desiredCapabilities: {
        browserName: 'chrome'
      }
    });
    await client.init();
  
    //initialize axe DevTools
    const axeDevTools = new AxeDevToolsWebdriverIO({ client });
    
    //initialize reporter
    reporter = new Reporter('webdriverio', './a11y_Results');

    //access test page
    await client.url('https://broken-workshop.dequelabs.com');

    //scan page
    const results = await axeDevTools.analyze();
    
    //create report
    reporter.logTestResult('Tested Page', results);
    reporter.buildHTML('./a11y_Results');

    //close browser
    await client.end();
})();

For more information about the Node WebDriverIO package (@axe-devtools/webdriverio), see the documentation or a ready-to-run example on GitHub.

WebDriverJS

Packages used:

  • @axe-devtools/webdriverjs
  • @axe-devtools/reporter
const rimraf = require('rimraf');
const AxeDevToolsWebdriverJS = require('@axe-devtools/webdriverjs');
const WebDriver = require('selenium-webdriver');
const Reporter = require('@axe-devtools/reporter').default;

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

driver.get('https://google.com').then(function() {

  //remove previous axe devtools output files
  rimraf.sync("./a11y_Results/*");

  //initialize reporter
  reporter = new Reporter('webdriverjs', './a11y_Results');

  new AxeDevToolsWebriverJS(driver).analyze(function(err, results) {
    if (err) {
      // Handle error
    }
    reporter.logTestResult('Tested Page', results);
    reporter.buildHTML('./a11y_Results');
  });
});

For more information about the Node WebDriverJS package (@axe-devtools/webdriverjs), see the documentation or a ready-to-run example on GitHub.