Fehlerbehebung

Watcher unterstützt nur Chrome für Tests, Chromium oder Microsoft Edge

Obwohl die Axe Developer Hub-Website mehrere Browser unterstützt, unterstützt das Watcher-Paket nur Google Chrome für Tests, Chromium oder Microsoft Edge (JavaScript/TypeScript oder Java mit Playwright). Mögliche Probleme, auf die Sie stoßen könnten:

• Wenn Sie Chrome Version 139 oder höher verwenden, erhalten Sie von Watcher einen Fehler. Verwenden Sie stattdessen Chrome für Tests oder Chromium (mit JavaScript/TypeScript oder Java mit Playwright können Sie auch Microsoft Edge verwenden).
• Wenn Sie den Electron-Browser von Cypress verwenden, erhalten Sie einen Fehler. Geben Sie den Browser als Chrome für Tests, Chromium oder Microsoft Edge an, wenn Sie Cypress aufrufen; andernfalls wird standardmäßig der Electron-Browser verwendet. Siehe Browser starten in der Cypress-Dokumentation für weitere Informationen.

Wenn Sie WebdriverIO oder WebDriverJS verwenden, müssen Sie Ihr Test-Setup explizit so konfigurieren, dass es Chrome für Tests oder Microsoft Edge verwendet. Wenn Sie Java Selenium verwenden, müssen Sie Ihr Test-Setup explizit so konfigurieren, dass es Chrome für Tests verwendet. Siehe Chrome für Tests verwenden für Installationsschritte und plattformspezifische Konfigurationsbeispiele.

Siehe Automatisierte Testplattformen für weitere Informationen über unterstützte Software mit Watcher.

Unvollständige Ergebnisse

Wenn Ihre Testumgebung mehrere Testrunner verwendet, die parallel laufen und dieselbe nicht-leere Build-ID verwenden, überschreiben die Ergebnisse jedes Testrunners die der anderen Testrunner für den gleichen Git-Commit-SHA, was zu unvollständigen Ergebnissen führt. Sie müssen sicherstellen, dass jeder Testrunner dieselbe nicht-leere Build-ID verwendet.

Normalerweise setzen Sie die Build-ID in Ihrer AxeConfiguration.

Für weitere Informationen zur Verwendung von parallelen Testrunnern mit verschiedenen CI/CD-Plattformen siehe Tests parallel ausführen.

Doppelte Barrierefreiheitsfehler oder falsche Anzahl neuer Probleme

Wenn Ihre Website dynamische IDs oder Klassennamen verwendet, die sich bei jedem Neuladen der Seite ändern, werden Sie wahrscheinlich doppelte Barrierefreiheitsfehler sehen, insbesondere Probleme, die als neu markiert sind, wenn frühere Testläufe das gleiche Problem am selben Element aufwiesen. (Axe Developer Hub verwendet IDs und Klassen, um dasselbe Element zwischen Testläufen zu identifizieren.) Um dieses Problem zu lösen, müssen Sie die ancestry-Eigenschaft im runOptions-Objekt in Ihrer Konfiguration auf true setzen. Das folgende Beispiel zeigt, wie Sie die Option in Ihrer Konfiguration setzen:

axe: {
  runOptions: {
    ancestry: true
  }
}

Weitere Anleitungen zur Verwendung von dynamischen Selektoren finden Sie unter Verwendung dynamischer Selektoren.

Siehe (JavaScript/TypeScript) runOptions oder (Java) AxeWatcherOptions.setRunOptions() für weitere Informationen.

Alte Version von @axe-core/watcher

Wenn Sie Version 3.18.0 oder älter von @axe-core/watcher verwenden, erhalten Sie diese Warnmeldung:

Der Axe Developer Hub hält sich jetzt an die in Axe-Konfiguration definierten Einstellungen, und Testruns, die mit Versionen von @axe-core/watcher Version 3.18.0 oder älter erstellt wurden, generieren Sitzungen, die sich der globalen Einstellungen in der Axe-Konfiguration nicht bewusst waren. Sie sollten Ihr @axe-core/watcher-Paket aktualisieren und Ihre Tests erneut ausführen, um Sitzungen zu erstellen, die der Axe-Konfiguration Ihres Unternehmens folgen. Siehe Verwendung globaler Konfigurationen.

Keine Seitenerfassungen nach dem Wechsel zu einem untergeordneten Frame

Wenn Ihr Test den aktuellen Kontext des Browsers zu einem untergeordneten Frame wechselt, indem switchToFrame() (WebdriverIO oder WebDriverJS) oder switchTo().frame() (Java Selenium) verwendet wird, erfasst Axe Watcher keine Seitenzustände für Aktionen, die durchgeführt werden, während der Browser auf den untergeordneten Frame fokussiert ist. Axe Watcher kann nur den obersten Frame analysieren.

Zum Beispiel wird der folgende click()-Aufruf in WebdriverIO keinen Seitenzustand erzeugen:

await browser.url('https://example.com')
const iframe = await browser.$('iframe')
await browser.switchToFrame(iframe)
// Actions taken in the child frame will not be analyzed
await button.click()

Um die Seitenerfassung wieder aufzunehmen, wechseln Sie vor dem Fortfahren zurück zum obersten Frame:

// WebdriverIO
await browser.switchToParentFrame()

// WebDriverJS / Java Selenium
await driver.switchTo().defaultContent()

Zusätzlicher Seitenzustand erzeugt durch cy.screenshot()

Wenn Sie cy.screenshot() in Ihren Cypress-Tests aufrufen, kann Axe Watcher einen zusätzlichen Seitenzustand erzeugen. Wenn Cypress einen Screenshot macht, ändert es vorübergehend das DOM, um Animationen zu deaktivieren, und der DOM-Beobachter von Axe Watcher kann diese Änderung als Seitenzustandsänderung erkennen. Dies ist ein erwartetes Verhalten und beeinträchtigt nicht die Genauigkeit Ihrer Barrierefreiheitsresultate.

Controller-Methode läuft ab

(Nur JavaScript oder TypeScript) Sie werden eine ähnliche Nachricht erhalten, wenn Aufrufe an die Controller-Methoden (definiert in der Controller-abstrakten Basisklasse als analyze(), flush(), start() und stop()) oder benutzerdefinierten Cypress-Befehlen ablaufen:

Error: Watcher could not send results to the server. To resolve this problem, adjust your `timeout.flush` property within your configuration or see https://docs.deque.com/developer-hub/wa-troubleshooting for more troubleshooting.

Die angegebene Controller-Methode (hier die flush()-Methode) benötigte mehr als die Standardzeit für den Abschluss und ist abgelaufen. Sie können die Standardzeit ändern, indem Sie ein timeout-Objekt zu Ihrer Konfiguration hinzufügen:

axe: {
  timeout: {
    flush: 10000
  }
}

Siehe Timeouts festlegen für Informationen zur Verwendung von Zeitüberschreitungen.

Siehe Timeouts-Schnittstelle und timeouts für weitere Informationen. Die Standard-Zeitüberschreitungswerte sind in der Tabelle unter der Timeouts-Schnittstelle gezeigt.

Ergebnisse erscheinen nicht

Wenn Sie Ihre Testsuite ausgeführt haben und keine Ergebnisse in Axe Developer Hub für ein bestimmtes Projekt angezeigt werden, könnte die Ursache in den folgenden Abschnitten zu finden sein:

Axe Watcher nicht konfiguriert

Ihre modifizierte Testsuite muss das geeignete Konfigurationsfunktion für Ihr Test-Framework aufrufen, bevor Sie Ihre Tests ausführen. Wenn Sie Axe Watcher nicht richtig konfigurieren, erhalten Sie eine Nachricht, dass Sie Axe Watcher konfigurieren müssen. Wenn Sie beispielsweise vergessen, Axe Watcher mit Cypress zu konfigurieren, sehen Sie diese Nachricht, wenn Sie Ihre Testsuite ausführen:

Cypress is not configured for axe Watcher. Please ensure that axe Watcher's cypressConfig() is invoked within Cypress's defineConfig() in your cypress.config.js. All tests will fail with this error.

Konsultieren Sie die Konfiguration Anweisungen für Konfigurationsbeispiele für Ihre Sprache und Ihr Browser-Testframework.

Ergebnisse nicht freigeben

Sie müssen die flush()-Funktion (oder den benutzerdefinierten Befehl axeWatcherFlush() in Cypress) aufrufen, um die gesammelten Ergebnisse zurück an die Server von Deque zu senden, damit die Ergebnisse auf der Website des Axe Developer Hub präsentiert werden können. Normalerweise rufen Sie die flush()-Funktion im Bereinigungshook Ihrer Automatisierungsplattform auf.

Zum Beispiel fügen Sie im support/e2e.js-Datei in Cypress den Aufruf zu afterEach() hinzu:

// Flush axe-watcher results after each test.
afterEach(() => {
  cy.axeWatcherFlush()
})

Verwendung der Option --incognito

Sie können die --incognito-Befehlszeilenoption nicht mit Chrome verwenden; andernfalls werden Ihre Tests stillschweigend fehlschlagen. Wenn Sie den Inkognito-Modus verwenden, um zu vermeiden, dass zwischengespeicherte Dateien auf die Festplatte geschrieben werden (zwischengespeicherte Dateien werden im Inkognito-Modus nur im Speicher gehalten), verwenden Sie stattdessen die Caching-Methoden Ihrer Testsuite.

Die erforderlichen Umgebungsvariablen nicht setzen

Wenn Sie mit den Beispielen im watcher-examples-Repo auf GitHub experimentieren, beachten Sie, dass die Beispiele Umgebungsvariablen zur Festlegung des API-Schlüssels und der Projekt-ID verwenden, API_KEY und PROJECT_ID.

Test läuft zu schnell

Ihre Tests könnten zu schnell laufen, wodurch die Seite entladen und ihre Ressourcen freigegeben werden, bevor Watcher sie analysieren kann. Um dieses Problem zu beheben, können Sie am Ende des Tests eine Verzögerung einfügen, damit genügend Zeit zur Analyse der Seite bleibt.

Zum Beispiel können Sie in Cypress eine Verzögerung von 10 Sekunden (10.000 Millisekunden) mit der cy.wait()-Methode hinzufügen:

describe('Visitor', () => {
  it('should visit example.com', () => {
    cy.visit('https://www.example.com')
    cy.wait(10000);  })
})

Fehlender oder ungültiger API-Schlüssel

Ein ungültiger oder fehlender API-Schlüssel erscheint als ungültige Konfigurationsdatei in Cypress. Der Stack-Trace wird zeigen, ob er ungültig oder fehlend ist. Ein fehlender-Schlüssel führt zu folgendem Ergebnis:

AssertionError [ERR_ASSERTION]: API key is required
    at validateApiKey ...

(Viele Zeilen des Stack-Traces wurden der Kürze halber gelöscht.)

Ein ungültiger-Schlüssel führt zum folgenden Stack-Trace (verkürzt):

Error: Server responded to https://axe.deque.com/api/api-keys/test/validate/axe-devtools-watcher with status code 404:
{"error":"Invalid API key"}
    at Response.getBody
...

Hilfe

Wenn Sie Ihr Problem nicht lösen können, bitte mailen Sie uns, damit wir Ihnen helfen können.