Cucumber JavaScript
Testen mit JavaScript, Axe DevTools und Cucumber
Voraussetzungen
Um Ihren Inhalt mit Cucumber und Axe DevTools zu testen, müssen Sie diese zuerst in Ihr Projekt importieren und initialisieren.
Wenn Sie diesen Schritt noch nicht abgeschlossen haben, wählen Sie bitte eine der folgenden Optionen, um Cucumber einzurichten:
Cucumber mit Axe DevTools
Nachdem Sie eine Implementierung für die Arbeit mit Cucumber ausgewählt haben, können Sie nun einen wiederverwendbaren Schritt erstellen, der in jeder Ihrer Funktionen verwendet werden kann, um Ihren Seiteninhalt oder speziell ein Komponenten-Element zu testen.
Diese Dokumentation zeigt die Nutzung mit WebDriverJS-Integration, jedoch funktioniert dies genauso mit WebdriverIO und Puppeteer.
Erstellen eines Seiten-Scan-Schritts
Um einen Cucumber-Schritt zu erstellen, der die gesamte Seite auf Barrierefreiheitsprobleme scannt, erstellen Sie eine Dann-Funktion, die einen String für den Namen der Seite nimmt. Erstellen Sie im nächsten Schritt einfach eine neue Instanz des von Ihnen gewählten Axe DevTools-Treibers und rufen Sie dann analysiere() auf.
Die Ergebnisse des Scans können dann mit dem Axe DevTools-Reporter-Paket verwendet und für alle Berichterstattungsfunktionen genutzt werden. Siehe Berichte aus den Axe DevTools JSON-Ergebnissen generieren für weitere Informationen über Axe DevTools-Berichte.
Das folgende Beispiel zeigt die Verwendung einer Dann-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 Dann-Schritt zur Barrierefreiheitstests:
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 Komponenten-Scan-Schritts
Um einen Cucumber-Schritt zu erstellen, der nur einen Teil der Seite oder eine Komponente auf Barrierefreiheitsprobleme scannt, erstellen Sie eine Dann-Funktion, die einen String für den Namen der Komponente und einen weiteren String für den CSS-Selektor annimmt. Erstellen Sie im nächsten Schritt einfach eine neue Instanz des von Ihnen gewählten Axe DevTools-Treibers und rufen Sie dann analysiere() auf.
Die Ergebnisse des Scans können dann mit dem Axe DevTools-Reporter-Paket verwendet und für alle Berichterstattungsfunktionen genutzt werden. Siehe Berichte aus den Axe DevTools JSON-Ergebnissen generieren für weitere Informationen über Axe DevTools-Berichte.
Das folgende Beispiel zeigt, wie man Dann mit einem Selektor benutzt, 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 Dann-Schritt mit einem Szenario verwendet wird, das nur einen Teil einer Seite scannt:
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"
Da Sie nun erfolgreich einen Barrierefreiheitsscan abgeschlossen haben, sind Sie bereit, zu fortgeschritteneren Scanning-Themen überzugehen, wie Berichte generieren und Verwenden des Ergebnisses-Objekts.
Fehlerbehebung
Wenn Sie Schwierigkeiten haben, Scan-Ergebnisse zu erhalten, kontaktieren Sie Ihren Deque-Vertreter direkt, erreichen Sie uns über unser Support-Desk oder senden Sie uns eine E-Mail. Wir helfen Ihnen gerne.
Für weitere Informationen über Axe DevTools im Allgemeinen, siehe die Axe DevTools Willkommensseite