Better Cypress-Axe
This package extends the existing and already awesome cypress-axe package. This package bundles the required axe-core dependencies, which is the reason why I felt it should be a separate package to cypress-axe.
Who is this for?
- You're battling with a Webpack setup issue.
- You want custom logging in the cypress console.
- You don't want the a11y issues failing the entire e2e tests - this can be an issue if you're adding this to a existing project.
Installation
Assuming you already have cypress installed and setup.
npm install --dev better-cypress-axe # Alternatively if using yarn yarn add dev better-cypress-axe
NOTE: There is no need to add axe-core or cypress-axe as they're already bundled into this package to get around the issues mentioned above.
Then follow the steps from cypress-axe setup...
-
Import
better-cypress-axe
by adding tocypress/support/index.js
-
configureAxe - note this isn't required
Custom Logging and Reporting
You can define a custom cypress loggers and violation handing by passing in an object to the checkAlly
command.
This is useful for ensuring the logging follows a certain format, or that the final report doesn't fail a build.
You'll need to add a cypress task to log to the terminal console.
const customViolationLogger = cyconst customViolationHandler = cy cy
Typescript
Add to cypress/typings.d.ts
Development
# Use nvm or node version as per .nvmrc nvm use # Install Dependencies npm i # Build for deploy npm run build # Lint files npm run lint
Contributing
Contributions and PR's welcome