https://github.com/olmesm/better-cypress-axe
Commands to help with Cypress-Axe
https://github.com/olmesm/better-cypress-axe
a11y a11y-testing accessibility-checker axe axe-core cypress cypress-a11y cypress-axe wcag
Last synced: 4 months ago
JSON representation
Commands to help with Cypress-Axe
- Host: GitHub
- URL: https://github.com/olmesm/better-cypress-axe
- Owner: olmesm
- License: mit
- Created: 2019-05-23T12:17:06.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T05:44:16.000Z (over 3 years ago)
- Last Synced: 2025-10-17T00:46:18.518Z (8 months ago)
- Topics: a11y, a11y-testing, accessibility-checker, axe, axe-core, cypress, cypress-a11y, cypress-axe, wcag
- Language: JavaScript
- Homepage: https://npmjs.com/better-cypress-axe
- Size: 948 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Better Cypress-Axe
[](http://makeapullrequest.com)
---
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.
```sh
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`
```js
import "better-cypress-axe"
```
1. [injectAxe](https://github.com/avanslaars/cypress-axe#cyinjectaxe)
1. [configureAxe](https://github.com/avanslaars/cypress-axe#cyconfigureaxe) - note this isn't required
1. [checkA11y](https://github.com/avanslaars/cypress-axe#cychecka11y)
## 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.
```js
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`
```js
import "better-cypress-axe"
```
## Development
```sh
# 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
[axe-core]: https://github.com/dequelabs/axe-core
[cypress]: https://www.cypress.io/
[cypress-axe]: https://github.com/avanslaars/cypress-axe
[cypress-axe setup]: https://github.com/avanslaars/cypress-axe#include-the-commands
[cypress task]: https://docs.cypress.io/api/commands/task.html#Usage
[webpack setup issue]: https://github.com/avanslaars/cypress-axe/issues/7