Introduction
Si vous êtes un développeur Web ciblant le Web multi-appareil, vous devrez probablement tester vos sites et applications Web sur différents appareils et configurations. Les tests synchronisés peuvent être utiles à ce stade, et constituent un moyen efficace d'effectuer automatiquement la même interaction sur plusieurs appareils et navigateurs en même temps.
Les tests synchronisés peuvent aider à résoudre deux problèmes particulièrement chronophages:
- Synchronisez tous vos appareils avec l'URL que vous souhaitez tester. Les charger manuellement sur chaque appareil est donc hier, prend plus de temps et permet de passer plus facilement à côté de régressions.
- Synchronisation des interactions. Être capable de charger une page est idéal pour les tests visuels, mais pour les tests d'interaction, vous devez idéalement également pouvoir synchroniser les défilements, les clics et d'autres comportements.
Heureusement, si vous avez accès à certains de vos appareils cibles, il existe un certain nombre d'outils visant à améliorer le flux entre votre ordinateur de bureau et vos appareils mobiles. Dans cet article, nous allons nous intéresser à Ghostlab, à l'aperçu à distance, à Adobe Edge Inspect et à Grunt.
Outils
GhostLab (Mac)
Ghostlab est une application Mac commerciale (49 $) conçue pour synchroniser les tests des sites et des applications Web sur plusieurs appareils. Sa configuration minimale vous permet de synchroniser simultanément les éléments suivants:
- Clics
- Navigation
- Défilements
- Saisie de formulaires (ex. : formulaires de connexion, d'inscription)
Il est ainsi très simple de tester l'expérience utilisateur de bout en bout de votre site sur plusieurs appareils. Une fois que vous avez ouvert votre page dans un navigateur sur vos appareils, toute modification de la navigation (y compris les actualisations) entraîne l'actualisation instantanée de tous les autres appareils connectés. Ghostlab permet de surveiller les répertoires locaux. Cette actualisation se produit donc également lorsque vous enregistrez des modifications apportées à des fichiers locaux, tout en maintenant la synchronisation permanente.
La configuration de Ghostlab m'a semblé très simple. Pour commencer, téléchargez, installez et exécutez la version d'essai (ou la version complète si vous souhaitez effectuer un achat). Vous devrez ensuite connecter votre Mac et les appareils à tester au même réseau Wi-Fi pour qu'ils soient visibles.
Une fois Ghostlab en cours d'exécution, vous pouvez soit cliquer sur "+" pour ajouter une URL à tester, soit la faire glisser depuis la barre d'adresse de votre navigateur. Vous pouvez également faire glisser le dossier local que vous souhaitez tester dans la fenêtre principale. Une nouvelle entrée de site sera alors créée. Pour cet article, je teste une version en ligne de http://html5rocks.com. ;
Vous pouvez ensuite lancer un nouveau serveur Ghostlab en cliquant sur le bouton de lecture ">" à côté du nom de votre site. Cette opération démarre un nouveau serveur, disponible à une adresse IP spécifique à votre réseau (par exemple, http://192.168.21.43:8080).
Ici, j'ai connecté un Nexus 4 et pointé Chrome pour Android vers l'adresse IP que Ghostlab m'a donnée. C'est tout ce que j'ai à faire. Ghostlab ne nécessite pas l'installation d'un client dédié par appareil, comme d'autres solutions, et vous pouvez commencer les tests encore plus rapidement.
Tous les appareils que vous connectez à l'URL Ghostlab sont ajoutés à la liste des clients connectés dans la barre latérale située à droite de la fenêtre principale de Ghostlab. Double-cliquez sur le nom de l'appareil pour afficher des informations supplémentaires telles que la taille de l'écran, l'OS, etc. Vous devriez maintenant pouvoir tester la navigation et la synchronisation des clics. Waouh !
Ghostlab peut également afficher certaines statistiques sur les appareils connectés, telles que la chaîne UA, la largeur et la hauteur de la fenêtre d'affichage, la densité de pixels de l'appareil, le format, etc. Vous pouvez à tout moment modifier manuellement l'URL de base que vous inspectez en cliquant sur la roue dentée des paramètres à côté d'une entrée. Une fenêtre de configuration semblable à celle-ci s'ouvre:
Je peux maintenant sélectionner l'un de mes autres appareils connectés, cliquer sur différents liens vers HTML5Rocks. La navigation est synchronisée à la fois sur mon ordinateur de bureau Chrome (où j'ai saisi la même URL Ghostlab) et sur tous mes appareils.
Ce qui est encore mieux, c'est que Ghostlab propose une option qui vous permet de connecter par proxy tous les liens passant par le réseau. Ainsi, au lieu de cliquer sur http://192.168.21.43:8080/www.html5rocks.com, vous accédez à www.html5rocks.com/en/performance.http://192.168.21.43/www.htm5rocks.com/en/performance
Pour l'activer, cochez l'option "Load all content through Ghostlab" (Charger tout le contenu via Ghostlab) dans l'onglet "Content Chargement" (Chargement de contenu).
Démonstration:
Ghostlab peut charger un nombre illimité de sites ou de fenêtres sur n'importe quel navigateur compatible. Cela vous permet non seulement de tester votre site avec différentes résolutions, mais aussi de comprendre le comportement de votre code sur différents navigateurs et sur différentes plates-formes. C'est super !
Ghostlab vous permet de configurer la configuration de l'espace de travail de projet que vous prévisualisez et de spécifier si vous souhaitez surveiller et actualiser les modifications apportées au répertoire lorsqu'elles sont détectées. Cela signifie que les modifications entraînent l'actualisation de tous les clients connectés. Plus besoin d'actualisations manuelles !
Vous vous demandez peut-être en quoi Ghostlab peut vous aider. Ce n'est certainement pas un couteau suisse, mais il est également compatible avec l'inspection de code à distance sur les appareils connectés. Dans l'interface principale, si vous double-cliquez sur le nom d'un appareil, une option "debug" s'affiche. Elle lance une version des Outils pour les développeurs Chrome avec laquelle vous pouvez jouer.
Ghostlab rend cela possible via l'inspecteur Web à distance Weinre, qui vous permet de déboguer des scripts et d'ajuster les styles sur les appareils connectés. Comme pour le débogage à distance disponible pour Chrome pour Android, vous pouvez sélectionner des éléments, exécuter un profilage des performances et déboguer des scripts.
Dans l'ensemble, j'ai été impressionné par la rapidité avec laquelle j'ai pu utiliser Ghostlab pour effectuer des tests quotidiens sur différents appareils. Si vous êtes indépendant, vous pouvez trouver le coût de la licence commerciale un peu élevé (voir ci-dessous pour plus d'options). Dans les autres cas, je vous recommande Ghostlab.
Adobe Edge Inspect CC (Mac, Windows)
Adobe Edge Inspect fait partie du package d'abonnement Adobe Creative Cloud, mais est également disponible sous forme d'essai sans frais. Il vous permet de gérer plusieurs appareils iOS et Android avec Chrome (via l'extension Chrome Edge Inspector). Ainsi, si vous accédez à une URL spécifique, tous vos appareils connectés restent synchronisés.
Pour commencer, créez d'abord un compte Adobe Creative Cloud ou connectez-vous à un compte existant si vous en avez déjà un. Téléchargez et installez Edge Inspect à partir d'Adobe.com (disponible pour Mac et Windows pour le moment, mais pas pour Linux, désolé). Notez que la docs relative à Edge Inspect est utile.
Une fois installée, vous pouvez obtenir l'extension d'inspection Edge pour Chrome afin de pouvoir synchroniser la navigation entre les appareils connectés.
Vous devez également installer un client d'inspection Edge sur chaque appareil avec lequel vous souhaitez synchroniser les actions. Heureusement, les clients sont disponibles pour iOS, Android et Kindle.
Le processus d'installation étant terminé, nous pouvons maintenant commencer à inspecter nos pages. Vous devez vous assurer que tous vos appareils sont connectés au même réseau pour que cela fonctionne.
Démarrez Edge Inspect sur votre ordinateur, l'extension Edge Inspect dans Chrome, puis l'application sur vos appareils (voir ci-dessous):
Nous pouvons maintenant naviguer vers un site comme HTML5Rocks.com sur ordinateur et notre appareil mobile mènera automatiquement à la même page.
Dans l'extension, votre appareil s'affiche également avec le symbole <> à côté, comme dans la capture d'écran ci-dessous. Si vous cliquez dessus, une instance de Weinre s'ouvre, ce qui vous permet d'inspecter et de déboguer votre page.
Weinre est une console et une visionneuse DOM. Elle ne propose pas les fonctionnalités des outils pour les développeurs Chrome, telles que le débogage JavaScript, le profilage et la cascade d'annonces réseau. Bien qu'il s'agisse du minimum des outils pour les développeurs, il est utile pour vérifier l'intégrité des états DOM et JavaScript.
L'extension d'inspection Edge permet également de générer facilement des captures d'écran à partir d'appareils connectés. Utile pour tester la mise en page ou simplement pour obtenir des captures de votre page à partager.
Pour les développeurs qui paient déjà pour les sous-titres, Edge Inspect est une excellente solution. Toutefois, cela comporte quelques mises en garde, telles que l'installation d'un client dédié sur chaque appareil et un peu de travail de configuration supplémentaire que vous ne trouverez peut-être pas avec une solution alternative telle que Ghostlab.
Aperçu à distance (Mac, Windows, Linux)
Remote Preview est un outil Open Source dans lequel vous hébergez des pages et du contenu HTML que vous pouvez afficher sur plusieurs appareils.
L'aperçu à distance exécute un appel XHR toutes les 1 100 ms pour vérifier si une URL d'un fichier de configuration a été modifiée. Si c'est le cas, le script met à jour l'attribut src d'un iFrame chargé dans la page pour chaque appareil, en y chargeant la page. Si aucune modification n'est détectée, le script continue d'interroger jusqu'à ce qu'une modification soit effectuée.
Cette approche est idéale pour relier des appareils entre eux et pour modifier facilement une URL sur chacun d'eux. Pour commencer :
- Téléchargez l'aperçu à distance et déplacez tous les fichiers correspondants sur un serveur accessible localement. Il peut s’agir de Dropbox, d’un serveur de développement ou autre.
- Chargez "index.html" à partir de ce téléchargement sur tous les appareils que vous ciblez. Cette page servira de pilote et chargera la page que vous souhaitez tester à l'aide d'un iFrame.
- Modifiez le fichier "url.txt" (inclus dans le fichier téléchargé et diffusé sur votre serveur) en indiquant l'URL que vous souhaitez prévisualiser. Enregistrez ce fichier.
- L'aperçu à distance constatera que le fichier url.txt a été modifié et actualisera tous les appareils connectés pour charger votre URL.
Bien qu'il s'agisse d'une solution lo-fi, l'aperçu à distance est sans frais et fonctionne.
Grunt + Live-Reload (Mac, Windows, Linux)
Grunt (et Yeoman) sont des outils de ligne de commande utilisés pour échafaudage et compiler des projets en frontend. Si vous utilisez déjà ces outils et que vous avez configuré l'actualisation en temps réel, vous pouvez facilement mettre à jour votre workflow pour activer les tests inter-appareils. Chaque modification effectuée dans l'éditeur entraîne l'actualisation de l'un des appareils sur lesquels vous avez ouvert votre application locale.
Vous avez probablement l'habitude d'utiliser grunt server. Lorsqu'il est exécuté à partir du répertoire racine de votre projet, il surveille les modifications apportées à vos fichiers sources et actualise automatiquement la fenêtre du navigateur. C'est grâce à la tâche "grunt-contrib-watch" que nous exécutons sur le serveur.
Si vous avez utilisé Yeoman pour structurer votre projet, il a créé un fichier Gruntfile avec tout ce dont vous avez besoin pour effectuer l'actualisation en temps réel sur votre ordinateur de bureau. Pour qu'elle fonctionne sur plusieurs appareils, il vous suffit de modifier une propriété, à savoir hostname (sur votre ordinateur). Il doit être répertorié sous connect. Si vous remarquez que hostname est défini sur localhost, remplacez-le simplement par 0.0.0.0. Exécutez ensuite grunt server. Comme d'habitude, une nouvelle fenêtre s'ouvre et affiche un aperçu de votre page. L'URL ressemblera probablement à http://localhost:9000 (9000 correspond au port).
Lancez un nouvel onglet ou un nouvel onglet, puis utilisez ipconfig | grep inet pour découvrir l'adresse IP interne de votre système. Cette URL peut ressembler à ceci : 192.168.32.20. La dernière étape consiste à ouvrir un navigateur comme Chrome sur l'appareil avec lequel vous souhaitez synchroniser les Livereloads, puis à saisir cette adresse IP suivie du numéro de port précédent, par exemple 192.169.32.20:9000.
Et voilà ! L'actualisation en temps réel devrait maintenant entraîner l'actualisation des fichiers sources sur votre ordinateur, à la fois dans votre navigateur pour ordinateur et dans celui de votre appareil mobile. Parfait !
Yeoman propose également un générateur mobile qui facilite la configuration de ce workflow.
Emmet LiveStyle
Emmet LiveStyle est un plug-in de navigateur et d'éditeur qui permet de modifier le CSS en direct dans votre workflow de développement. Il est actuellement disponible pour Chrome, Safari et Sublime Text, et est compatible avec l'édition bidirectionnelle (d'éditeur vers navigateur et inversement).
Emmet LiveStyle ne force pas l'actualisation complète du navigateur lorsque vous apportez des modifications, mais transfère les modifications CSS via le protocole de débogage à distance des outils de développement. Cela signifie que vous pouvez voir les modifications apportées dans votre éditeur d'ordinateur de bureau dans n'importe quelle version connectée de Chrome, qu'il s'agisse de Chrome pour ordinateur de bureau ou de Chrome pour Android.
LiveStyle possède ce qu'il appelle le "mode multivue", idéal pour tester et modifier les conceptions réactives sur toutes les fenêtres et tous les appareils. En mode multivue, toutes les mises à jour de l'éditeur sont appliquées à toutes les fenêtres, tout comme les mises à jour des outils de développement pour la même page.
Une fois le package LiveStyle installé, procédez comme suit pour modifier le CSS en direct:
- Démarrer Sublime Text et ouvrir un fichier CSS dans un projet
- Lancez Chrome et accédez à la page contenant le CSS que vous souhaitez modifier.
- Ouvrez les outils de développement, puis accédez au panneau "LiveStyle". Cochez l'option "Enable LiveStyle" (Activer LiveStyle). Remarque: Les outils de développement doivent rester ouverts pendant votre session de modification en direct pour chaque fenêtre afin que les mises à jour de style soient appliquées.
- Lorsque cette option est activée, une liste de feuilles de style s'affiche à gauche et une liste de vos fichiers d'édition sur la droite. Sélectionnez le fichier de l'éditeur à associer au navigateur. Et voilà ! Le micro sur perche.
La liste des fichiers de l'éditeur est désormais automatiquement mise à jour lorsque vous modifiez, créez, ouvrez ou fermez des fichiers.
Conclusions
Les tests multi-appareils sont encore un domaine nouveau et en constante évolution, avec de nombreux nouveaux concurrents en cours de développement. Heureusement, il existe un certain nombre d'outils commerciaux sans frais pour assurer la compatibilité et les tests sur un grand nombre d'ensembles d'appareils.
Cela dit, le potentiel d'amélioration dans ce domaine est important, et nous vous encourageons à réfléchir à la façon dont les outils de test sur plusieurs appareils peuvent être améliorés. Tout ce qui réduit le temps de configuration et améliore votre workflow inter-appareil est gagnant.
Problèmes
Les plus gros problèmes que j'ai rencontrés lors des tests avec ces outils étaient peut-être les appareils qui dormaient régulièrement. Ce n'est pas une rupture, mais cela devient ennuyeux au bout d'un moment. Dans la mesure du possible, nous vous recommandons de désactiver la mise en veille de vos appareils. Toutefois, n'oubliez pas que cela peut décharger votre batterie si vous n'êtes pas toujours branché.
Je n'ai pas personnellement rencontré de problème majeur avec GhostLab. À 49 $, certains peuvent trouver le prix un peu élevé. Toutefois, gardez à l'esprit que si vous l'utilisez régulièrement, il sera plus ou moins rentabilisé. L'un des aspects les plus intéressants de la configuration était de ne pas avoir à se soucier de l'installation et de la gestion d'un client par appareil cible. La même URL a fonctionné partout.
Avec Adobe Edge Inspect, j'ai trouvé qu'il était un peu pénible d'installer et d'utiliser des clients spécifiques sur chaque appareil. J'ai également constaté qu'il n'actualisait pas systématiquement tous les clients connectés, ce qui signifie que je devais le faire moi-même à partir de l'extension Chrome. Elle nécessite également un abonnement à Creative Cloud et se limite au chargement de sites dans le client plutôt que dans un navigateur sélectionné sur vos appareils. Cela peut limiter votre capacité à effectuer des tests avec précision.
L'aperçu à distance a fonctionné comme prévu, mais il est extrêmement léger. Cela signifie que pour autre chose que l'actualisation de votre site sur tous les appareils, vous aurez besoin d'une option d'outils plus avancée. Par exemple, elle ne synchronise pas les clics ou les défilements.
Recommandations
Si vous recherchez une solution multiplate-forme sans frais pour commencer, nous vous recommandons d'utiliser l'aperçu à distance. Pour ceux qui travaillent dans une entreprise à la recherche d'une solution payante, GhostLab a toujours été excellent par rapport à mon expérience, mais n'est disponible que pour Mac. Pour les utilisateurs de Windows, Adobe Edge Inspect est la solution la plus adaptée et, sans quelques particularités, permet généralement de faire le travail.
Grunt et LiveStyle sont également parfaits pour améliorer l'itération en direct pendant le développement.