Getting Started

The @level-ci/a11y-playwright package enables accessibility testing in your Playwright workflow.
It lets you run static page analysis and generate detailed reports of accessibility violations based on WCAG guidelines and ACT rules.


// playwright/e2e/my-test.spec.js
 
const { levelAnalyze } = require('@level-ci/a11y-playwright')
 
test('example test', async ({ page }) => {
  await page.goto('http://localhost:5000')
  await levelAnalyze(page)
})

Prerequisites

Playwright version 1.16.0 or higher

Distribution

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

Installation

Extract the provided level-ci-playwright-app.zip into a separate directory, e.g. src/packages:


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

Install with npm:


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

This will add @level-ci/a11y-playwright to the dependencies in package.json.

Setup

Level CI App Playwright is an external package that must be imported in your Playwright tests.

Import @level-ci/a11y-playwright and call the levelAnalyze function:


const { levelAnalyze } = require('@level-ci/a11y-playwright')
 
test('example test', async ({ page }) => {
  await page.goto('http://localhost:5000')
  await levelAnalyze(page)
})

TypeScript Support

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


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

If you are not using TypeScript, you can still enable autocompletion by adding type references at the top of your test files:


/// <reference types="playwright" />
 
/// <reference types="@level-ci/a11y-playwright" />