Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A11y test example for axe-puppeteer.
const colors = require('colors');
const link = colors.underline.blue;
const error = colors.red.bold;
function selectorToString(selectors, separator) {
separator = separator || ' '
return selectors
.reduce((prev, curr) => prev.concat(curr), [])
.join(separator)
}
module.exports = function (results, verbose) {
const cliReporter = function(...args) {
console.log(...args)
}
const violations = results.violations
if (violations.length === 0) {
if (verbose) {
cliReporter(colors.green(' 0 violations found!'))
}
return
}
const issueCount = violations.reduce((count, violation) => {
cliReporter(
'\n' +
' Violation of %j with %d occurrences!\n' +
' %s. Correct invalid elements at:\n' +
violation.nodes
.map(node => ' - ' + selectorToString(node.target) + '\n')
.join('') +
' For details, see: %s',
violation.id,
violation.nodes.length,
violation.description,
link(violation.helpUrl.split('?')[0])
)
return count + violation.nodes.length
}, 0)
cliReporter(error('\n%d Accessibility violations detected.'), issueCount)
}
const AxePuppeteer = require('axe-puppeteer').default
const puppeteer = require('puppeteer')
const reporter = require('./axe-report')
async function test() {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.setBypassCSP( true );
await page.goto('https://dequeuniversity.com/demo/mars/');
const results = await new AxePuppeteer(page).analyze();
reporter(results)
await browser.close();
}
test().catch(e => {console.log( e )});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment