Cypress A11Y Setup

Natarajan Santhosh

·

Follow

Nov 19, 2020

--

Share

# create a directory
$ mkdir cy-ax-foo# init npm
$ cd cy-ax-foo; npm init -y# install cypress and cypress-axe dependencies
$ npm i --D cypress@4.8.0 cypress-axe@0.8.1# open code on vscode
$ code .# verify that cypress is setup correctly
$ npx cypress open# a cypress window should open. click on an example spec and i can see that the test is executed. \0/ 

# support/index.jsadd this line `import 'cypress-axe'`

# add belowdescribe('Axe demo', ()=>{
  it('should catch basic a11y issue', ()=>{
    cy.visit('http://opencart.abstracta.us');
    cy.injectAxe();
    cy.checkA11y({},{rules:{
        'page-has-heading-one': {enabled: false}
      }});
  })
})

# click on axe.spec.js on the cypress window# The test fails and show the a11y failures(left pane)
# open the chrome inspector
# click on one of errors on the left pane
# i can see details of the a11y error on right panel

# to run test on continuous integration(ci pipeline)$ npx cypress run