Donc, vous avez un Ruby on Rails projet avec lequel vous avez testé Capybara et capybara - webkit et vous devez passer à Chrome sans tête.
Eh bien, vous êtes au bon endroit car je vais vous montrer exactement comment vous pouvez y parvenir. Mais tout d'abord, permettez-moi de vous expliquer pourquoi il est important de procéder à ce changement et pourquoi Chrome est le candidat idéal pour cela.
Depuis 2017, Google Chrome est livré avec un environnement headless, qui nous permet d'émuler les interactions des utilisateurs sans avoir à utiliser une interface graphique. Ils ont également établi un partenariat avec Sélénium, un outil d'automatisation du navigateur pour publier Pilote Chrome. Il fournit une interface standard pour contrôler Chrome, de sorte qu'il fonctionne bien avec la plupart des outils et des langues qui souhaitent l'utiliser.
Maintenant, avant que tout cela ne soit une option, capybara - webkit, le pilote du navigateur QtWebKit, convenait parfaitement au poste. Cependant, je ne dirais pas la même chose maintenant. Les tests échouent par intermittence, forçant de nouvelles tentatives sur le CI, et le navigateur sur lequel il repose (QtWebKit) a été déprécié.
Tout bien considéré, avec Chrome, vous disposez d'un navigateur moderne, d'un pilote pour celui-ci et d'un outil testé sur le terrain pour automatiser vos tests (Selenium). Tout cela sans avoir à gérer les dépendances embêtantes des versions de Qt. Génial, non ?
Bien, maintenant que vous êtes tous au courant, je vais vous expliquer comment configurer ChromeDriver et Selenium, tout en fournissant une solution à certains des problèmes les plus courants qui peuvent survenir.
Le changement nécessite Chrome, bien sûr, et quelques dépendances pour s'assurer que tout est parfaitement intégré à Capybara.
Cette partie est assez simple, cela ne devrait pas vous compliquer la vie.
Tout d'abord, vous devez installer la dernière version stable de Chrome
Sous Linux, vous pouvez le faire de la manière suivante :
Ensuite, vous aurez besoin de deux outils supplémentaires :
Le joyau pilotes Web aide à l'installation de ChromeDriver, en téléchargeant et en installant automatiquement le pilote et en le tenant à jour.
Ensuite, vous devez ajouter les deux au projet dans votre Gemfile, comme indiqué ci-dessous :
N'oubliez pas de installation du bundle ensuite.
Il ne vous reste plus qu'à enregistrer les pilotes et à les configurer dans spec_helper.rb:
Cela définit le pilote par défaut sur : chrome_sans tête. Si vous souhaitez regarder les tests s'exécuter, changez-le simplement en : chromé dans les deux dernières lignes.
Vous remarquerez peut-être également fonctionnalités d'activation balise dans les options de Chrome, il s'agit d'une solution temporaire en raison d'un problème dans Chrome 74 dans lequel les cookies sont effacés de manière aléatoire lors de l'exécution, ce qui peut provoquer le blocage de Chrome.
Selon le système de suivi des bogues de Chromium, cela sera corrigé dans la version v75.
Si vous exécutez le projet dans Docker, vous devrez peut-être également ajouter « no-sandbox » aux options de Chrome :
Maintenant que c'est réglé, vous pouvez procéder à la suppression capybara - webkit depuis le Gemfile, ainsi que toute importation ou configuration que vous pourriez avoir laissée (recherchez Capybara : Webkit).
Pour certains projets, les tests peuvent déjà fonctionner correctement après ces étapes, mais pour d'autres, ce n'est peut-être pas le cas. Avec un nouveau navigateur et des outils exécutant les tests, de nouvelles fonctionnalités et de nouveaux problèmes apparaissent également.
Capybara-WebKit avait quelques fonctionnalités utiles mais méthodes non standardet Selenium ne prend pas en charge toutes les méthodes Capybara a quelque chose à offrir. Cela crée donc une lacune, et tout test utilisant des méthodes non prises en charge doit être corrigé.
Néanmoins, une solution simple, si vous déclenchez un clic, serait d'envoyer la touche de retour à l'élément :
Ou pour cliquer sur l'élément via javascript :
Si vous avez affaire à un autre type d'événement, vous pouvez utiliser jQuery comme suit :
Et puis pour lire les journaux, vous pouvez simplement :
Vous pouvez en savoir plus sur les fonctionnalités et les options de Chrome ici.
page.driver.header, page.response_headers et code_d'état de la page ne sont pas disponibles.
Corriger ce dernier point est un peu difficile, mais La solution de GitLab est une excellente solution de contournement. Confrontés au même problème lors du portage de leur navigateur de PhantomJS vers Chrome, ils ont implémenté un intergiciel pour intercepter les en-têtes des requêtes (plus d'informations à ce sujet) ici).
Pour implémenter cette solution, j'ai simplement inclus ces fichiers
lib/testing:
spécifications, assistance et aides:
Les espaces de noms doivent être modifiés pour correspondre à votre projet et la gemme « concurrent-ruby » doit être importée, car elle est requise dans le middleware :
N'oubliez pas d'importer également les fichiers dans spec_helper.rb:
Et avec toute cette configuration, tout ce que vous avez à faire pour obtenir les détails de l'en-tête est le suivant :
Maintenant que tout est opérationnel, permettez-moi de partager quelques conseils supplémentaires pour tirer le meilleur parti de Headless Chrome et ChromeDriver et éviter certains problèmes courants.
Capybara clique sur les éléments de la manière suivante :
Si, par exemple, la page défile alors que l'élément est censé être cliqué, les coordonnées peuvent devenir obsolètes entre les étapes 2 et 3, ce qui signifie que le clic tombera au mauvais endroit.
Une solution possible à ce problème est d'attendre la fin des animations. Dans ce cas, j'ai attendu que l'animation jQuery faisant défiler le corps s'arrête :
Une autre option serait de désactiver complètement les animations jQuery lors des tests, comme ceci :
Il convient de noter que la désactivation des animations peut également améliorer les performances des tests.
Si ce correctif ne fonctionne pas pour vous et que vous souhaitez vraiment annuler toutes les animations, consultez cet excellent article élaboré par les équipes de Doctolib.
Capybara ne clique sur les éléments que s'ils sont visibles. Par conséquent, si vous avez une barre de navigation ou une fenêtre contextuelle masquant un élément, vous risquez d'obtenir une erreur comme celle-ci :
L'élément n'est pas cliquable au point (100, 200). Un autre élément recevrait le clic :... (Selenium : :WebDriver : :Error : :UnknownError)
Pour y faire face, vous pouvez fermer toutes les fenêtres contextuelles sur la page, et faites défiler l'écran jusqu'à l'élément avant de cliquer dessus.
Une méthode simple, mettant en œuvre cette idée, serait la suivante :
Le mode headless de Chrome et ChromeDriver qui l'accompagne ont été fortement adoptés pour les tests et l'automatisation, d'autant plus que QtWebKit est devenu obsolète et, avec lui, les projets qui en étaient basés, tels que Phantom JS et capybara - webkit.
Même le mainteneur de Phantom JS, le navigateur sans tête autrefois populaire a abandonné son projet au profit de ChromeDriver. Et thinkbot, les créateurs de capybara-webkit, commencent à jouez avec ChromeDriver également.
Alors que capybara-webkit a fait le travail pendant un certain temps, le passage à une alternative plus moderne (le mode headless de Chrome) augmentera les tests fiable et écurie. Tout cela avec l'avantage supplémentaire d'utiliser le même moteur de navigateur que la plupart des utilisateurs, ce qui rend les actions de test beaucoup plus similaires à ce à quoi ressemblerait une interaction utilisateur réelle.
Joyeux tests, tout le monde !
Vous avez trouvé cet article utile ? Ceux-ci vous plairont peut-être aussi !
Enthusiast of all things Front-End. In a committed love/hate relationship with CSS. Most often seen scraping data for side-projects he'll never finish.
People who read this post, also found these interesting:
.webp)
.webp)
%20(2).webp)
