10. Accessibility testing with cypress-axe
Cypress · 48 pages source format
Critical flows should not ship a11y regressions. cypress-axe runs axe-core rules inside Cypress — fast smoke for WCAG violations on key pages.
What you'll learn
- axe-core rules
- cy.injectAxe / checkA11y
- Excluding third-party nodes
Install cypress-axe
npm install cypress-axe axe-core. Import in support/e2e.js.
import "cypress-axe";
// In spec:
cy.visit("/");
cy.injectAxe();
cy.checkA11y();Do this now
Add axe to support file. Run checkA11y on login page after load.
Scope checks
Run a11y on critical pages only — login, checkout, settings. Not every spec (too slow).
Do this now
Create a11y/login.cy.js and a11y/checkout.cy.js — dedicated a11y specs.
Handle known violations
Exclude nodes or rules with documented ticket links — never silent ignore.
Do this now
If violation exists, add // TODO JIRA-123 comment and exclusion with reason.
A11y in CI
Run a11y specs in same or separate job. Fail build on serious/critical violations.
Do this now
Add a11y folder to CI workflow. Confirm failure on injected violation (then fix).