Share
J'ai beaucoup écrit sur les solutions de test de navigateur qui tentaient d'aider à identifier des techniques et des outils facilitant le développement inter-navigateurs. Mon dernier article sur le sujet portait sur l'utilisation de BrowserStack pour tester un nombre quelconque de navigateurs à partir d'un seul outil central. votre propre navigateur.
À l'époque, j'étais sur un PC Windows. Il était donc un peu plus facile de tester plusieurs navigateurs et les outils de test étaient principalement complémentaires à mon travail. Maintenant que je suis sous OS X, le besoin d'outils pour compléter mes stratégies de test est encore plus important, notamment en raison du manque d'Internet Explorer sur le système d'exploitation..
Je suis un peu collant pour ce que j'installe sur mes ordinateurs et je préfère les outils en ligne lorsqu'ils sont disponibles. Je suis également toujours à la recherche de nouveaux outils facilitant les tests entre navigateurs. J'ai donc décidé de lancer CrossBrowserTesting.com. Je vais passer en revue certaines des fonctionnalités clés du service et la manière de l'exploiter pour améliorer vos capacités de test..
Tout d’abord, mentionnons que, comme tous les services fiables de cet espace, CrossBrowserTesting.com facture des frais mensuels. Cela ne m'étonne pas du tout, car au final, ils ont une infrastructure à soutenir et bien, cela coûte de l'argent. Leur structure de tarification est basée sur le nombre de minutes que vous souhaitez utiliser sur une base mensuelle, mais avec une particularité unique en ce sens qu'elles vous permettent de cumuler un certain nombre de minutes, mois par mois. Donc, si vous n'utilisez pas toutes vos minutes, vous pouvez les reporter pour le mois prochain..
Sur le service lui-même. Deux types de services sont importants pour moi dans ce type de services. Ceux-ci sont:
Tous ces éléments sont importants car ils vous fournissent la plus grande surface de test sur plusieurs appareils. Mais pour être honnête, sans la prise en charge des outils de débogage (tels que Chrome DevTools, IE F12 Tools, etc.), un service comme celui-ci serait convaincant et légèrement supérieur à un service de capture d'écran. Et être capable de tester localement est une nécessité évidente pour vous permettre de tester de manière interactive avant de déployer en stockage intermédiaire ou en production. Donc, ce critère est important à considérer.
La première chose que j'ai remarquée à propos de ce service est son incroyable étendue de prise en charge de facteurs de forme et de navigateur. Tous les principaux systèmes d'exploitation sont couverts (y compris Ubuntu) et chaque version de système d'exploitation contient une liste assez complète des versions de navigateur prises en charge à des fins de test..
En outre, les appareils mobiles et les navigateurs prennent en charge de manière étendue les versions antérieures et plus modernes d’Android, iOS, Blackberry Bold et Windows Phone 8. Ce qui est intéressant (et vraiment bénéfique) est que, pour certaines versions d’Android, elles vous permettent de: tester contre des navigateurs concurrents tels que Firefox Mobile, Maxthon et Opera.
Si vous avez utilisé BrowserStack ou un service similaire, vous vous sentirez comme à la maison sur CrossBrowserTesting.com. L’expérience utilisateur correspond très étroitement à ce que j’ai vu auparavant, qui rendait la tâche assez simple. Un tableau de bord vous donne initialement accès aux principales fonctionnalités. Ceux-ci inclus:
Les tests en direct du navigateur sont ce qui m'intéresse le plus. Pour moi, je dois m'assurer que le rendu est cohérent. La première chose que j'ai faite est de faire un test de base pour voir si un site rendra le même rendu dans mon navigateur virtuel. comme dans mon navigateur local. Pour imiter mes paramètres locaux, j'ai choisi de démarrer la session dans Mavericks, sous la version stable la plus récente de Chrome:
Une chose à noter est que dans le formulaire de sélection du système d'exploitation / du navigateur, les options de navigateur disponibles pour cette version de système d'exploitation spécifique sont les suivantes:
Je suis allé sur le site Web de GNC parce que, eh bien, je suis un féru de fitness et ils ont aussi beaucoup de points interactifs, tels que les menus survol basés sur JavaScript et les panneaux de fonctions cyclistes. Je pensais que c'était un bon test pour voir si le service pouvait gérer toutes les interactions.
En regardant les deux captures d'écran, vous pouvez voir que le rendu de Chrome sur Mavericks sur les deux systèmes est exactement le même. C’est une bonne chose, bien que voir Chrome sur Mavericks dans Chrome sur Mavericks soit un peu surprenant. Depuis n'importe qui?
Machine locale
Navigateur virtuel distant
Une fois votre session en cours, vous pouvez modifier à tout moment la version de votre système d’exploitation et de votre navigateur en cliquant sur le bouton Changer la configuration bouton qui affiche le panneau avec les choix déroulants. Notez que le fait de changer le système d'exploitation ou le navigateur rechargera votre session, mais il sera certainement préférable de déclencher plusieurs machines virtuelles, en particulier pour les révisions superficielles de pages..
Obtenir une interface utilisateur de base était génial, mais un test plus important consiste à voir comment le site répond aux interactions. Permettez-moi de commencer par dire que je n'ai pas trouvé de service comme celui-ci offrant une réponse instantanée. Il y aura toujours être à la traîne car ces navigateurs sont virtualisés. L'essentiel est de garantir que l'interaction normale, telle que le survol d'un menu ou le contrôle de contrôles de l'interface utilisateur (comme un panneau déroulant), se déroule comme prévu (bien qu'un peu plus lent). Par exemple, le site de GNC a un système de menu déroulant qui s’agrandit lorsque vous survolez une option de menu. Notez que le survol étendra le menu et qu’il est tout aussi important de me donner la possibilité d’explorer.
Cette interactivité est ce qui rend ces services si précieux. Les jours où vous deviez compter sur des services de capture d'écran et une tonne de machines virtuelles pour voir comment votre site restitue sur une tonne de navigateurs ont disparu..
Bonne question. Les outils de développement basés sur un navigateur ont vraiment bien progressé et nous en dépendons tous les jours. Heureusement, CrossBrowserTesting.com a inclus les outils de débogage par défaut avec chaque navigateur nous donnant accès à Chrome DevTools, aux outils de développement IE F12 et aux outils de développement Web de Firefox, ainsi qu'à Firebug pour les anciennes versions du navigateur. Notez ici que j'ai activé les outils IE F12 dans IE11 sous Windows 7.
Les outils sont complètement fonctionnels, ce qui me permet d’examiner le balisage et la structure DOM de la page, ainsi que de définir les styles et les modifications de texte, comme vous le feriez sur votre PC local. Vous pouvez voir ici comment je peux mettre à jour le code JavaScript intégré sur le site:
Cela se traduit par la possibilité d'utiliser les débogueurs pour effectuer un travail de débogage avancé, comme le débogage de script, quel que soit le navigateur ou la version du navigateur..
Une des choses qui me préoccupait était de savoir si les outils afficheraient avec précision les temps de chargement des pages via les panneaux de surveillance du trafic réseau et lors de mes tests, ils sembleraient être cohérents avec ce que j’ai vu localement. Cela signifie que je peux être certain, dans une certaine mesure, que les temps de chargement seront plus ou moins identiques (bien entendu, en tenant compte des problèmes de réseau)..
La seule chose qui, à mon avis, serait très difficile à mesurer est la performance des pages via la nouvelle suite de profileurs de performances incluse dans Chrome et Internet Explorer. Une grande partie de ces données est directement affectée par certains aspects de votre ordinateur, en particulier lorsque le rendu est optimisé par le processeur graphique. Tester ceci sur des navigateurs virtuels ou des machines virtuelles n'est tout simplement pas du monde réel, donc je ne le recommanderais pas. Si vous êtes un développeur interactif (jeux), il est préférable de tester sur votre propre appareil pour mieux comprendre les performances..
Alors que je commence à me concentrer de plus en plus sur la téléphonie mobile, la nécessité de tester plusieurs systèmes d'exploitation mobiles et différents facteurs de forme devient une priorité absolue. Malheureusement, à moins d'obtenir un très gros héritage, de remporter le loto ou de trouver un sponsor aimant, la construction d'un laboratoire complet pour appareils mobiles ne fait pas partie des éléments clés. Et au rythme où vont les choses, les choses ne font que s'aggraver car les fabricants continuent de repousser les limites des navigateurs mobiles et de la taille des appareils..
CrossBrowserTesting.com offre la possibilité de tester les principaux systèmes d’exploitation mobiles en simulant la plupart des appareils mobiles populaires tels que les iPad, les iPhones, les Nexus 7, etc. Ce n'est certainement pas une liste exhaustive d'appareils mobiles et je suppose que cela est destiné à s'attaquer aux systèmes d'exploitation et aux appareils les plus modernes disponibles.
Le processus de test est identique à celui que nous avons effectué pour les navigateurs de bureau, à la différence que le rendu correspondra à la taille du périphérique mobile que vous avez sélectionné:
Là encore, le service utilise des simulateurs pour vous permettre de tester le rendu de votre site sur un appareil mobile. Gardez toutefois à l'esprit que, même si les simulateurs sont efficaces, il est toujours préférable de tester si possible sur un appareil réel..
De nouveaux appareils sortent tout le temps et je ne m'attendrais pas à ce que chaque facteur de forme soit présent ici. Je pense qu'un bon ajout serait de permettre à un utilisateur du service de pouvoir définir la taille de la fenêtre d'affichage au lieu de se limiter aux résolutions d'écran par défaut. Cela offrirait également plus de flexibilité pour tester des sites réactifs..
Avant que des services interactifs tels que CrossBrowserTesting.com soient disponibles, les services de capture d'écran étaient reconnus comme l'un des moyens les plus rapides de voir comment votre site était rendu dans plusieurs navigateurs. Bien qu'ils soient un peu dépassés, ils sont toujours utiles et assez intéressants. Je constate que la plupart de ces services de test de navigateur intègrent la capture de captures d'écran dans le cadre de leurs offres. Il semble donc que cette pratique ait connu une certaine renaissance, probablement en raison du nombre croissant de versions de navigateurs, d'appareils et de facteurs de forme que nous devons prendre en compte..
Utiliser le service est simple et aussi simple que de saisir une URL, de sélectionner les navigateurs sur lesquels vous souhaitez obtenir des captures d’écran et de cliquer sur le bouton Prendre des captures d'écran bouton:
La bonne chose à propos de cela est qu'il vous permet de choisir autant de combinaisons dispositif / système d'exploitation / navigateur que vous le souhaitez, ainsi que de définir la résolution par cible. Cela génère une série d'instantanés que vous pouvez examiner:
En cliquant sur chaque capture d'écran, une image plus grande vous permet d'obtenir une vue détaillée du rendu..
Quelques points à garder à l’esprit: Il faut un peu de temps pour que les captures d’écran soient capturées et rendues. Donc, plus vous sélectionnez de navigateurs, plus vous attendez. Contrairement aux autres services où vous attendez votre tour dans une file d'attente, cette attente semble être simplement associée au temps de traitement. Vous payez pour le service, je ne peux donc pas imaginer une file d'attente semblable à BrowserShots.org. N'oubliez pas non plus que certaines de ces captures d'écran sont invariablement dérivées de simulateurs et, comme je l'ai déjà mentionné, les simulateurs ne rendent pas toujours la même chose qu'un vrai navigateur. Enfin, la capture d'écran concerne une page spécifique et non l'ensemble du site..
Néanmoins, le fait que je puisse assez rapidement avoir une idée du rendu de mon site sur autant de périphériques m'aide à explorer en détail des combinaisons de navigateurs spécifiques qui nécessitent une attention particulière..
Et c'est là qu'intervient une fonctionnalité vraiment intéressante. Le service offre la possibilité de comparer les dispositions côte à côte afin que vous puissiez voir les différences de rendu entre les différents navigateurs:
Comme vous pouvez le voir sur la capture d'écran, cela va encore plus loin en détaillant les différences et en créant une superposition jaune transparente sur chaque panneau pour mettre en évidence les différences réelles. Je suis sûr que vous pouvez comprendre la frustration ressentie par de nombreux développeurs de découvrir de légères différences d’agencement ultérieurement. Cela aide à avancer cela pendant le processus de test. Et vous pouvez faire défiler et comparer plusieurs scénarios en cliquant sur le bouton Prev et Suivant boutons.
La véritable valeur d'un tel service est de faciliter vos efforts de débogage locaux. Le simple fait de vous permettre de tester des sites accessibles au public offre une valeur aussi limitée en termes de stratégie de test globale. CrossBrowserTesting.com offre la possibilité de tester vos fichiers locaux sur leurs serveurs distants à l'aide d'un applet de proxy basé sur Java ou de la ligne de commande, en utilisant à nouveau Java pour créer un proxy. Ceci est similaire aux autres services et est nécessaire pour établir la connexion entre votre PC local et les serveurs distants et vous permettre également de contourner les pare-feu que vous pourriez avoir dans votre entreprise. Une fois la connexion établie, vous pouvez tester les deux fichiers locaux via un accès direct ou via une URL à partir de votre serveur Web local..
L'équipe de CrossBrowserTesting.com a créé une vidéo qui vous donne une bonne explication et une démonstration du fonctionnement de cette partie du service..
Ce serait vraiment bien si nous n'avions pas besoin de ces services. Cela signifierait que chaque navigateur restitué comme prévu sur tous les appareils les prenant en charge. Malheureusement, nous avons encore un peu de fragmentation de navigateur et chaque version de navigateur a tendance à avoir ses propres bizarreries. Ainsi, des services tels que CrossBrowserTesting.com offrent une réelle valeur ajoutée dans la rationalisation des tests multi-navigateurs..
Globalement, je pense que le service est très bon mais non sans quelques bizarreries. Lors des tests en direct, certains verrouillages intermittents peuvent être attribués à Flash. Lors de certaines sessions, le fait de voir un certain nombre d'icônes de navigateur sur le dock du système d'exploitation me laissait perplexe quant à la raison de leur présence lorsque j'ai choisi une cible spécifique. navigateur. Ces problèmes ne m'ont pas forcément empêché de faire ce que je voulais faire (tester), mais il me semblait que les choses devaient être un peu arrangées.
La fonctionnalité de comparaison de la mise en page, cependant, était assez chaude et je pouvais me voir utiliser régulièrement.
Ce que je constate, c’est que le prix pourrait être un facteur de succès important pour la gamme de services qu’ils offrent. CrossBrowserTesting.com semble s'être fixé un prix très compétitif en incorporant des tests en direct, des captures d'écran et des tests locaux dans un coût mensuel fixe, par opposition à une tarification distincte pour des services spécifiques. C'est très attrayant, surtout pour les développeurs soucieux de leur budget.
Cependant, le facteur déterminant sera le temps nécessaire au test. Par expérience, deux heures et demie (le temps alloué au plan de base) semblent un peu limitées, surtout si l’on tient compte de la latence du rendu. Encore une fois, votre kilométrage peut varier, mais vous devez en tenir compte..
Accentsconagua