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
Error message shown by Axe in Cypress

Making

...

Get hands-on with 1400+ tech skills courses.