Cucumber JavaScript
Testen mit JavaScript, axe DevTools und Cucumber
Voraussetzungen
Um Ihren Inhalt mit Cucumber mit axe DevTools zu testen, müssen Sie ihn zuerst in Ihr Projekt importieren und initialisieren.
Wenn Sie diesen Schritt noch nicht abgeschlossen haben, wählen Sie zur Einrichtung mit Cucumber eine der folgenden Optionen aus:
Cucumber mit axe DevTools
Nachdem Sie eine Implementierung für die Arbeit mit Cucumber ausgewählt haben, können Sie jetzt einen wiederverwendbaren Schritt erstellen, der in jeder Ihrer Funktionen verwendet werden kann und mit dem Sie Ihren Inhalt auf Seitenebene oder speziell eine Komponente testen können.
Diese Dokumentation zeigt die Verwendung mit der WebDriverJS-Integration, es funktioniert jedoch genauso mit WebdriverIO und Puppeteer.
Erstellen eines Seitenscan-Schritts
Um einen Cucumber-Schritt zu erstellen, der die gesamte Seite auf Zugänglichkeitsprobleme überprüft, erstellen Sie eine Then -Funktion, die eine Zeichenfolge für den Seitennamen annimmt. Erstellen Sie als Nächstes innerhalb des Schritts einfach eine neue Instanz des axe DevTools-Treibers Ihrer Wahl und rufen Sie dann analyze() auf.
Die Ergebnisse des Scans können dann mit dem axe DevTools Reporter-Paket verwendet und für alle Berichtsfunktionen genutzt werden. Weitere Informationen zur Berichterstellung mit axe DevTools finden Sie unter Generieren von Berichten aus axe DevTools JSON-Ergebnissen .
Das folgende Beispiel zeigt die Verwendung einer Then -Funktion:
Then('I check if {string} is axe clean', async pageName => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});Das folgende Beispiel zeigt ein Cucumber-Szenario mit einem Then Schritt zum Testen der Barrierefreiheit:
Feature: abcdTech search
As a user, I want to search for computers on abcdTech.
Scenario: Searching for computers
Given I am on the abcdTech homepage
Then I audit "homepage" for accessibility issues
When I search for "computers"
Then I see the page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I check if "searchPage" is axe clean
Erstellen eines Komponentenscan-Schritts
Um einen Cucumber-Schritt zu erstellen, der nur einen Teil der Seite oder eine Komponente auf Barrierefreiheitsprobleme überprüft, erstellen Sie eine Then -Funktion, die einen String für den Komponentennamen und einen weiteren String für den CSS-Selektor annimmt. Erstellen Sie als Nächstes innerhalb dieses Schritts einfach eine neue Instanz des axe DevTools-Treibers Ihrer Wahl und rufen Sie dann analyze() auf.
Die Ergebnisse des Scans können dann mit dem axe DevTools Reporter-Paket verwendet und für alle Berichtsfunktionen genutzt werden. Weitere Informationen zur Berichterstellung mit axe DevTools finden Sie unter Generieren von Berichten aus axe DevTools JSON-Ergebnissen .
Das folgende Beispiel zeigt, wie Sie Dann mit einem Selektor verwenden, um einen Teil einer Seite zu scannen:
Then('I check if {string} is axe clean with selector {string}', async (pageName, selector) => {
const axeDriver = await new AxeDevtoolsWebdriverJS(driver, "wcag2");
const results = await axeDriver.include(selector).analyze();
axeReporter.logTestResult(pageName, results);
assert.strictEqual(results.violations.length, 0);
});Dieses Beispiel zeigt, wie der Schritt Dann in einem Szenario verwendet wird, in dem nur ein Teil einer Seite gescannt wird:
Feature: abcdTech cart flow
As a user, I want to find a computer and add it to cart
Scenario: Selecting a new computer and adding to cart
Given I am on the abcdTech laptops page
Then I audit "laptops" for accessibility issues
When I click on more details
Then I see the proper page title "Gefälscht~~~Gefälscht CompuTech~~~"
Then I audit "mainContent" for accessibility issues with selector "#container"
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.
Weitere Informationen zu axe DevTools im Allgemeinen finden Sie auf der [Willkommensseite] von axe DevTools.(welcome-axe-devtools)