Search⌘ K
AI Features
Home
Courses
Frontend End-to-End Testing with Cypress

Checking Accessibility

Explore how to check web accessibility issues using Axe integrated into Cypress test cases. Learn to enhance the clarity of error reporting by customizing violation logs and tables to better understand accessibility failures and their impacts during automated tests.

We'll cover the following...

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:

Javascript (babel-node)
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

...