olmesm / better-cypress-axe

Commands to help with Cypress-Axe

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

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)

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