Skip to Content
E2E test frameworksPuppeteerGetting started

Intro

The @userway/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 { userwayAnalysis } = require('@userway/a11y-puppeteer') ;(async () => { const browser = await puppeteer.launch({ headless: false }) const page = await browser.newPage() await page.goto('https://www.google.com') await userwayAnalysis(page) await browser.close() })()

Prerequisites

Puppeteer version 20.7.4 or higher

Distribution

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

Installation

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

src └── packages ├── userway-app-puppeteer.zip └── userway-app-puppeteer

Install userway-app-puppeteer with npm install:

npm install src/packages/userway-puppeteer-app

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

Setup

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

Import @userway/a11y-puppeteer to your Puppeteer’s test file and call userwayAnalysis function:

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

Types

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

{ "compilerOptions": { "types": ["puppeteer", "@userway/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="@userway/a11y-puppeteer" /> // ↑ Add this at the top of your test
Last updated on