Tester des applications Web avec Node.js et Playwright

Le développement d'applications modernes dépend de tests automatisés, utilisant des frameworks de test pour garantir que le code est prêt à être intégré aux packages d'applications et aux utilisateurs finaux. Pour tirer le meilleur parti des tests, les tests sont écrits avant le code et peuvent être intégrés dans les pipelines de contrôle de code source et CI / CD (intégration continue / déploiement continu). Les tests doivent être partout dans votre processus de développement. Besoin de fusionner une pull request? Testez le code. Besoin de vous engager dans une succursale? Testez le code.

Mais il y a un domaine dans lequel les tests sont difficiles, en particulier lorsqu'ils doivent être automatisés. Je parle de la nécessité d'interagir avec et de tester des interfaces utilisateur dynamiques. Le test des applications Web est un processus complexe. Des outils tels que Selenium et Webdriver sont des éléments clés pour automatiser le contenu de la page et pour garantir que vous testez à la fois les éléments de la page et l'application dans son ensemble. Ils sont importants si vous utilisez des navigateurs sans tête dans une application; J'ai utilisé un ensemble de scripts Python dans une application Twitter construite autour de la prise en charge des pilotes Web de Selenium et Chromium pour automatiser la prise de captures d'écran à partir d'une application de suivi d'avion.

Présentation de Playwright, le cadre de test Web de Microsoft

Selenium et Webdriver ne sont pas les seuls outils permettant de créer des tests de bout en bout pour les applications Web et les navigateurs modernes. Une alternative populaire est Puppeteer de Google, qui gère à la fois l'envoi de clics aux navigateurs en utilisant les mêmes techniques que les outils de pilote Web de Chrome et l'accès aux informations de débogage via les API des outils de développement familiers. Un nouveau venu dans la ligue des tests de navigateurs, Playwright est développé par Microsoft en tant que projet open source hébergé sur GitHub.

Playwright reprend l'architecture de base de Puppeteer et la déplace davantage vers Selenium, en ajoutant un cadre d'automatisation Web et en améliorant la façon dont Puppeteer interagit avec le contenu de la page. Il est conçu pour s'installer rapidement et facilement à l'aide de la syntaxe npm familière, en utilisant JavaScript pour créer l'automatisation et les tests d'applications Web. Il fonctionne avec plus de navigateurs, avec la prise en charge des navigateurs basés sur Chromium tels que Edge, ainsi que Firefox et WebKit d'Apple.

Il y a un message important dans la liste des navigateurs pris en charge de Playwright: vous ne pouvez pas l'utiliser avec les navigateurs basés sur Trident ou EdgeHTML. Ce n'est pas surprenant. Microsoft a pris un engagement ferme envers sa branche Chromium dans son nouvel Edge, et l'ancien Edge et Internet Explorer sont presque en fin de vie. Si vous envisagez d'utiliser Playwright pour les tests, vous décidez de ne prendre en charge que les navigateurs modernes grand public, vous devrez donc informer les utilisateurs de ce qui est en réserve pour les futures versions de toutes les applications Web que vous créez et soutenez.

Tester le Web avec Playwright

La possibilité d'effectuer des tests multiplateformes sur tous les principaux navigateurs avec le même ensemble de scripts est importante, tout comme la prise en charge des versions mobiles des sites (comme les deux principales plates-formes mobiles utilisent des variantes de leurs navigateurs de bureau, Playwright émule actuellement les vues mobiles dans les navigateurs de bureau. ). La prise en charge des tests headless est également importante, dans laquelle vous ne rendez pas une interface utilisateur de navigateur, mais plutôt avec le modèle d'objet de document généré (et un shadow DOM si vous utilisez des fonctionnalités de navigateur modernes et des technologies telles que des composants Web).

Vous pouvez utiliser Playwright pour automatiser un navigateur en cours d'exécution sur les bureaux de développement afin d'inspecter les erreurs dans le cadre du débogage d'application, en vous assurant que vous exécutez systématiquement tous vos chemins de test tout en enregistrant des informations de performances supplémentaires et en surveillant les problèmes d'interface utilisateur non suivis. Alternativement, il peut être configuré dans le cadre d'une action GitHub pour tester le nouveau code dans le cadre d'un commit ou d'une fusion, automatisant ce qui pourrait autrement être un test manuel complexe.

Création et exécution de tests Playwright

Démarrer avec Playwright est aussi simple que de configurer un nouveau projet Node.js. Tout d'abord, installez Node.js sur vos appareils de test. Puisque Playwright utilise Node, vous pouvez l'exécuter sur des PC de développement ou sur des serveurs de votre pipeline CI / CD, ce qui en fait une partie d'une action GitHub qui peut être utilisée tout au long de votre processus de développement logiciel. Tout ce dont vous avez besoin est une seule commande npm, qui installe le package Playwright ainsi que les binaires pour tous les navigateurs pris en charge. Une fois l'installation terminée, vous pouvez créer des scripts d'automatisation à l'aide de JavaScript ou de TypeScript pour appeler les API Playwright. Ce sont tous des appels asynchrones, utilisez donc des instructions await pour gérer leurs promesses.

Le résultat est une manière très claire de créer des scripts, en commençant par ouvrir une instance de navigateur headless, puis en accédant à une page avant d'interagir avec les instances de page. C'est une bonne idée de créer initialement des tests avec des navigateurs complets afin de pouvoir suivre comment Playwright interagit avec votre application. Une option de ralenti utile exécute les interactions à une vitesse plus humaine, ce qui facilite la visualisation et la gestion des tests exécutés dans les navigateurs de bureau. Une fois qu'un test a été débogué et fonctionne correctement, vous pouvez le déplacer en mode sans tête, puis l'exécuter dans le cadre d'une implémentation CI / CD.

Playwright inclut un outil CLI qui peut enregistrer les interactions avec les sites, générant automatiquement le JavaScript nécessaire pour exécuter les tests. L'option codegen est un outil utile pour démarrer rapidement avec Playwright, vous montrant le code qui interagit avec les éléments de page que vous pouvez ensuite utiliser comme modèle pour vos propres tests, en copiant et en éditant le code généré si nécessaire. La prise en charge de TypeScript peut aider à écrire des tests plus complexes, en utilisant un typage fort pour gérer les variables.

Travailler avec des applications Web dans Playwright

L'une des fonctionnalités les plus utiles de Playwright est sa prise en charge des contextes de navigateur. Ceux-ci vous permettent d'exécuter des actions isolées dans une seule instance de navigateur, de sorte que vous pouvez configurer plusieurs contextes pour tester plusieurs interactions en même temps. Dans chaque contexte, vous créez des pages, qui sont mieux considérées comme des onglets dans un navigateur de bureau. Les pages prennent en charge leurs propres interactions de clic et peuvent être surveillées en parallèle. Une fois que vous êtes sur une page, vous pouvez utiliser différentes façons de trouver du contenu avec lequel interagir, à l'aide de sélecteurs CSS ou XPath, d'attributs HTML ou de texte. Si vous êtes familier avec Selenium, vous devriez trouver la navigation dans les pages familière, avec la possibilité supplémentaire d'attendre qu'une page se charge complètement ou que le contenu dynamique soit rendu dans une application Web d'une seule page.

Vous pouvez utiliser des fonctions d'évaluation pour envoyer des paramètres vers et depuis des pages Web vers du code JavaScript s'exécutant dans le contexte de la page. Les résultats sont renvoyés à un exécuteur de script de test dans Node.js pour analyse, vous donnant les outils nécessaires pour réussir ou échouer les tests. Playwright fonctionne avec les outils de développement du navigateur F12, ce qui lui permet de faire beaucoup plus que simplement interagir avec le contenu de la page. Il peut surveiller le trafic réseau, vous pouvez donc l'utiliser pour tester à la fois l'authentification et le téléchargement de fichiers, entre autres. Il peut accéder à la console du navigateur et enregistrer les erreurs qui peuvent ne pas être immédiatement visibles dans une page rendue: par exemple, le suivi des problèmes CSS ou des bibliothèques JavaScript qui ne se chargent pas.

Il y en a beaucoup dans Playwright, et cela constitue une alternative convaincante à Selenium pour tester les applications de navigateur. Avec l'ajout continu de Microsoft aux outils de développement F12 dans Edge, il sera intéressant de regarder Playwright ajouter de nouvelles fonctionnalités qui élargissent vos options pour tester les applications hébergées par navigateur et les applications Web progressives aux côtés des applications Web traditionnelles.

Au-delà de JavaScript: tests en Python et C #

Microsoft a récemment publié une nouvelle version de Playwright pour les développeurs qui préfèrent créer des tests en Python plutôt qu'en JavaScript. C'est une option utile, car de nombreux frameworks de test Selenium existants sont basés sur Python, et cela vous permet de lier votre code de test à des packages analytiques pour une analyse plus détaillée des résultats à l'aide du riche écosystème d'applications et d'outils statistiques de Python.

Playwright inclut des liaisons de langage pour C #, vous pouvez donc intégrer Playwright dans des frameworks de test existants pour ASP.NET ou d'autres outils .NET. Vous ne devriez pas avoir à changer votre façon de travailler pour intégrer de nouveaux outils, et Microsoft promet des liaisons de langage supplémentaires pour Java et Ruby. Il y a la perspective de plus dans le futur, car la documentation de Playwright indique qu'elle est conçue pour prendre en charge les liaisons pour toutes les langues. Avec tout le code sur GitHub, vous avez la possibilité de créer vos propres liaisons pour la langue de test de votre choix et de les soumettre en tant que pull request au projet.