Tests multi-navigateur

Plantons le décor

Lors de l'avancement d'un projet nous effectuons des tests multi-navigateurs via des machines virtuelles ou directement sur le device concerné (iPhone, iPad, Surface, Nexus...), pour nous assurer que le rendu du site sur lequel nous travaillons est correct sur les différents navigateurs et terminaux mobiles concernés.

Cela nous permet d'obtenir un rendu dans des conditions quasi-similaires à celle de l'utilisateur final du site.

Et si on automatisait le tout ?

L’idée en automatisant ces tests n’est pas de supprimer cette vérification manuelle, pour la simple et bonne raison qu’on doit pouvoir continuer de tester lors des phases de développement en « conditions réelles », d’autant plus lorsqu’il s’agit de tester des animations, des effets au scroll, etc...

Cependant là où cette tâche devient intéressante c’est durant l’étape d’après, celle où nous devons revenir sur le projet pour corriger des contenus, ajuster des couleurs, modifier quelques éléments d'UI, etc...

Cette fois-ci partant du principe que des tests en « conditions réelles » ont déjà été effectués nous pouvons nous focaliser seulement sur le rendu attendu sans prendre en compte, lorsque ce n'est pas nécessaire, un comportement particulier qui nécessiterait une vérification manuelle.

Grunt & Browserstack tu disais...

Concernant les outils utilisés pour réaliser cette automatisation nous utiliserons Grunt et Browserstack.

Grunt est un module node.js, permettant d'automatiser des tâches. Par exemple compresser des images, compiler des fichiers Sass en Css et pleins d'autres choses.

De son côté Browserstack est un outil en ligne de tests multi-navigateurs, il se charge de nous lancer des machines virtuelles avec des versions cibles de systèmes d'exploitations et de navigateurs, sans avoir besoin de passer par autre chose que son navigateur fétiche.

Les entrailles de la bête

browserstack.js

Ce fichier est le coeur de notre tâche, écrite en JavaScript et pour fonctionner elle requiert quelques modules :

• Browserstack-webdriver, qui est le Webdriver Selenium mis en place par Browserstack pour réaliser nos tests.
• Fs, comprenez File System pour gérer les fichiers, repertoires, etc...
• Chalk, pour une colorisation des messages dans le terminal.

Capture les tous !

Dans ce fichier browserstack.js, il y a une fonction très exhaustive qui se nomme screenShot ; non elle ne fait pas le café mais bien des captures d'écrans.

Cette fonction établie une connexion avec l'API Browserstack, via la variable driver, une fois connecté, nous définissons une seconde fonction saveScreenshot qui va utilier la propriété takeScreenshot de l'API Browserstack.

Faisons une pause, cette fonction se trouve dans la documentation de Browserstack.

Une fois ces deux éléments défini, on se dirige vers l'URL passé à la fonction via driver.get(url), on prend une capture driver.saveScreenshot(file) et on coupe l'instance créée driver.quit().

Boucle ta ceinture Simone !

Maintenant qu'on a une fonction qui fait le travail, on respire un grand coup et on boucle sur les informations remplies dans le Gruntfile.

Dans un premier temps on boucle sur les URLs, et ce à chaque URLs trouvés. On boucle sur les browsers, on recupère un joli Timestamp via la variable date, puis on définit un objet Capabilities qui nous permet de communiquer avec l'API de Browserstack et de lui dire ce que l'on veut faire.

Une fois cet objet mis en place, il reste à gérer le nom du fichier. Comme expliqué plus haut, les options changent entre une instance Desktop et Mobile, de ce fait on doit adapter le nom du fichier pour qu'il soit compréhensible et unique.

Voici ce que ça nous donne :

Desktop :

IE10-Windows8-www.lunaweb.fr-1406019727146.png

IE10-Windows8-www.lunaweb.fr-agence-1406019727153.png

Mobile :

iPadMAC-iPad-3rd (7.0)-www.lunaweb.fr-1406019727152.png

iPadMAC-iPad-3rd (7.0)-www.lunaweb.fr-agence-1406019727155.png

Côté console ?

Du côté de la console, nous avons des retours de succès ou d'erreurs durant toute l'étape de la création de captures.

Succès

Erreur

Le petit plus Browserstack

Là où Browserstack est bien fait, c'est que si la commande retourne une erreur, Paf au bout de 90 secondes d'inactivité la session est désactivée.

Mise en pratique

Gruntfile.js

Le Gruntfile possède une tâche Browserstack avec les options, les browsers, les URLs, le dossier de destination des captures.

Les options

Mais que font ces options ?

Pas de panique, c'est trés simple, username et userkey correspondent aux identifiants d'accès à l'API Browserstack.

Project, correspond au nom du projet car une fois connecté sur Browserstack, nous avons accès à une interface permettant de voir tous les tests réalisés ainsi que les logs, de cette manière tous les tests sont rangés par nom de projet.

Flash et popup nous permettent d'activer ou non le module flash et la possibilité d'avoir des popups sur les machines virtuelles.

Browsers

Dans cette partie de la tâche on configure sur quelles machines on veut pouvoir tester notre site. Un générateur de configuration est disponible depuis la documentation de Browserstack : https://www.browserstack.com/automate/node#setting-os-and-browser.

Pour résumer on définit le browser, la version du browser browser_version, l'os de la machine virtuelle os, ainsi que la resolution (bien que cette dernière ne semble pas systématiquement prise en compte, Browserstack capture toute la page sur la hauteur).

La configuration diverge cependant entre Dekstop et Device mobile. Sur mobile le nom du device sera browserName, la plateforme (Mac, Android) platform, le device (version ex: ipad 6 ou iphone 3GS) device et enfin on peut choisir l'orientation (portrait & landscape) via deviceOrientation.

Urls

Maintenant que nos browsers sont configurés nous allons définir les urls à tester. Pour cela nous avons un tableau urls qui contient, des urls. Cette fois-ci le code parle de lui même on a une liste d'urls sur lesquelles on va boucler, et à chaque url on va venir tester chaque browser définit plus haut.

Simple mais efficace

Destination

 Le plus important pour la fin

Effectivement il s'agit cette fois-ci de savoir, où nous allons stocker nos captures, c'est un peu l'essence même de ce que doit produire la tâche finalement. Pour ce faire, nous avons une simple option, dest, dans laquelle on vient définir un chemin que nous devons créer, ex: screenshots/projet/.

En conclusion

Après avoir fait une revue complète du code, vous êtes maintenant fin prêt pour automatiser vos tests multi-navigateurs, elle est pas belle la vie ?

Vous pouvez retrouver l'ensemble de la tâche sur le Github de LunaWeb.