Pathwise

Manuals / Cypress / Chapter 10

D · Delivery · intermediate · Week 8–9 · Chapter 10 of 12

Accessibility testing with cypress-axe

Critical flows should not ship a11y regressions. cypress-axe runs axe-core rules inside Cypress — fast smoke for WCAG violations on key pages.

Path progress
77%

Step 1 of 4

Install cypress-axe

npm install cypress-axe axe-core. Import in support/e2e.js.

Install cypress-axeDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Install cypress-axdrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Example

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.

Was this step clear?
Chapter learning outcomes
  • axe-core rules
  • cy.injectAxe / checkA11y
  • Excluding third-party nodes

Clear these before you leave

Side quest

Violation fix drill

Introduce missing label on toy page. Axe catches it. Fix. Green again.