cypress-axe for accessibility - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is cypress-axe used for in web development?

cypress-axe is a tool that helps automatically check web pages for accessibility issues during Cypress end-to-end tests. It integrates the axe-core accessibility engine with Cypress.

beginner

How do you add cypress-axe to your Cypress test file?

You import it with <code>import 'cypress-axe'</code> at the top of your test file. Then you can use commands like <code>cy.injectAxe()</code> and <code>cy.checkA11y()</code>.

beginner

What does cy.injectAxe() do in a Cypress test?

It injects the axe-core accessibility testing library into the page under test, so you can run accessibility checks on that page.

beginner

What is the purpose of cy.checkA11y() in cypress-axe?

It runs accessibility checks on the page or a specific element and reports any accessibility violations found.

beginner

Why is accessibility testing important in web development?

Accessibility testing ensures that websites can be used by people with disabilities, improving usability for everyone and meeting legal requirements.

Which command injects the axe-core library into the page in cypress-axe?

A cy.injectAxe()

B cy.checkA11y()

C cy.visit()

D cy.runAxe()

cy.injectAxe() adds the axe-core library to the page so accessibility checks can be run.

What does cy.checkA11y() do?

A Clicks a button

B Runs accessibility checks and reports violations

C Loads the web page

D Injects JavaScript into the page

cy.checkA11y() runs accessibility tests and reports any issues found.

Where should you import 'cypress-axe' in your test files?

A In the HTML page

B Inside a test case

C At the top of the test file

D In the Cypress config file

You import 'cypress-axe' at the top of your Cypress test files to use its commands.

Why is accessibility testing done during Cypress tests?

A To speed up page loading

B To test database connections

C To check browser compatibility

D To find and fix accessibility issues early

Accessibility testing during Cypress tests helps catch issues early in development.

Which of these is NOT a benefit of using cypress-axe?

A Manual keyboard navigation testing

B Automated accessibility testing

C Integration with Cypress tests

D Reports accessibility violations

Manual keyboard navigation testing is done by a person, not by cypress-axe.

Explain how you would set up and run an accessibility test using cypress-axe in a Cypress test.

Think about the order of commands and what each does.

Why is it important to include accessibility testing like cypress-axe in your web development workflow?

Consider benefits for users and developers.