Schreiben Sie Tests für axe DevTools für Web für Browser JavaScript

Schreiben von Tests mit axe DevTools

Voraussetzungen

Um Seiten mit axe DevTools zu testen, müssen Sie es zuerst in Ihr Projekt importieren und initialisieren. Wenn Sie diesen Schritt noch nicht abgeschlossen haben, erfahren Sie in dieser Anleitung , wie es geht.

Dieser Leitfaden zeigt Benutzern, wie sie diese axe DevTools-Bibliothek in die React-Testbibliothek integrieren können.

Nachdem Sie das Tool in Ihre Testdatei importiert und initialisiert haben, können Sie ganz einfach Tests zur Barrierefreiheit hinzufügen:

test('Component has no accessibility violations', () => {
 const {container} = render(<Badcomp></Badcomp>);
 axeDevTools.run(container, (err, results) => {
    expect(results.violations.length).toBe(0);
    done();
 });
});

Dieser Testfall rendert eine Komponente innerhalb des Container-Dienstprogramms der React-Testbibliothek und anschließend durchsucht axe DevTools sie nach Barrierefreiheitsverstößen. In diesem Beispiel wird davon ausgegangen, dass keinerlei Verstöße gegen die Barrierefreiheit vorliegen, es kann jedoch an die Anforderungen Ihrer Organisation angepasst werden. Weitere Informationen zur Verwendung der Scan-Ergebnisse finden Sie im Handbuch zum Ergebnisobjekt , das nach einem Scan zurückgegeben wird.

Beispieldatei

Diese Beispieldatei, die axe DevTools mit der React-Testbibliothek verwendet, soll dabei helfen, die Verwendung des Tools im Kontext zu veranschaulichen.

import React from 'react';
import Badcomp from '../components/badcomp';
import { render } from '@testing-library/react';
import axeDevTools from '@axe-devtools/browser';
import "babel-polyfill"

describe('Bad Component', () => {

  beforeEach(function(done) {
    axeDevTools.init('wcag2', function() {
      done();
    });
  });

   test('Component has no accessibility violations, w/ attest reporter', (done) => {
     const {container} = render(<Badcomp></Badcomp>);
     axeDevTools.run(container, (err, results) => {
        expect(results.violations.length).toBe(0);
        done();
     });
   });
});

Nächste Schritte

Nachdem Sie nun erfolgreich einen Zugänglichkeitsscan abgeschlossen haben, können Sie mit fortfahren, fortgeschritteneren Scan-Themen wie Erstellen von Berichten und Verwenden des Ergebnisobjekts.

Fehlerbehebung

Wenn Sie Probleme beim Abrufen der Scanergebnisse haben, wenden Sie sich direkt an Ihren Deque-Vertreter, erreichen Sie uns über unseren Support-Desk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.