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

Console log for debugging the errors

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.

References:

https://github.com/avanslaars/cypress-axe

https://learndevtestops.com/2019/08/19/feather-touch-on-accessibility-testing/

https://learndevtestops.com/2019/12/27/accessibility-testing-starter-kit/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑

%d bloggers like this: