Schreiben Sie Tests mit axe DevTools Cypress

Das Erstellen von Ergebnissen zum Zugänglichkeitsscan mit axe DevTools kann so einfach sein wie eine Codezeile. Diese Ergebnisse können im Rohzustand verwendet, in Verbindung mit einer Assertion-Bibliothek genutzt oder zum Erstellen von Zugänglichkeitsberichten verwendet werden.

Voraussetzungen

Um Seiten mit axe DevTools zu testen, müssen Sie es zunächst in Ihrem Projekt installieren. Sehen Sie sich die [Installationsanleitung] an, wenn Sie diesen Schritt noch nicht abgeschlossen haben.(node-cy-install-overview)

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

Fügen Sie diesen Code zur Datei test.cy.js im e2e-Verzeichnis hinzu:

describe('Axe DevTools Cypress', () => {
  before(() => {
    cy.visit('https://broken-workshop.dequelabs.com')
    cy.axeAnalyze()
  })
  it('Get results from analyzing', () => {
    cy.getAxeResults().then(results => {
      cy.writeFile('./results.json', results)
    })
  })
})