Cypress Component Testing for Accessibility: Taking Axe to the Root
summary
Shows how to add Cypress component testing plus Axe Core via the cypress-axe plugin or send results to Axe watcher and the Developer Hub; setup uses npm and Cypress’s interactive generator, injectAxe runs after a component render, and irrelevant rules can be disabled per check. Component tests run in milliseconds (accessibility checks take seconds), asserting a target state reduces flakiness, Developer Hub stores runs with issue counts, remediation links and exports, and watcher can run in CI and block merges (Chrome-only at the time).
AI-written summary · about
chapters (11)
- 0:00Introduction and speaker intro
- 1:38X tools overview and definitions
- 4:16Setting up Cypress component testing
- 7:59Adding accessibility with Cypress X plugin
- 12:23Alternative: X Watcher setup
- 18:19Tool comparison and key benefits
- 23:16Honorable mention: Accessibility linter
- 24:11Experiences and limitations
- 28:03Key takeaways and accessibility culture
- 31:53Conclusion and resources
- 32:38Q&A session
related talks
50mNext Generation Accessibility Test Automation
16mConfiguring Axe Accessibility Tests
07mHow to Catch a11y Defects During Unit and E2E Testing
33mAutomated accessibility testing
30mTesting for Accessibility with aXe
28mAutomated Accessibility Testing
53mAutomating Accessibility Assurance
01h 06mnpm run a11y-test