Getting Started

Intro

The @level-ci/a11y-cypress package adds accessibility testing to your Cypress workflow. It extends Cypress commands so you can quickly scan pages, detect WCAG and ACT rule violations, and view detailed reports with just a few lines of code.


// cypress/e2e/my-test.js
 
it('basic example', () => {
  cy.visit('some example website')
  cy.levelAnalyze()
})

Prerequisites

Cypress version 10.0.0 or higher

Distribution

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

Installation

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


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

Install with npm:


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

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

Setup

Level CI App Cypress extends Cypress commands.

To access cy.levelAnalyze() and cy.levelSaveReport() in your Cypress tests, add this import to your support file (usually cypress/support/e2e.js):


import '@level-ci/a11y-cypress'

TypeScript Support

If you’re using TypeScript, add @level-ci/a11y-cypress to the types section of your tsconfig.json:


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

If you’re not using TypeScript, you can still enable autocompletion by adding type references at the top of your tests:


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

Cypress Documentation

Getting started