Dépannage

Watcher ne prend en charge que Chrome pour les tests ou Chromium

Bien que le site axe Developer Hub prenne en charge plusieurs navigateurs, le package Watcher ne prend en charge que Google Chrome pour les tests ou Chromium. Problèmes que vous pourriez rencontrer :

• Si vous utilisez la version 139 ou ultérieure de Chrome, vous recevrez une erreur de Watcher. Utilisez Chrome pour les tests ou Chromium à la place.
• Si vous utilisez le navigateur Electron de Cypress, vous recevrez une erreur. Spécifiez le navigateur comme étant Chrome pour les tests ou Chromium lorsque vous lancez Cypress ; sinon, il utilisera par défaut le navigateur Electron. Consultez Démarrage des navigateurs dans la documentation de Cypress pour plus d'informations.

Voir Plateformes de tests automatisés pour plus d'informations sur les logiciels pris en charge par Watcher.

Résultats incomplets

Si votre suite de tests utilise plusieurs testeurs exécutés en parallèle et utilise le même identifiant de build non nul, les résultats de chaque testeur remplaceront ceux des autres pour le même commit SHA Git, donnant des résultats incomplets. Vous devez vous assurer que chaque testeur utilise le même identifiant de build non nul.

Vous définissez généralement l'identifiant de build dans votre AxeConfiguration.

Pour plus d'informations sur l'utilisation des testeurs parallèles avec différentes plateformes CI/CD, voir Exécution de tests en parallèle.

Erreurs d'accessibilité en double ou comptage d'erreurs nouvelles incorrect

Si votre site Web utilise des ID dynamiques ou des noms de classe qui changent à chaque actualisation de la page, vous verrez probablement des erreurs d'accessibilité en double, en particulier les problèmes marqués comme nouveau lorsque des exécutions de test précédentes montrent le même problème sur le même élément. (Axe Developer Hub utilise des ID et des classes pour identifier le même élément entre les exécutions de test.) Pour résoudre ce problème, vous devez définir la propriété ancestry dans l'objet runOptions de votre configuration à true. L'exemple ci-dessous montre comment définir l'option dans votre configuration :

axe: {
  runOptions: {
    ancestry: true
  }
}

Consultez Utilisation des sélecteurs dynamiques pour plus de conseils sur l'utilisation des sélecteurs dynamiques.

Consultez (JavaScript/TypeScript) runOptions ou (Java) AxeWatcherOptions.setRunOptions() pour plus d'informations.

Ancienne version de @axe-core/watcher

Si vous utilisez la version 3.18.0 ou une version antérieure de @axe-core/watcher, vous recevrez ce message d'avertissement :

Axe Developer Hub adhère désormais aux paramètres définis dans la Configuration axe, et les exécutions de test créées par les versions de @axe-core/watcher 3.18.0 ou antérieures génèrent des sessions qui ne tenaient pas compte des paramètres globaux dans la Configuration axe. Vous devez mettre à jour votre paquet @axe-core/watcher et relancer vos tests pour créer des sessions qui suivent la Configuration axe de votre entreprise. Voir Utilisation des configurations globales.

Méthode du contrôleur expirant

(JavaScript ou TypeScript uniquement) Vous recevrez un message similaire au suivant si les appels aux méthodes du contrôleur (définies dans la Controller classe de base abstraite comme analyze(), flush(), start(), et stop()) ou aux commandes personnalisées Cypress expirent :

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.

La méthode spécifiée (ici, la Controller méthode () requiert plus de temps que le délai par défaut pour s'achever et a expiré. Vous pouvez modifier le délai par défaut en ajoutant un flushobjet à votre configuration: timeout objet à votre configuration :

axe: {
  timeout: {
    flush: 10000
  }
}

Voir Définir des délais pour des informations sur l'utilisation des délais.

Voir Timeouts Interface et timeouts pour plus d'informations. Les valeurs de délai par défaut sont indiquées dans le tableau sous l'interface Timeouts Interface.

Résultats non affichés

Si vous avez exécuté votre suite de tests et qu'aucun résultat ne s'affiche dans axe Developer Hub pour un certain projet, la cause peut être trouvée parmi les raisons dans les sections suivantes :

Ne pas configurer axe Watcher

Votre suite de tests modifiée doit appeler la fonction de configuration appropriée pour votre cadre de test avant de lancer vos tests. Si vous ne configurez pas correctement axe Watcher, vous recevrez un message vous indiquant de configurer axe Watcher. Par exemple, si vous oubliez de configurer axe Watcher avec Cypress, vous verrez ce message lorsque vous exécuterez votre suite de tests :

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.

Consultez les instructions de configuration pour des exemples de configuration pour votre langage et votre cadre de test de navigateur.

Ne pas vider les résultats

Vous devez appeler la flush() fonction (ou la commande personnalisée axeWatcherFlush() dans Cypress) pour envoyer les résultats collectés aux serveurs de Deque afin qu'ils puissent être présentés sur le site web axe Developer Hub. En général, vous appelez la flush() fonction dans le crochet de nettoyage de votre plateforme d'automatisation.

Par exemple, dans le fichier support/e2e.js dans Cypress, vous ajoutez l'appel à afterEach():

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

Utilisation de l'option --incognito

Vous ne pouvez pas utiliser l' --incognito option de ligne de commande avec Chrome ; sinon, vos tests échoueront silencieusement. Si vous utilisez le mode incognito pour éviter d'écrire des fichiers mis en cache sur le disque (les fichiers mis en cache sont conservés uniquement en mémoire en mode incognito), utilisez plutôt les méthodes de mise en cache de votre suite de tests.

Ne pas définir les variables d'environnement requises

Si vous expérimentez avec les exemples dans le dépôt watcher-examples sur GitHub, notez que les exemples utilisent des variables d'environnement pour définir la clé API et l'ID de projet, API_KEY et PROJECT_ID.

Test exécuté trop rapidement

Vos tests peuvent s'exécuter trop rapidement, déchargeant la page et libérant ses ressources avant que Watcher puisse l'analyser. Pour résoudre ce problème, vous pouvez ajouter un délai à la fin du test pour laisser le temps d'analyser la page.

Par exemple, dans Cypress, vous pouvez ajouter un délai de 10 secondes (10 000 millisecondes) avec la cy.wait() méthode :

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

Clé API manquante ou invalide

Une clé API invalide ou manquante apparaît comme un fichier de configuration invalide dans Cypress. La trace de la pile indiquera si elle est invalide ou manquante. Une clé manquante entraîne le résultat suivant :

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

(De nombreuses lignes de la trace de la pile ont été supprimées pour plus de concision.)

Une clé invalide entraîne la trace de pile suivante (raccourcie) :

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
...

Aide

Si vous ne parvenez pas à résoudre votre problème, veuillez nous envoyer un courriel pour que nous puissions vous aider.