Share
Le test du navigateur est le fléau de notre existence. Eh bien, c'est un peu exagéré, mais pas beaucoup. Les multiples versions de navigateur et leur fragmentation peuvent rendre difficile l'obtention d'une bonne couverture de test pour vos sites, en particulier lorsque vous prenez en compte les différents systèmes d'exploitation utilisés par les développeurs pour créer.
Au fil des ans, nous avons eu recours à divers outils pour nous aider à relever ce défi, notamment des machines virtuelles, des outils permettant de simuler des navigateurs et même de disposer de plusieurs périphériques. Ce serait formidable s'il existait un moyen de créer une fenêtre d'affichage qui nous permettait de tester facilement tous les principaux navigateurs et leurs versions individuelles sans passer à travers les étapes..
BrowserStack.com a pour objectif de le proposer via son service de virtualisation basé sur un navigateur. Dans cet article, nous allons décrire le service et expliquer comment il permet de résoudre le problème des tests multi-navigateurs..
J'ai mentionné que BrowserStack offre un service de virtualisation. Ce à quoi la plupart des développeurs pensent quand ils entendent parler de "machines virtuelles" et non de manière affectueuse. Les machines virtuelles, bien que certainement utiles, ont besoin d'un espace disque et de ressources précieux, ce que la plupart des développeurs répugnent à devoir les exécuter. BrowserStack adopte une approche différente en utilisant Adobe Flash pour fournir un navigateur virtualisé au sein de votre propre navigateur. Vous n'êtes pas obligé d'installer quoi que ce soit et vous obtenez l'accès à de vrais navigateurs virtuels dans le cloud..
Pour vous donner un exemple, en utilisant le service, j'ai ouvert la page principale de Nettuts + via Safari 5.1 sur OSX Lion avec Internet Explorer 11.
C’est une fonctionnalité assez puissante et l’essentiel est que tout se fasse dans votre navigateur. Et bien sûr, vous n'êtes pas limité dans le choix du système d'exploitation ou des versions de navigateur. BrowserStack offre une virtulisation pour:
C'est vrai, ils offrent la virtualisation de navigateur mobile. Nous sommes dans un monde mobile, alors j'attendais rien de moins.
En fonction du système d'exploitation que vous choisissez, BrowserStack propose un certain nombre de navigateurs pris en charge pour le système d'exploitation spécifique, notamment les versions bêta et nightlies..
Oui, même le redoutable IE6 est disponible. Il ne peut pas mourir assez tôt.
Outre les options du 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 mises en page réactives. Sachez simplement que BrowserStack propose également un service complémentaire pour traiter les conceptions réactives, qui génère des captures d'écran pour différents appareils et tailles..
Le point principal est qu’il existe une vaste gamme de tests sans qu'il soit nécessaire d’installer quoi que ce soit pour l’utiliser..
La première chose à faire est de vous inscrire au service. BrowserStack est un service payant et je pense que le prix est très raisonnable pour la fonctionnalité que vous obtenez et oui, il y a beaucoup plus de fonctionnalités.
Une fois que vous vous êtes inscrit et connecté, vous serez sur le tableau de bord qui offre une boîte de dialogue de démarrage rapide..
Cela vous permet d'entrer facilement l'URL que vous souhaitez tester et, via les listes déroulantes, le système d'exploitation cible et la version du navigateur. Vous pouvez affiner les choses via le panneau de gauche qui offre des choix de résolution d’écran et une simulation de la vitesse de rendu des pages..
En cliquant sur Démarrer, vous démarrez le processus d'établissement de la connexion via Flash au serveur distant et le rendu du navigateur virtualisé:
Ce que je voudrais souligner ici, c'est qu'il ne s'agit pas d'une carte de capture d'écran ou d'une fausse session. Vous avez un accès complet aux fonctionnalités de la page Web, notamment les menus, les boutons, etc. Cela inclut également les outils de développement fournis avec les navigateurs. Oui, vous avez bien lu. Vous avez accès à des outils tels que les outils de développement Web Firefox, les outils IE F12 et les outils de développement Chrome. Dans cette capture d'écran, je suis dans une session utilisant Firefox sur Mountain Lion et utilisant les outils de développement Web de Firefox..
Ainsi, non seulement vous pouvez voir le rendu de vos pages dans les navigateurs, mais vous pouvez également utiliser les outils existants pour déboguer des problèmes courants. Très sympa!
Il est vraiment génial de pouvoir consulter vos pages une fois qu'elles sont accessibles au public, mais dans la plupart des cas, vous allez développer votre site localement et vouloir vérifier vos pages avant de passer votre code à la production..
BrowserStack a résolu ce problème en fournissant une fonctionnalité de tunnelage qui vous permet de tester vos pages locales à distance. Il utilise un applet Java pour agir en tant que proxy entre votre annuaire ou votre serveur Web et le service basé sur un nuage. Oui, cela signifie que vous aurez besoin d’installer Java et bien que j’ai tendance à ne pas recommander l’installation de plug-ins de navigateur Java, dans ce cas, c’est une nécessité et qui en vaut la peine. BrowserStack n’installe cependant pas de plug-in. Il sert une applet qui exploite le plug-in de navigateur pour applets de Java. Assurez-vous simplement de désactiver les plug-ins du navigateur une fois les tests terminés. Il convient de noter que lors de mes tests sous Windows 8.1, j'avais besoin de la version 32 bits de JRE Java, car celle-ci ne semblait pas fonctionner et les plug-ins de navigateur ne seraient pas installés dans Firefox ou Chrome. Pour obtenir la version 32 bits, consultez la page de téléchargement manuel d’Oracle. Sachez également que Firefox n'active pas le plug-in par défaut. Vous devrez donc l'activer..
En regardant le panneau de gauche sur le tableau de bord BrowserStack, vous devriez voir une section intitulée "Test local" avec deux boutons étiquetés "Tunnel Web" et "Ligne de commande".
L'option "Web Tunnel" exploite l'applet Java pour établir le tunnel entre votre ordinateur et le service distant. Cela peut être fait au niveau du système de fichiers où vous sélectionnez un répertoire spécifique avec vos pages ou une URL de serveur local (exemple: localhost). Pour illustrer cela, j'ai installé WAMP sur mon PC afin de disposer d'un serveur Web local à utiliser avec BrowserStack. WAMP installe également par défaut phpMyAdmin qui est accessible via:
http: // localhost: 81 / phpmyadmin /
J'utilise le port 81 pour ne pas entrer en conflit avec un autre processus que j'utilise. En cliquant sur le "Tunnel Web"option ouvre la boîte de dialogue suivante vous informant que l’applet est en cours de chargement:
Comme Oracle s’est efforcé de sécuriser Java, en particulier les plug-ins de navigateur, vous devez être invité à exécuter l’applet. Mon conseil est de ne jamais permettre à aucune applet non signée d'un site Web de s'exécuter sur votre PC, aussi je règle toujours mon paramètre de sécurité Java sur "Haute". Il y a aussi une option appelée"Très haut"mais en utilisant cela empêchera l’applet BrowserStack de se connecter à distance.
Une fois que l'applet est en cours d'exécution, une boîte de dialogue s'affiche vous demandant votre adresse de serveur local ou votre dossier..
Comme vous pouvez le constater, j'ai entré mon URL locale et le numéro de port a été détecté. Vous pouvez également utiliser SSL si vous en avez besoin. De là, je lance la connexion et je peux voir ma copie locale de phpMyAdmin sur le serveur distant de BrowserStack..
Maintenant, si vous ne voulez pas utiliser l'applet Java dans le navigateur ou si cela ne fonctionne pas pour une raison quelconque, vous pouvez utiliser l'option "Ligne de commande" qui nécessite le téléchargement du fichier. .pot Fichier appelé via la ligne de commande pour établir la connexion:
java -jar BrowserStackTunnel.jarlocalhost, 3000,0
le
Personnellement, je préfère l'approche applet car elle est extrêmement simple. Vous pouvez obtenir beaucoup plus de détails sur les tests locaux de BrowserStack sur cette page..
Vous conviendrez avec moi que, du point de vue des tests de navigateur, il s’agit d’un service très intéressant qui facilite considérablement les tests entre navigateurs, même au niveau local. Et c'est certainement une alternative viable aux machines virtuelles pour ceux qui manquent de ressources système.
Mais BrowserStack offre bien plus, y compris des tests fonctionnels automatisés, une capture d'écran de navigateur et un service de test de conception réactif qui vous permet de voir comment votre site sera présenté sur plusieurs appareils (pas seulement les navigateurs)..
C'est l'un de ces services qui, en tant que développeur professionnel, vaut certainement l'investissement.
Accentsconagua