Tests für Axe DevTools für Web für Browser-JavaScript schreiben

Tests mit Axe DevTools schreiben

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, sehen Sie diesem Leitfaden an, wie es geht.

Dieser Leitfaden zeigt den Nutzern, wie sie diese Axe DevTools-Bibliothek mit der react testing library integrieren

Mit dem importierten und initialisierten Tool in Ihrer Testdatei ist es so einfach, Tests für Barrierefreiheit hinzuzufü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 im Container-Dienstprogramm der react testing library, und dann scannt Axe DevTools diese auf Barrierefreiheitsverletzungen. In diesem Beispiel werden keinerlei Barrierefreiheitsverletzungen erwartet, aber dies kann an die Bedürfnisse Ihrer Organisation angepasst werden. Um mehr darüber zu erfahren, wie man die Ergebnisse der Scans nutzt, lesen Sie den Leitfaden über das Ergebnisobjekt, das nach einem Scan zurückgegeben wird.

Beispieldatei

Diese Beispieldatei, die Axe DevTools mit der React testing library nutzt, sollte helfen, zu verdeutlichen, wie das Tool verwendet wird.

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

Da Sie nun erfolgreich einen Barrierefreiheitsscan abgeschlossen haben, sind Sie bereit, zu fortgeschritteneren Themen wie Berichte erstellen und das Ergebnisobjekt verwenden überzugehen.

Fehlerbehebung

Wenn Sie Probleme mit den Scannergebnissen haben, kontaktieren Sie direkt Ihren Deque-Vertreter, erreichen Sie uns über unseren Support-Desk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne weiter.