Intro

The @level-ci/a11y-puppeteer is an NPM package designed to help you perform accessibility testing on your web pages. With it you can easily run static page analysis on a webpage and get a detailed report of accessibility violations based on WCAG guidelines and ACT rules.

// e2e/accessibility.test.js
const puppeteer = require('puppeteer')
const { levelAnalyze } = require('@level-ci/a11y-puppeteer')
 
;(async () => {
  const browser = await puppeteer.launch({ headless: false })
  const page = await browser.newPage()
 
  await page.goto('https://www.google.com')
  await levelAnalyze(page)
  await browser.close()
})()

Prerequisites

Puppeteer version 20.7.4 or higher

Distribution

Level CI App Puppeteer is distributed as a zip-packaged NPM module and should be installed as an NPM dependency.

Installation

First, extract the provided level-ci-app-puppeteer.zip inside of a separate directory, like src/packages:

src
└── packages
   ├── level-ci-app-puppeteer.zip
   └── level-ci-app-puppeteer

Install level-ci-app-puppeteer with npm install:

npm install src/packages/level-ci-app-puppeteer

This adds @level-ci/a11y-puppeteer to the dependencies in package.json.

Setup

Level CI App Puppeteer external package and needs to be imported in Puppeteer test.

Import @level-ci/a11y-puppeteer to your Puppeteer’s test file and call levelAnalyze function:

const { levelAnalyze } = require('@level-ci/a11y-puppeteer')
 
test('example test', async ({ page }) => {
  await page.goto('https://www.google.com')
  await levelAnalyze(page)
})

Types

If you are using TypeScript, add @level-ci/a11y-puppeteer to types section in your tsconfig.json:

{
  "compilerOptions": {
    "types": ["puppeteer", "@level-ci/a11y-puppeteer"]
  }
}

If you are not using TypeScript, you can still have autocompletion available by adding type references to your tests:

/// <reference types="puppeteer" />
/// <reference types="@level-ci/a11y-puppeteer" />
 
// ↑ Add this at the top of your test