When Axe meets Cypress – Accessibility Testing Version

Yes! Cypress supports Axe for Accessibility Testing.

Few years ago, I was inspired by the talk given by Jenny Lay-Flurrie, the Chief Accessibility Officer of Microsoft Corporation in one of the Microsoft Conferences and wrote the article Feather Touch on Accessibility Testing. Since then, Accessibility is one of the key testing artefact I focus whenever I perform testing on AUT.

Also, Garima Jain has explained very well about Accessibility testing here in this article.

Anyways, let’s get into the main content of Cypress with Axe. Cypress itself is an amazing E2E testing tool and it is getting geared up with very good features. One such feature is Axe.

Configuration

First, we need to inject axe. To do that, simply invoke the cy.injectAxe command. Make sure you use this after the page load.

cy.injectAxe()

Once done, we can check the accessibility of the page using the cy.checkA11y command

cy.checkA11y()

Integrating Axe with Cypress code is very easy and involves the below steps.

Step 1: Create a Cypress project using –

npm install cypress --save-dev

Step 2: Run below command to get the Cypress folder –

npx run cypress

Step 3: Once done, let’s add the below command to the cypress/support/index.js file

import 'cypress-axe'

Step 4: Create a test like this for your website –

describe('Parabank Application', () => {
    it('Home Page Accessibility Test', () => {
      cy.visit('https://parabank.parasoft.com/parabank/index.htm')
      cy.injectAxe()
      cy.checkA11y()
    })
  })

Step 5: Run the test from Cypress Test Runner

Step 6: Once done, the errors will be shown like below in Cypress Runner

Cypress showing the Accessibility issues

Step 7: If you want to see more information on the error, open the Developer Tools –> Console

That’s it. This is how we integrate Axe with Cypress and this can be done across different browsers. Thanks to Cypress for supporting Cross-Browser Testing too from 4.x.

Happy Testing!!!

You can find this example from GitHub.