Integrating automated accessibility testing with Cypress

Accessibility testing is a must in most of the countries when testing web applications. These test can now be automated and executed in your test automation framework.

In this article I will show you how we can simply integrate automated accessibility testing to Cypress.

First of all install axe library to your cypress with the use of the following npm command

npm install cypress-axe

npm install cypress axe-core        

Then in your test script do the following import

import 'cypress-axe'        

Then script the test to capture accessibility issues of the page you visit

require('cypress-xpath')
import?'cypress-axe'
///?<reference?types="cypress"?/>
///?<reference?types="cypress-xpath"?/>
function?terminalLog(violations)?{
????cy.task(
??????'log',
??????`${violations.length}?accessibility?violation${
????????violations.length?===?1???''?:?'s'
??????}?${violations.length?===?1???'was'?:?'were'}?detected`
????)
????//?pluck?specific?keys?to?keep?the?table?readable
????const?violationData?=?violations.map(
??????({?id,?impact,?description,?nodes?})?=>?({
????????id,
????????impact,
????????description,
????????nodes:?nodes.length
??????})
????)
??
????cy.task('table',?violationData)
??}
??
describe('Kushan?First?Test',?function(){
????it('Guru?99?Login',function(){
????????cy.visit('https://demo.guru99.com/v4/')
????????cy.injectAxe()
????????cy.checkA11y(null,?null,?terminalLog)
???????
???????
????})        

})        

Add the following commands in the plugins/index.js

module.exports?=?(on,?config)?=>?{
??on('task',?{
????log(message)?{
??????console.log(message)


??????return?null
????},
????table(message)?{
??????console.table(message)


??????return?null
????}        

??})        

Run the test with cypress run command

You will get a console log in your terminal window about accessibility issues