Intro

The @level-ci/a11y-cypress 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. The library extends Cypress’s cy commands, making it easy to integrate into your testing workflow by using 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 an NPM dependency.

Installation

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

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

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

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

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

Setup

Level CI App Cypress extends Cypress’s cy commands.

Add this import to your Cypress’s support file (usually cypress/support/e2e.js):

import '@level-ci/a11y-cypress'

Now you have access to cy.levelAnalyze and cy.levelSaveReport in your Cypress’s tests.

Types

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

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

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

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