Trick of Cypress: Automated UI Accessibility Testing

Trying to make axe work can contain surprises. But let’s start at the beginning. Installation and basic usage. Quickly.

Note: relevant for the latest (v10+) Cypress. Cypress 10 was a major upgrade.

Installation

Install cypress-axe:

npm install --save-dev cypress axe-core

Add the import statement in the e2e.js support file:

import 'cypress-axe';

Nota bene

In your test visit command has to come first, then you can use:

cy.injectAxe();

cy.checkA11y();

(You can read more about axe configuration here.)

The Trick

Error message: axe.run arguments are invalid.

Fix: add null as an additional argument:

cy.checkA11y(null, A11Y_OPTIONS);

YAY! It works! Magic.