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, muss es zunächst in Ihrem Projekt installiert sein. Wenn Sie diesen Schritt noch nicht abgeschlossen haben, sehen Sie sich den 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';

Innerhalb der cypress.config.js -Datei 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 einen eindeutigen Dateinamen für jeden Test, um das Überschreiben von Ergebnissen anderer Tests zu vermeiden.

Fügen Sie diesen Code in die test.cy.js -Datei 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)
    })
  })
})