Checking Accessibility
Find out how we can use Axe to check and test accessibility.
Now that we have Axe setup, let’s see how we can check for accessibility issues inside our test cases.
Using the checkA11y
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:
Press + to interact
it('Should have no a11y violations', () => {cy.checkA11y();});it('Should show dismissible cookie policy banner', () => {verifyCookiePolicyPresence();dismissCookiePolicy();});
And that’s it! We’ve just plugged in a check for testing accessibility violations. Now this command in itself will work just fine, but the error messages are not really helpful, so let’s fix that.
Error message shown by Axe in Cypress
Making
...Get hands-on with 1400+ tech skills courses.