Axe + Tape + Puppeteer

axe-tape-puppeteer.test.js

const test = require('tape')
const util = require('util')
const puppeteer = require('puppeteer')
const component = 'my-component'

let browser, page, focus
const componentId = 'my-component-instance'
const interactionId = 'my-component-trigger'

test(component, async t => {
  t.plan(1)
  browser = await puppeteer.launch()
  page = await browser.newPage()
  await page.goto(`http://0.0.0.0:3001/${component}.html`)
  const initial = await a11y()
  if (initial.violations.length) {
    t.fail(log(initial))
  }
  t.pass('no initial errors')
})

test('open dismissable my-component', async t => {
  t.plan(1)
  await page.click(interactionId)
  const dismissable = await a11y()
  if (dismissable.violations.length) {
    t.fail(log(dismissable))
  }
  focusId = await activeElement()
  t.equal(componentId, focusId, `#${componentId} has focus`)
})

test('close dismissable my-component', async t => {
  t.plan(1)
  await page.click(`${componentId} > .dismiss`)
  const dismissed = await a11y()
  if (dismissed.violations.length) {
    t.fail(log(dismissed))
  }
  focusId = await activeElement()
  t.equal(interactionId, focusId, `${interactionId} has focus`)
})

test.onFinish(async () => browser.close())

async function a11y () {
  return page.evaluate(async () => axe.run())
}

async function activeElement () {
  return page.evaluate(() => document.activeElement.id)
}

function log (obj) {
  return util.inspect(obj.violations, { showHidden: false, depth: null })
}