olmesm / better-cypress-axe

Commands to help with Cypress-Axe

Home Page:https://npmjs.com/better-cypress-axe

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Better Cypress-Axe

PRs Welcome


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.


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...

  1. Import better-cypress-axe by adding to cypress/support/index.js

    import "better-cypress-axe"
  2. injectAxe

  3. configureAxe - note this isn't required

  4. checkA11y

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)

    context, // can use undefined
    options, // can use undefined
        logger: customViolationLogger,
        asserter: customViolationHandler


Add to cypress/typings.d.ts

import "better-cypress-axe"


# 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


Contributions and PR's welcome


Commands to help with Cypress-Axe


License:MIT License


Language:JavaScript 100.0%