Accessibility testing integration with Cypress

Axe is an accessibility engine for automated web UI testing. Axe has different types of rules for different types of WCAG levels, and several best practices that can help you identify common accessibility issues.

You can integrate it into DevTools, and use it as a Chrome extension to debug your site for accessibility issues, or you can also hook it into your development process to catch violations ahead of time.

We will look into how to hook it into Cypress to catch any issues with accessibility.

We’ll need to get the cypress-axe package and the core of Axe (axe-core) installed before we continue.

npm install --save-dev axe-core cypress-axe 

If you are using TypeScript, make sure you add cypress-axe types to your tsconfig.json under your types property as well as cypress:

{
    "compilerOptions": {
        ...
        "types": ["cypress", "cypress-axe"]
    },
    ...
}

To use Axe inside Cypress, we will need to include the Axe commands by importing the library inside index.js our support folder:

// After importing your custom commands, make sure you import `cypress-axe` as well.
import './commands'
import 'cypress-axe'

Lastly, to start using Axe, we need to inject it inside the appropriate test. This can be done using the cy.injectAxe command:

beforeEach(() => {
    cy.visit('https://webtips.dev');
    cy.injectAxe();
});

We need to make sure to always inject Axe after visiting a URL using the cy.visit command.

You can also inject Axe into any of your test cases as long as it comes after a cy.visit command.

After injecting Axe into one of our test spec files, we can check for violations using the cy.checkA11y command. Let’s add the following in front of the cookie policy test case:

We have plugged in a check for testing accessibility violations. Now this command in itself will work just fine.

Will share suggestions/steps to fix the accessibility violations soon.