cypress-axe for accessibility - Test Execution Trace

Test Overview

This test uses cypress-axe to check if the web page meets accessibility standards. It loads the page, injects the accessibility tool, runs the accessibility checks, and verifies there are no violations.

Test Code - Cypress

Cypress

import 'cypress-axe';

describe('Accessibility check with cypress-axe', () => {
  it('should have no accessibility violations on load', () => {
    cy.visit('https://example.cypress.io');
    cy.injectAxe();
    cy.checkA11y();
  });
});

Execution Trace - 5 Steps

Step	Action	System State	Assertion	Result
1	Test starts	Test runner initialized, Cypress ready to run tests	-	PASS
2	Browser opens and navigates to 'https://example.cypress.io'	Example Cypress page loaded in browser	Page loaded successfully with status 200	PASS
3	Inject axe-core accessibility testing library into the page	axe-core script injected and ready to run accessibility checks	axe-core script is present in the page context	PASS
4	Run accessibility checks on the entire page using cy.checkA11y()	axe-core analyzes page elements for accessibility issues	No accessibility violations found	PASS
5	Test ends	Test completed with no accessibility violations	-	PASS

Failure Scenario

Failing Condition: Accessibility violations are found on the page during cy.checkA11y()

Execution Trace Quiz - 3 Questions

What does cy.injectAxe() do in the test?

A It adds the axe-core accessibility testing library to the page

B It navigates to the test page URL

C It runs the accessibility checks

D It clicks on a button to start the test

Key Result

Using cypress-axe helps catch accessibility issues early by automatically scanning pages during tests, ensuring your site is usable by everyone.