Retour d’expérience sur BrowserStack

browserstack-logo-600x315

Faire des tests d’affichages sur différents navigateurs et différentes machines peut aujourd’hui vite s’avérer compliqué au vu des nombreuses versions existantes et des machines tout aussi différentes.

Au fil des années nous avons compté sur une variété d’outils pour nous aider à relever le défi, notamment les outils de virtualisation. Mais dans ce cas, nous n’avions accès qu’a des versions de navigateurs limitées.

C’est là qu’arrive Browserstack ou plutôt BrowserStack.com...

Browserstack est créé en 2011 par Ritesh Arora and Nakul Aggarwai, diplômés de l’Indian Institute of technology de Bombay. En 2015, le service comptait 30 000 comptes payants et 520 000 développeurs enregistrés dans plus de 135 pays et a été primé comme « Bootstrap Champ » par the Ecocomic Times Startup Awards.

« Inception » dans votre navigateur

BrowserStack agit comme un service de virtualisation, mais celui-ci diffère de ce qui existait jusqu’à présent. Là où l’on avait le droit à la virtualisation d’un OS complet et une lourde installation, BrowserStack va simuler différents OS dans l’unique but d’afficher le navigateur souhaité dans l’OS voulu.

De ce fait, BrowserStack offre un panel assez impressionnant de navigateurs et systèmes d’exploitations. En utilisant la technologie Flash (pour encore combien de temps ?), BrowserStack ne vous impose aucune installation sur votre machine. Tout se passe dans votre propre navigateur et vous avez accès à de vrais navigateurs virtuels en cloud.

Pour vous donner un exemple, en utilisant le service, j’affiche la page principale du site Nettuts+ via Safari 9.1.2 sur OSX 5El Capitan) tout en utilisant Internet Explorer 11.

browserstack01

C'est une fonctionnalité très puissante et l'essentiel est que tout cela se fait au sein de votre navigateur. Vous avez un énorme choix :

  • Windows XP, 7 et 8
  • OSX Snow Leopard, Lion et Mountain Lion
  • iOS
  • Android
  • Opera mobile

browserstack02

Selon le système d'exploitation que vous choisissez, BrowserStack offre un nombre de navigateur pris en charge pour le système d'exploitation spécifique, y compris les bêtas dans certains cas :

browserstack03

Oui, même le IE6 tant redouté est disponible (Il ne veut toujours pas mourir celui-là…)

Outre les options de système d'exploitation et du navigateur, vous pouvez également choisir la résolution d'écran que vous souhaitez tester, ce qui est particulièrement utile pour vérifier vos configurations.

Comment en profiter ?

La première chose que vous devez faire est de vous inscrire sur BrowserStack. C’est un service payant et je pense que le prix est très raisonnable si on le compare à l’effort à fournir aujourd’hui pour avoir autant de navigateurs disponibles.

browserstack04

Pêle-mêle, dans les fonctionnalités principales, on retrouve le premier onglet LIVE qui vous permet de rapidement lancer une url dans un des nombreux choix de navigateur disponible. On a la possibilité d’avoir des informations sur les supports en test ainsi que les outils de débuggage natifs.

browserstack05 browserstack06

J’ai été amené à faire des tests d’accessibilité pour le client d’un site web en développement à notre pôle Santé. On m’a suggéré d’utiliser BrowerStack que je ne connaissais que de nom, ce qui explique cet article qui est un peu comme un retour d’expérience.  J’ai particulièrement utilisé les fonctionnalités SCREENSHOT et RESPONSIVE. Elles se cachent dans l’onglet More.

SCREENSHOT vous donne un instantané d’une url en ayant un large choix de systèmes, navigateurs et appareils. Le résultat arrive sur un tableau de bord, nous laissant le choix de zoomer sur chaque écran, de télécharger tous les écrans dans un fichier zip ou encore de partager un lien de la page de résultat. On peut tester jusqu'à 25 combinaisons simultanément.

browserstack07

Bien sûr, rien ne vaut un vrai test sur une vraie machine, mais cette fonctionnalité permet de simuler votre url sur un large panel de navigateurs très rapidement et sans trop d’effort.

RESPONSIVE teste le comportement responsive (cqfd) de votre url en choisissant différents appareils aux résolutions différentes en mode portrait ou paysage et ainsi de voir si vos balises Media Queries sont bien conçues. On a aussi la possibilité de basculer en mode LIVE pour débugger les différents écrans.

browserstack08

BrowserStack a également d’autres fonctionnalités que je n’ai pas eu loisir de tester mais que je vais énumérer :

  • Test fonctionnels automatisés (Automate)
  • Possibilité de tester des urls en local via de la ligne de commande ou un Web tunnel (java)

Dans les aspects négatifs, je dirais que le service complet pourra être un peu cher pour un indépendant, d'autant qu'il n’y a pas du tout de virtualisation pour le support Linux. La technologie Flash empêche aussi de pouvoir faire vos tests directement sur des appareils mobiles, il faudra que cela change. Donc obligation d’être devant un ordinateur de bureau ou un portable pour en profiter confortablement.

Pour conclure, je dirais que pour les options proposées, BrowserStack s’avère très utile dans une équipe où l’on se partage de la conception ergonomique et l’intégration. La prise en main se fait facilement malgré l’interface anglaise. Du point de vue du Studio Digital Netapsys, c’est un vrai plus de pouvoir livrer ce genre de reporting à un client. Que ce soit sur l'affichage d’un service ou site sur différentes versions de navigateurs ou le comportement responsive d'un site sur de multiples appareils.

 

Enregistrer

Enregistrer

Enregistrer

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Captcha *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.