Writing Tests for axe DevTools for Web for Puppeteer

Writing tests with axe DevTools

Producing accessibility scan results with axe DevTools can be as easy as one line of code. These results can be consumed raw, used in conjunction with an assertion library, or used to create accessibility reports.

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 Puppeteer.

//Launch the Puppeteer Driver
const browser = await puppeteer.launch();
//Create a new page in the browser
const page = await browser.newPage();
//Send the browser to the desired page to scan
await page.goto('$URL');

Bypassing Content Security Policy

If the page you are trying to scan has Content Security Policy enabled, you may have issues. If you encounter this problem, axe DevTools includes a workaround. Simply include this statement after your page is created:

await page.setBypassCSP(true);

Once Puppeteer 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 AxeDevToolsPuppeteer(page).analyze();
console.log(results);

Complete Sample File

const puppeteer = require('puppeteer');
const { AxeDevToolsPuppeteer } = require('@axe-devtools/puppeteer');

(async () => {

    //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();
    
    //log results
    console.log(results);

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

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.