Les tests automatisés et leur intégration avec Sauce labs/Browserstack

12 juin 2017 / Marouen Mhiri / General

Avant de commencer directement avec les tests je voudrais bien vous parler un peu d'un Testing Framework, qui - à mon avis - n'a pas vraiment pris assez d'importance du côté des Developpeurs. Il s'agit du Framework "Galen".
C'est quoi Galen?
Galen permet de tester l'emplacement des objets l'un par rapport à l'autre sur une page web. En utilisant une syntaxe spéciale et des règles complètes, on peut décrire toute disposition qu'on peut imaginer...
Galen fonctionne bien avec Selenium Grid. Vous pouvez donc configurer vos tests et les exécuter dans le cloud comme Sauce Labs ou BrowserStack afin que vous puissiez même tester vos sites Web réactifs sur différents appareils mobiles. Galen peut exécuter plusieurs tests en parallèle, ce qui est également un bon économiseur de temps.
Pour plus d'informations consultez ce lien : http://galenframework.com/

➤ Au debut on va donc installer et configurer Galen. Pour ceci consultez ce lien
Ensuite on va spécifier un test Galen en créeant un fichier "homepage.gspec" et on va taper ce qui suit:

				
@objects
	menuIcon	css	.menu-box .menu-icon

= Main section =
    @on mobile
        menuIcon:
        	absent

    @on desktop
        menuIcon:
        	absent
				
			

Explication : C'est un très simple exemple (Galen peut faire beaucoup plus :-)) qui va nous permettre de tester si le "hamburger" menu est visible ou non sur les mobiles et les desktops.

Marouen Mhiri - Menu icon
Le "Hamburger" menu-icon devrait être visible seulement sur les displays avec un viewport inférieur à "680px", donc sur un display desktop (par exemple 1024x780) ce bouton doit disparaître. Dans cet exemple on veut tester si c'est vraiment le cas, on spécifie exprès "absent" - donc invisible - sur les mobiles afin de retourner une erreur et de vérifier que notre Framework fonctionne bien.

➤ En suite on va configurer notre test pour pouvoir l'executer sur Sauce Labs.
On crée donc un autre fichier nommé SauceLabsTest.test :

				
@@ set 
	sauceKey [[key sauce labs]]
    sauceUser [[nom d'utilisateur sauce labs]]
	base_url https://www.marouen-mhiri.com/
	browser_size 1024x780
	gridLogin ${sauceUser}:${sauceKey}
    gridUrl http://${gridLogin}@ondemand.saucelabs.com:80/wd/hub

@@ Parameterized
    | deviceName     | tags       | gridArgs | 
    | Win-Chrome 43  | desktop    | --size ${browser_size} --browser chrome --dc.browser_version 43 --dc.os Windows --dc.os_version 8.1 | 
    | iPhone5  | mobile    | --dc.device "iPhone 5S" --dc.os "ios" --dc.browser "iPhone" --dc.os_version 10.1 --dc.deviceOrientation "portrait" | 
    
Check visiblity of the hamburger menu icon in ${deviceName}
    selenium grid ${gridUrl} --page ${base_url} ${gridArgs}
        check homepage.gspec --include ${tags}
				
			

Explication : notre test se compose de trois parties
1. Configuration : avec "@@ set" on va définier des "variables de configuration".
Pour cet exemple j'ai créé un Free Trial account chez Sauce Labs. Après avoir été connecté sur son compte sauce Labs on retrouve le nom d'utilisateur et le Key sous "User setting" dans le dropdown de votre nom à droite en haut de la page.

sauce labs username
sauce labs key
2. Paramètres : avec "@@ Parameterized" on définit un tableau comportant les différents navigateurs, platformes, viewports, versions etc...
3. Exécution : dans cet exemple on utilise le selenium grid de sauce labs, et on teste la spécification galen "homepage.gspec" avec les paramètres "desktop" et "mobile"
Avec cette configuration on va essayer d'executer notre test sur Chrome pour Windows 8.1 dans la version 43 et sue un iPhone 5s dans la version iOs 10.1.

➤ Maintenant on doit exécuter la commande galen depuis le shell

				
$ galen test SauceLabsTest.test --htmlreport reports
				
			

Explication: on lance le test sur Saucelabs et on sauvegarde le "report" dans le dossier "reports" (c'est une option de Galen).
Si tout est bien configuré, on devrait voir ce qui suit sur notre console shell:

galen test
On remarque que notre test est bien lancé sur sauce labs et qu'on a une erreur.
là où on a lancé la commande galen on doit maintenant voir un dossier qui s'est créé et qui contient un fichier "report.html" :

galen test report
Voici le report pour le chrome 43 sur desktop :

galen test success
et le test qui n'a pas marché pour le iPhone5s :

galen test fail
Et voilà, notre test à trés bien fontionné 🤘 😉.

Note :
➤ l'intégration des tests automatisés dans un système CI comme Jenkins est trés simple à faire. En plus si votre Serveur git offre la possiblité pour configurer le web hooks, vous pourriez configurer les tests de façon à ce qu'ils s'éxécutent automatiquement dès que des changements auraient lieu sur votre dépot master.
➤ avec cette méthode vous pouvez aussi tester votre site même quand vous développez sur localhost ou bien un stage/serveur intranet (QA-stage par exemple). Pour ceci on doit télecharger le sauce labs proxy, lancer le programme et puis exécuter "galen test SauceLabsTest.test --htmlreport reports"
➤ Browserstack à le même principe (juste un petite astuce si vous tester localhost, vous devriez ajouter "--dc.browserstack.local = 'true'" à la liste des paramètres).

Tags :

testsauce labsbrowserstack