BrowserStack + Selenium : Tests multi-navigateurs en 5 minutes

Introduction

Dès lors que l’on parle d’automatiser des tests web, Selenium (ou une surcouche basée dessus) reste la solution la plus populaire à l’heure actuelle. Si elle permet bien d’automatiser facilement des comportements UI, sa mise en place peut se complexifier grandement lorsqu’il s’agit de garantir la compatibilité sur un grand nombre de navigateurs web (que ce soit en vue « Desktop » ou « Mobile »)

À moins de se constituer son propre parc de machines de test orchestré via Selenium Grid, une autre solution plus rapide à mettre en place consiste à s’appuyer sur des services Cloud tels que BrowserStack ou Sauce Labs

Dans cet article, c’est la mise en place de BrowserStack qui est présentée.

Récupération de l’Access Key BrowserStack (prérequis)

Si vous ne possédez pas encore de compte BrowserStack, il est nécessaire de se créer un compte en Trial, qui offre 100 minutes d’exécution de tests automatisés multi-navigateurs.

Une fois votre compte créé, les informations importantes à récupérer sont les valeurs des paramètres Username et Access Key

00-récupération-access-key-browserstack-ed.PNG

Conserver précieusement ces informations à réutiliser dans les étapes suivantes

Écrire le test Selenium et le configurer pour s’exécuter sur BrowserStack

Côté Visual Studio, la seule dépendance nécessaire est le Selenium.WebDriver, disponible sous forme de package NuGet

02-ajout-package-nuget-selenium.PNG

Le code de test nécessaire pour exécuter son test sur BrowserStack est lui aussi très minime. Il consiste à :

  • Utiliser le RemoteWebDriver, qui permet d’exécuter les scripts de test sur un serveur Selenium distant, en pointant vers l’url http://hub-cloud.browserstack.com/wd/hub/
  • S’authentifier en passant ses identifiants BrowserStack précédemment récupérés via spécification des capacités du Driver :
    • « browserstack.user » correspond au Username BrowserStack
    • « browserstack.key » correspond à l’AccessKey BrowserStack

03-selenium-browserstack-test-code-ed.PNG

L’exécution et l’assertion du résultat du test sont effectuées de la même manière qu’un test Selenium classique (à base de récupération d’éléments par leurs id, de saisies clavier, clic de souris et vérification du bon affichage d’éléments HTML)

Note : Il est important de ne pas oublier d’appeler la méthode « Quit() » du WebDriver pour s’assurer que BrowserStack sache que la session de test est terminée (et évite de consommer votre précieux crédit inutilement)

Félicitations, vous venez d’automatiser votre premier test sur BrowserStack !

Visualiser les logs d’exécution sur BrowserStack

Pour vérifier les logs d’exécution, BrowserStack propose une interface web, accessible à l’url https://www.browserstack.com/automate (1)

On y trouve l’historique des exécutions (4), ainsi que divers logs (3) dont notamment l’enregistrement vidéo (2)

03-visualiser-video-et-logs-browserstack-automate-ed.PNG

Pour exécuter ses tests sur un navigateur différent, la documentation de BrowserStack permet de générer automatiquement les capacités à configurer sur le driver Selenium.

Exemple pour une exécution sur Chrome version 62, sur Windows 7 en résolution 1024 par 768 :

capabilities.SetCapability("browser", "Chrome");
capabilities.SetCapability("browser_version", "62.0");
capabilities.SetCapability("os", "Windows");
capabilities.SetCapability("os_version", "7");
capabilities.SetCapability("resolution", "1024x768");

Conclusion

Comme vu dans cet article, exécuter des tests d’interface web sur de multiples versions de navigateurs et s’assurer ainsi de la bonne compatibilité de ces derniers à un coût d’entrée techniquement faible.

Les réelles problématiques tournent plutôt sur l'environnement à mettre en place pour réaliser ces tests (un sous ensemble de l'environnement, ou un environnement entier ?), ainsi que sur la mise en place de pattern améliorant la maintenabilité des tests tels que le pattern PageObject.

Photo de profil

Ces billets pourraient aussi vous intéresser

Vous nous direz ?!

Commentaires

comments powered by Disqus