Introduction

Les tests de bout en bout peuvent être difficiles à déboguer, car ils dépendent d'un système entier, peuvent dépendre d'actions précédentes (telles que la connexion) et peuvent modifier l'état de l'application testée. Les tests WebDriver en particulier peuvent être difficiles à déboguer en raison des longs messages d'erreur et de la séparation entre le navigateur et le processus exécutant le test.

Types d'échec

Protractor est livré avec des exemples de tests ayant échoué (failure_spec.js). Pour l'exécuter, démarrez l'application de test et un serveur Selenium, puis exécutez la commande ci-dessous. Ensuite, regardez toutes les traces de la pile.

Cette suite de tests montre différents types d'échec :

• WebDriver génère une erreur; Lorsqu'une commande ne peut pas être complétée, par exemple, un élément est introuvable.
• Protractor échouera s'il ne peut pas trouver la bibliothèque Angular sur une page. Si votre test doit interagir avec une page non Angular, accédez directement à l'instance WebDriver avec browser.driver.
• Expectation Failure Indique à quoi ressemble un échec de l'attente normale.

Délais d'attente

Protractor peut expirer de plusieurs manières. Voir la référence Timeouts pour une documentation complète.

Débit de contrôle désactivé

Node.js fournit un fichier async / wait natif, ce qui signifie que nous pouvons facilement obtenir un test e2e stable sans utiliser le flux de contrôle. De plus, si nous écrivons notre test en utilisant async / wait, Nous pourrons utiliser l'outil de développement Chrome et Chrome Inspector pour déboguer les nouveaux tests, ce qui donnera une expérience de débogage plus agréable.

Tests de débogage dans Chrome Inspector

Nous pouvons déboguer les tests javascript et async / wait de TypeScript dans chrome inspector et le processus de débogage est presque identique.

Nous avons un exemple simple pour montrer comment déboguer async / wait dans le test. Vous pouvez trouver l'exemple complet ici

Ajoutez le mot-clé "débogueur" au scénario de test que nous voulons déboguer.

Démarrez le processus de test avec un nouvel argument "inspect-brk", qui activera l'agent inspecteur, écoutera l'adresse et le port par défaut (127.0.0.1:9229) et rompra avant le début du code utilisateur. Utilisation

Ouvrez l'inspecteur chrome : entrez "chrome://inspect/#devices" dans le navigateur, recherchez la cible en cours d'exécution et cliquez sur "Inspecter".

Le test commencera et se mettra en pause au début.

Nous pouvons cliquer sur F8 (reprendre l'exécution du script) et le test s'interrompra à la première ligne contenant notre mot-clé "débogueur". Nous pouvons ensuite ajouter des points d'arrêt et des tests de débogage.

Nous pouvons également ouvrir l'outil de développement Chrome sur le navigateur Webdriver pour vérifier les éléments HTML et effectuer des requêtes pendant l'exécution du test.

Problèmes connus

Si nous reprenons l'exécution du test après une longue pause, il passera au prochain cas de test, même si nous avons d'autres points de rupture dans le cas de test actuel, car celui-ci a déjà expiré. Vous pouvez définir jasmine.DEFAULT_TIMEOUT_INTERVAL sur une valeur élevée arbitraire pour que votre test n'expire pas.

Si nous entrons dans le code lib de protractor qui a été écrit en caractères typographiques, nous ne pouvons pas voir le code TypeScript. En général, vous pouvez ajouter des points d'arrêt à chaque ligne que vous souhaitez mettre en pause et utiliser F8 (reprendre l'exécution du script) pour déboguer.

Configuration de VSCode pour le débogage

VS Code prend en charge le débogage intégré pour le moteur d'exécution Node.js et peut déboguer JavaScript, TypeScript et tout autre langage transpilé en JavaScript.

Pour configurer le VSCode pour Protractor, suivez les étapes ci-dessous:

• Cliquez sur l'icône de débogage dans la barre de visualisation à côté de VS Code.
• Cliquez sur l'icône Configurer l'engrenage dans la barre supérieure de la vue Débogage et choisissez l'environnement nodejs.
• Il va générer un fichier launch.json dans le dossier de votre espace de travail vscode.
• Configurez votre fichier launch.json en configurant ci-dessous deux commandes :

• Enregistrez votre launch.json, mettez des points d'arrêt et démarrez le débogage.

Configuration de WebStorm pour le débogage

Pour configurer WebStorm pour Protractor, procédez comme suit :

• Ouvrir la boîte de dialogue Configurations Exécuter/Déboguer
• Ajouter une nouvelle configuration Node.js.
• Sur le jeu d'onglets Configuration :
  
  
  • Interpréteur de noeud : chemin d'accès au fichier exécutable
  • Répertoire de travail : votre chemin de base de projet
  • Fichier JavaScript : chemin d'accès au fichier clr.js de Protractor (par exemple, node_modules\protractor\built\cli.js)
  • Paramètres d'application : chemin d'accès à votre fichier de configuration de Protractor (par exemple, protractorConfig.js)
• Cliquez sur OK, placez des points d'arrêt et démarrez le débogage.

Flux de contrôle activé

Faire une pause pour déboguer

Protractor prend en charge deux méthodes de pause pour déboguer, browser.pause() et browser.debugger(). Vous voudrez probablement l'utiliser browser.pause(), à moins que vous ne souhaitiez un contrôle précis sur le débogueur de noeud.

Utiliser la pause

Insérer browser.pause() dans votre test où vous voulez faire une pause.

Exécutez vos tests normalement.

protractor failureConf.js

Le test suspend l'exécution après la navigation planifiée, app/index.html#/form mais avant d'essayer d'obtenir du texte à partir de l'élément non inexistant. Le terminal imprimera des instructions pour continuer ou inspecter l'application, ainsi qu'une liste des tâches en attente sur le flux de contrôle WebDriver.

Entrez c pour faire avancer le test d'une tâche.

Pendant que le test est en pause, vous pouvez également interagir avec le navigateur. Notez que si vous ouvrez les outils de développement Chrome, vous devez les fermer avant de poursuivre le test, car ChromeDriver ne peut pas fonctionner lorsque les outils de développement sont ouverts.

Lorsque vous avez terminé le débogage, quittez en appuyant sur Ctrl-C. Vos tests continueront là où ils se sont arrêtés, en utilisant le même navigateur.

Vous pouvez également utiliser browser.explore() dans votre script de test pour suspendre et entrer une boucle de réplication interactive. Dans ce mode interactif, vous pouvez envoyer des commandes WebDriver à votre navigateur. La valeur ou l'erreur résultante sera signalée au terminal.


Utiliser le débogueur

Insérer browser.debugger() dans votre test où vous voulez rompre :

Puis lancez le test en mode débogage :

Ceci utilise le débogueur de noeud. Entrez c pour démarrer l'exécution et continuez après le point d'arrêt ou entrez la commande next. La commande suivante passe à la ligne suivante du flux de contrôle.

browser.debugger() est différente de l'instruction node debugger;, car elle ajoute une tâche de point d'arrêt de manière asynchrone dans la file d'attente. Cela signifie que l'exemple ci-dessus s'interrompt une fois que l'instruction get a été exécutée, alors que debugger le test met en pause une fois que la commande get est planifiée mais qu'elle n'a pas encore été exécutée.

La méthode debugger() de Protractor fonctionne en planifiant un point d'arrêt de débogage de noeud sur le flux de contrôle.

Quand debugger() est appelé, il insère également tous les scripts côté client de Protractor dans le navigateur en tant que window.clientSideScripts. Ils peuvent être utilisés à partir de la console du navigateur.

Tester le rapporteur de manière interactive

Lors du débogage ou de la première écriture de suites de tests, il peut être utile d'essayer les commandes de Protractor sans démarrer la suite de tests complète. Vous pouvez le faire avec l'explorateur d'éléments.

Pour exécuter l'élément d'exploration, exécutez simplement le rapporteur comme vous le feriez normalement, mais passez l'indicateur --elementExplorer :

Cela chargera l'URL sur WebDriver et placera le terminal dans une boucle REPL. Vous verrez une invite > . Les variables browser, element et protractor seront disponibles. Entrez une commande telle que :

ou

En tapant l'onglet à une invite vide, une suggestion de recherche d'éléments sera complétée. Vous pouvez également utiliser la commande list(locator) pour répertorier tous les éléments correspondant à un localisateur.

Element Explorer démarrera chrome par défaut. Cependant, vous pouvez spécifier un autre navigateur, modifier les paramètres du navigateur ou spécifier toute autre configuration que vous feriez normalement avec votre test de protractor. Pour ce faire, transmettez les rapporteurs au rapporteur comme vous le feriez normalement, mais avec le drapeau --elementExplorer défini:

Par exemple, pour vous connecter directement à ChromeDriver, utilisez

Element explore ignorera vos spécifications, ne configurera pas votre framework (par exemple, jasmine, moka, cucumber), et vous permettra seulement de transmettre une capacité, mais respectera tous les autres paramètres de votre configuration.

La note baseUrl est utilisée ici comme page initiale, c'est-à-dire que l'explorateur d'éléments essaiera de naviguer baseUrl automatiquement au démarrage.

Prendre des captures d'écran

WebDriver peut prendre une capture d'écran avec browser.takeScreenshot(). Cela peut être un bon moyen d'aider au débogage des tests, en particulier pour les tests exécutés sur un serveur à intégration continue. La méthode renvoie une promesse qui résultera en une capture d'écran sous la forme d'un fichier PNG codé en base 64.

Exemple d'utilisation :