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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s