cypress-axe for accessibility - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the accessibility testing library in Cypress.

Cypress

import '[1]';

Drag options to blanks, or click blank then click option'

Acypress-axe

Baxe-core

Ccypress-accessibility

Daxe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'axe-core' instead of 'cypress-axe'.

Forgetting to import the accessibility plugin.

The cypress-axe package is the official Cypress plugin for accessibility testing.

2fill in blank

medium

Complete the code to inject axe into the page before running accessibility checks.

Cypress

cy.visit('/');
cy.[1]();

Drag options to blanks, or click blank then click option'

AcheckA11y

BinjectAxe

Cinject

DaxeInject

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'checkA11y' before injecting axe.

Using a non-existent command like 'axeInject'.

The injectAxe() command injects the axe-core library into the page so accessibility checks can run.

3fill in blank

hard

Fix the error in the code to run accessibility checks on the entire page.

Cypress

cy.[1]();

Drag options to blanks, or click blank then click option'

AcheckA11y

BcheckAccessibility

CrunAxe

DtestA11y

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect command names like 'checkAccessibility' or 'runAxe'.

Forgetting to call the command as a function.

The correct command to run accessibility checks is checkA11y().

4fill in blank

hard

Fill both blanks to run accessibility checks only on the main content area.

Cypress

cy.[1]('[2]');

Drag options to blanks, or click blank then click option'

AcheckA11y

BinjectAxe

Cmain

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'injectAxe' instead of 'checkA11y' for the first blank.

Using 'header' instead of 'main' for the selector.

Use checkA11y('main') to run accessibility checks only on the <main> element.

5fill in blank

hard

Fill all three blanks to run accessibility checks with options to skip color contrast rules.

Cypress

cy.[1]([2], { rules: { '[3]': { enabled: false } } });

Drag options to blanks, or click blank then click option'

AcheckA11y

B'body'

Ccolor-contrast

DinjectAxe

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'injectAxe' instead of 'checkA11y' for the first blank.

Using incorrect selectors like 'html' instead of 'body'.

Misspelling the rule name 'color-contrast'.

This runs checkA11y on the whole body but disables the 'color-contrast' rule.

Practice

1. What is the main purpose of using cypress-axe in Cypress tests?

easy

A. To generate random test data for forms

B. To speed up the loading time of web pages

C. To style elements dynamically during tests

D. To automatically find accessibility problems on web pages during tests

Solution

1. Step 1: Understand the role of cypress-axe

   cypress-axe is a tool that integrates axe accessibility checks into Cypress tests.

2. Step 2: Identify what it helps with

   It helps find accessibility issues automatically during test runs to improve web accessibility.

3. Final Answer:

   To automatically find accessibility problems on web pages during tests -> Option D

4. Quick Check:

   cypress-axe = accessibility problem detection [OK]

Hint: Remember cypress-axe finds accessibility issues automatically [OK]

Common Mistakes:

• Thinking it speeds up page loading
• Confusing it with styling tools
• Assuming it generates test data

2. Which command correctly injects axe into the page before running accessibility checks in Cypress?

easy

A. cy.runAxe()

B. cy.loadAxe()

C. cy.injectAxe()

D. cy.startAxe()

Solution

1. Step 1: Recall the cypress-axe setup command

   The official command to inject axe into the page is cy.injectAxe().

2. Step 2: Verify other options

   Other options like cy.runAxe(), cy.loadAxe(), and cy.startAxe() are not valid Cypress commands for this purpose.

3. Final Answer:

   cy.injectAxe() -> Option C

4. Quick Check:

   Inject axe = cy.injectAxe() [OK]

Hint: Use cy.injectAxe() to add axe before checks [OK]

Common Mistakes:

• Using cy.runAxe() instead of cy.injectAxe()
• Confusing command names
• Forgetting to inject axe before checking

3. Given the following Cypress test code snippet, what will cy.checkA11y() do?

cy.visit('/home')
cy.injectAxe()
cy.checkA11y()

medium

A. Run accessibility checks on the entire page and report any violations

B. Reload the page and ignore accessibility

C. Only check the header element for accessibility

D. Throw an error because cy.checkA11y() needs arguments

Solution

1. Step 1: Understand the code sequence

   The code visits the page, injects axe, then runs cy.checkA11y() without arguments.

2. Step 2: Know default behavior of cy.checkA11y()

   Without arguments, cy.checkA11y() runs accessibility checks on the whole page and reports violations.

3. Final Answer:

   Run accessibility checks on the entire page and report any violations -> Option A

4. Quick Check:

   cy.checkA11y() default = full page check [OK]

Hint: cy.checkA11y() without args checks whole page [OK]

Common Mistakes:

• Thinking it only checks part of the page
• Assuming it throws error without args
• Confusing it with page reload

4. You wrote this Cypress test:

cy.visit('/dashboard')
cy.checkA11y()

But the accessibility check does not run and no errors appear. What is missing?

medium

A. You forgot to call cy.injectAxe() before cy.checkA11y()

B. You need to add cy.wait() before cy.checkA11y()

C. You must pass a selector to cy.checkA11y()

D. You should use cy.runAxe() instead of cy.checkA11y()

Solution

1. Step 1: Identify missing axe injection

   Before running accessibility checks, axe must be injected with cy.injectAxe().

2. Step 2: Confirm correct command usage

   Without injection, cy.checkA11y() does not run properly and silently fails.

3. Final Answer:

   You forgot to call cy.injectAxe() before cy.checkA11y() -> Option A

4. Quick Check:

   Inject axe first = cy.injectAxe() [OK]

Hint: Always inject axe before checking accessibility [OK]

Common Mistakes:

• Skipping cy.injectAxe()
• Adding unnecessary cy.wait()
• Passing selector when not needed
• Using wrong command cy.runAxe()

5. You want to check accessibility only on the main content area with id main-content. Which code snippet correctly does this using cypress-axe?

hard

A. cy.checkA11y()
cy.injectAxe('#main-content')

B. cy.injectAxe()
cy.checkA11y('#main-content')

C. cy.injectAxe('#main-content')
cy.checkA11y()

D. cy.checkA11y('#main-content')
cy.injectAxe()

Solution

1. Step 1: Inject axe before checking

   First, call cy.injectAxe() without arguments to add axe to the page.

2. Step 2: Run checkA11y with selector

   Then call cy.checkA11y('#main-content') to check accessibility only inside that element.

3. Final Answer:

   cy.injectAxe() followed by cy.checkA11y('#main-content') -> Option B

4. Quick Check:

   Inject first, then check with selector [OK]

Hint: Inject axe first, then check with selector string [OK]

Common Mistakes:

• Calling checkA11y before injectAxe
• Passing selector to injectAxe
• Not injecting axe at all
• Calling injectAxe after checkA11y