Cypress ist ein umfassendes End-to-End-Testtool. Es reduziert die Komplexität, indem es eine All-in-One-Testplattform bietet, anstatt dass Sie einzelne Bibliotheken auswählen und zusammenfügen müssen. Das Erstellen, Schreiben, Ausführen und Debuggen wird mit Cypress zu einem einfachen Vorgang. Durch die Integration der „axe“-Barrierefreiheits-Testtools von Dequein Cypress können Sie zudem die Testabdeckung erhöhen und den Barrierefreiheits-Testprozess automatisieren.
In diesem Artikel werden wir uns damit befassen, wie man:
- Testfälle in Cypress erstellen
- Integrieren Sie Axe und nutzen Sie es, um auf Verstöße gegen die Barrierefreiheit zu prüfen
- Barrierefreiheitstests verbessern
Los geht’s!
Erstellen von Testfällen in Cypress
Im folgenden Beispiel werde ich mich auf das Testen des Anmeldeformulars für meine App konzentrieren. Ich möchte sicherstellen, dass mein Anmeldeformular einwandfrei funktioniert, bevor ich eine Release-Version erstelle. Mit Cypress-Tests lassen sich die richtigen Klassen, IDs, Elemente und vieles mehr überprüfen. Außerdem können wir Benutzeraktionen wie Klicks, Ziehen, Ablegen und Mauszeigerbewegungen simulieren.
Zunächst müssen wir eine Datei erstellen, die die gesamte Logik unserer Testfälle enthält. Im Projektverzeichnis habe ich eine Datei an folgendem Speicherort angelegt: `./cypress/integration/login.js`.
Als Nächstes habe ich einige einfache Voraussetzungen für eine erfolgreiche Testsuite festgelegt. Dies wird dazu beitragen, die Grundlagen abzudecken und sicherzustellen, dass meine Anwendung bei jedem Build funktionsfähig bleibt.
// ./integration/Login.js
describe('Login', function () {
it('Should load the correct URL', function () {});
it('Has a valid login form.', function () {});
it('Should display an error message after login failure.', function () {});
it('Should redirect to the dashboard after login success.', function () {});
});
Nach einer kurzen Einrichtung und etwas Zeit, die wir damit verbracht haben, die Dokumentation durchzugehen, haben wir eine solide Sammlung von Testfällen zusammengestellt, die die wichtigsten Szenarien sowie einige Randfälle abdecken, um sicherzustellen, dass alles wie erwartet funktioniert.
// ./integration/Login.js
describe('Login', function () {
before( function () {
cy.visit('http://localhost:9999/');
});
it('Should load the correct URL', function () {
cy.url().should('eq', 'http://localhost:9999/#/login');
});
it('Has a valid login form.', function () {
cy.get('form').within(() => {
cy.get('input#email').should('be.visible');
cy.get('input#password').should('be.visible');
cy.get('button').should('be.visible');
});
});
it('Should display an error message after login failure.', function () {
cy.get('input#email').type('fail@test.com');
cy.get('input#password').type('swordfish');
cy.get('button').click();
// wait for the server to respond, then test for the error
cy.wait(1000)
.get('div.alert')
.should('be.visible');
});
it('Should redirect to the dashboard after login success.', function () {
cy.get('input#email')
.clear()
.type('test@test.com')
.should('have.value', 'test@test.com');
cy.get('input#password')
.clear()
.type('123@123')
.should('have.value', '123@123');
cy.get('button').click();
cy.wait(1000)
.url().should('eq', 'http://localhost:9999/#/');
});
});
Einbindung und Verwendung von axe
Mit ein paar einfachen Ergänzungen können wir den Abdeckungsgrad unserer Testsuite erhöhen. Außerdem können wir den Prozess der Barrierefreiheitstests automatisieren und so einen Großteil der häufigen und leicht zu behebenden Probleme im Zusammenhang mit den Web Content Accessibility Guidelines (WCAG) problemlos erfassen.
Los geht’s!
Während ich dies schreibe, gehe ich davon aus, dass Sie mit „ axe-core“ vertraut sind – der am weitesten verbreiteten Open-Source-Bibliothek für Barrierefreiheitsregeln. Falls nicht, schauen Sie doch mal hier vorbei und informieren Sie sich darüber, worum es dabei geht: axe – Barrierefreiheit für Entwicklerteams.
Ein großartiger Web-Nutzer namens Andy Van Slaars hat die ganze Arbeit für die Integration von Axe und Cypress übernommen. Jetzt müssen wir nur noch das Plugin installieren und die Befehle ausführen, um die Barrierefreiheit zu testen.
Zunächst installieren wir das Paket mit NPM oder Yarn.
`npm i cypress-axe` oder `yarn add cypress-axe`
Befolgen Sie anschließend die Anweisungen in der Dokumentation, um die Integration in Ihre Cypress-Testfälle vorzunehmen.
In meinem Beispiel verwende ich den `before()`-Hook, um die URL für die Anmeldeseite zu laden. Dies ist für mich ein guter Zeitpunkt, um die Bibliothek „ axe-core “ einzubinden. Dazu kann ich den Befehl `cy.injectAxe()` verwenden.
Jetzt kann ich den Befehl `cy.checkA11y()` an verschiedenen Stellen in meinem Testskript einfügen, um Verstöße gegen die Barrierefreiheit zu überprüfen oder aufzudecken.
Um die Ergebnisse der Validierungsfehler wirklich nutzen zu können, müssen Sie die Entwicklertools im Fenster des Cypress-Testrunners aktivieren. Sobald Sie die Konsole der Entwicklertools geöffnet haben, erhalten Sie etwas detailliertere Informationen darüber, um welche Probleme es sich handelt, warum sie auftreten und wie Sie sie beheben können.
Hier ist die fertige Testlogik mit der Integration von „ axe-core “.
// ./integration/Login.js
describe('Login', function () {
before( function () {
cy.visit('http://localhost:9999/');
// Inject the axe-core library
cy.injectAxe();
});
it('Should load the correct URL', function () {
cy.url().should('eq', 'http://localhost:9999/#/login');
});
it('Has a valid login form.', function () {
cy.get('form').within(() => {
cy.get('input#email').should('be.visible');
cy.get('input#password').should('be.visible');
cy.get('button').should('be.visible');
});
// first a11y test
cy.checkA11y();
});
it('Should display an error message after login failure.', function () {
cy.get('input#email').type('fail@test.com');
cy.get('input#password').type('swordfish');
cy.get('button').click();
// wait for the server to respond, then test for the error
cy.wait(1000)
.get('div.alert')
.should('be.visible');
// test a11y again, but only the alert container.
cy.checkA11y('div.alert');
});
it('Should redirect to the dashboard after login success.', function () {
cy.get('input#email')
.clear()
.type('test@test.com')
.should('have.value', 'test@test.com');
cy.get('input#password')
.clear()
.type('123@123')
.should('have.value', '123@123');
cy.get('button').click();
cy.wait(1000)
.url().should('eq', 'http://localhost:9999/#/');
});
});
Als Entwickler oder QA-Ingenieur können Sie dadurch Ihre Fähigkeit, Probleme bei der Barrierefreiheit im Rahmen des End-to-End-Testprozesses zu erkennen und zu beheben, erheblich verbessern. Wir verfügen nun über eine einheitliche Testsuite, die uns darauf hinweist, wenn unsere Anwendung nicht wie erwartet funktioniert oder wenn Barrierefreiheitsverstöße vorliegen. Da wir die Regel-Engine „ axe-core “ verwenden, enthalten die Barrierefreiheitsverstöße eine Erklärung dafür, warum sie fehlgeschlagen sind, sowie Hinweise dazu, wie wir das Problem beheben können.
Verbesserte Tests zur Barrierefreiheit
Um diesen Prozess nun auf die nächste Stufe zu heben, wollen wir uns „axe Watcher“ einmal genauer ansehen. Dabei handelt es sich um eine leistungsstarke Bibliothek, mit der sich automatisierte Barrierefreiheitsprüfungen mit sehr geringem Aufwand in Ihre bestehenden End-to-End-Tests integrieren lassen.
Mit nur wenigen Konfigurationsanpassungen lässt sich axe Watcher in Ihre bestehende Testumgebung integrieren und ermöglicht so Barrierefreiheitsprüfungen, ohne dass Sie Ihren Arbeitsablauf grundlegend umstellen müssen. Das Paket unterstützt gängige Test-Frameworks wie Cypress, Playwright, Puppeteer und Webdriver und ist damit ein vielseitiges und leistungsstarkes Werkzeug für Entwickler und QA-Teams.
Hier sind die herausragenden Funktionen, die axe Watcher zu einem unverzichtbaren Tool für Barrierefreiheitstests machen:
1. Automatisierte Berichte mit dem axe Developer Hub
Alle Scan-Ergebnisse werden an den axe Developer Hub übermittelt, wo Sie auf umfassende, umsetzbare Berichte zugreifen können. Die Integration erfolgt nahtlos, sodass Ihre Testergebnisse in einem zentralen Hub gespeichert und analysiert werden.
2. Duplizierte Probleme mit der Barrierefreiheit
Probleme im Zusammenhang mit der Barrierefreiheit werden doppelt erfasst, sodass Sie nicht in technischer Verschuldung oder Problemen mit Altcode versinken. Sie können sich auf die wirklich wichtigen Probleme konzentrieren, anstatt sich durch sich wiederholende Probleme zu kämpfen.
3. Git-basierte Berichterstellung
Die Berichte von Axe Watcher sind„git-fähig“. Das Tool hebt die neuen Probleme hervor, die durch die jüngsten Codeänderungen entstanden sind, sodass Sie schnell feststellen können, wie und wo möglicherweise gegen Barrierefreiheitsstandards verstoßen wurde. Dadurch wird verhindert, dass ältere, bereits bestehende Probleme die Ergebnisse überladen, was Entwicklern hilft, sich auf ihre jüngsten Änderungen zu konzentrieren.
4. Nach Auswirkungen priorisierte Themen
In den Berichten werden Probleme nach ihren Auswirkungen auf echte Menschen priorisiert, sodass sich die Teams darauf konzentrieren können, die kritischsten Probleme zuerst zu beheben und Barrieren für die Barrierefreiheit bereits in einer frühen Phase des Entwicklungsprozesses zu beseitigen.
5. CI/CD-Integration für schnelle Feedback-Schleifen
Axe Watcher unterstützt die Integration mit GitHub Actions und stellt einen REST-Endpunkt für andere CI/CD-Systeme bereit. Dank dieser Flexibilität können Teams die Testergebnisse problemlos in ihre bestehenden Pipelines einbinden, Feedback zum Barrierefreiheitsstatus ihrer Anwendung erhalten oder sogar Qualitätskontrollen einrichten, um sicherzustellen, dass keine neuen Probleme in die Produktionsumgebung gelangen.
Fazit
Axe Watcher bietet eine mühelose Möglichkeit, Barrierefreiheits-Scans in Ihre End-to-End-Testsuite zu integrieren, und liefert dabei umfassende und umsetzbare Erkenntnisse. Durch die Unterstützung zahlreicher Frameworks und die Integration in gängige CI/CD-Tools ermöglicht es Ihnen, Barrierefreiheitstests skalierbar zu automatisieren. Die Funktionen zur Duplikatsbereinigung und zur Git-kompatiblen Berichterstellung reduzieren den Datenüberfluss erheblich und ermöglichen es den Teams, sich auf das Wesentliche zu konzentrieren: die Entwicklung inklusiver, barrierefreier Software.
Nutzen Sie axe Watcher und den Developer Hub noch heute und machen Sie Ihre App mit nur wenigen Zeilen Code barrierefreier!
