Tests schreiben mit Axe DevTools Cypress

Das Erzeugen von Barrierefreiheitsscannergebnissen mit Axe DevTools kann so einfach wie eine Codezeile sein. Diese Ergebnisse können unverarbeitet genutzt, in Verbindung mit einer Assertionsbibliothek verwendet oder zur Erstellung von Barrierefreiheitsberichten genutzt werden.

Voraussetzungen

Um Seiten mit Axe DevTools zu testen, müssen Sie es zuerst in Ihrem Projekt installiert haben. Wenn Sie diesen Schritt noch nicht abgeschlossen haben, sehen Sie sich die Installationsleitfaden an.

Projektstruktur

.
├── package.json
├── cypress.config.js
├── cypress
│   ├── e2e
│   │   └── test.cy.js
│   └── support
│       └── e2e.js

Einrichtung

Folgendes ist erforderlich, um Axe DevTools Cypress zu verwenden.

Fügen Sie die folgende Zeile in cypress/support/e2e.js ein:

import '@axe-devtools/cypress';

In der Datei cypress.config.js müssen Sie Folgendes hinzufügen:

const { defineConfig } = require('cypress');
const axeDevtoolsCypressPlugin = require("@axe-devtools/cypress/dist/plugin");

module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
       axeDevtoolsCypressPlugin(on);
       return config;
     }
   }
 });

Vollständige Beispieldatei

Rufen Sie cy.axeAnalyze() und cy.getAxeResults() innerhalb jedes it()-Blocks auf und verwenden Sie für jeden Test einen eindeutigen Dateinamen, um ein Überschreiben der Ergebnisse aus anderen Tests zu vermeiden.

Fügen Sie diesen Code in die Datei test.cy.js im e2e-Verzeichnis ein:

describe('Axe DevTools Cypress', () => {
  it('Scans the home page for accessibility issues', () => {
    // Visit the page to test
    cy.visit('https://broken-workshop.dequelabs.com')
    // Run an accessibility scan on the current page
    cy.axeAnalyze()
    // Write results to a uniquely named file; use a different name for each test to avoid overwriting
    cy.getAxeResults().then(results => {
      cy.writeFile('./results/broken-workshop.json', results)
    })
  })
})