cypress accessibility testing

cypress accessibility testing braucht Zustände, nicht nur einen Seitenaufruf.

Axe prüft den gerenderten DOM automatisch. Ob Fokus, Bedeutung und Bedienablauf stimmen, braucht zusätzlich gezielte Cypress-Assertions und manuelle Abnahme.

Spec-Builder

Teststrecke zusammenstellen

3/63 Lücken
A

Automatisiert

Gerenderte Zustände

  1. cy.1
  2. cy.2
  3. cy.3
M

Bewusst ergänzen

Menschliche Prüfung

Was der Scan nicht beweist

Erzeugte Grundlage

Checkout-Spec

import 'cypress-axe';

describe('Checkout – A11y', () => {
  beforeEach(() => {
    cy.visit('/checkout');
    cy.injectAxe();
  });

  it('Start', () => {
    cy.checkA11y(undefined, {
      runOnly: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa']
    });
  });

  it('Fehler', () => {
    cy.get('[data-cy="checkout-submit"]').click();
    cy.checkA11y(undefined, {
      runOnly: ['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa', 'wcag22aa']
    });
  });
});

Selektoren an die App anpassen. Ein grüner Lauf ist kein WCAG-Nachweis.