better-cypress-axe
v1.0.8
Published
Commands to help with Cypress-Axe
Downloads
1,704
Maintainers
Readme
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
import "better-cypress-axe"
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 = violation => cy.task("log", violation)
const customViolationHandler = violation => cy.task("log", violation)
cy.checkA11y(
context, // can use undefined
options, // can use undefined
{
logger: customViolationLogger,
asserter: customViolationHandler
}
)
Typescript
Add to cypress/typings.d.ts
import "better-cypress-axe"
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