Comment rendre les tests multinavigateurs plus efficaces avec LambdaTest

Que vous construisiez un nouveau site ou que vous en gériez un en direct, vous ne pouvez pas vous permettre de faire des changements sans un processus de test multi-navigateur et un outil pour faire le gros du travail pour vous. La large gamme de tests de LambdaTest est la réponse. Des tests multi-navigateurs entièrement automatisés aux tâches semi-automatisées, nous allons explorer un moyen beaucoup plus efficace d'examiner vos sites Web et toutes leurs itérations de navigateur pour détecter les erreurs.

Avant que les consommateurs ne s'assoient devant des appareils mobiles pendant des heures chaque jour, il y avait de nombreux navigateurs et systèmes d'exploitation auxquels les concepteurs Web devaient faire face. Donc, ce n'est pas comme si le concept des tests multi-navigateurs était nouveau.

Parce que les navigateurs Web ne rendent pas toujours les sites Web de la même manière ou ne traitent pas les données de la manière initialement prévue, les tests multi-navigateurs sont depuis longtemps une partie importante de conception et développement web. C'est le seul moyen de s'assurer que ce qui est construit en arrière-plan est correctement implémenté sur le front-end d'un site Web.

Mais cela peut rapidement devenir une entreprise fastidieuse si vous essayez d'examiner chaque navigateur, système d'exploitation et appareil par vous-même.

Heureusement, nous vivons à une époque où l'automatisation est reine et nous avons maintenant une meilleure façon d'effectuer des tests inter-navigateurs (et plus fréquemment aussi). Parlons donc des raisons pour lesquelles vous devez automatiser ce processus et de la manière de le faire à l'aide de LambdaTest .

Un moyen amélioré de gérer les tests de navigateur croisé

Lorsque vous vous apprêtez à construire un site Web pour vos utilisateurs, vous expliquez qui ils sont, ce dont ils ont besoin et à quoi ils répondront tout au long de leur parcours. Mais comment et quand gérez-vous les différents résultats que vos utilisateurs pourraient rencontrer grâce à leur choix de navigateur?

Une conception réactive peut aider à atténuer certaines de ces différences, mais ce n'est pas un remède universel pour l'affichage inhérent

Pour vous assurer que le code et les choix de conception que vous avez faits pour un site Web n'auront pas d'impact négatif sur les utilisateurs, les tests multi-navigateurs tout au long du processus de conception Web sont essentiels.

Et si vous vous voulez vous assurer que des tests approfondis sur plusieurs navigateurs n'ont pas d'impact négatif sur votre résultat puis l'automatiser est la voie à suivre.

Voici quelques conseils pour vous aider à intégrer des tests automatisés dans votre processus:

Familiarisez-vous avec les différences de prise en charge du navigateur

Ceci est un résumé de Statista des meilleurs navigateurs Web par part de marché:

Maintenant, le problème ici n'est pas nécessairement que chaque navigateur traite différemment les données de votre site Web. Ce qui bouge vraiment, c'est le moteur qui alimente le navigateur en arrière-plan.

Par exemple, ce sont les moteurs que les principaux navigateurs Web utilisent:

• Chrome utilise Blink + V8;
• Edge utilise Blink;
• Firefox utilise Quantum / Gecko + SpiderMonkey;
• Safari utilise WebKit + Nitro;
• Internet Explorer utilise Trident + Chakra.

Beaucoup de ces moteurs rendent le même morceau de code différemment. Par exemple, regardez cette expérience créée par LambdaTest :

La balise HTML de date est l'une des balises les plus utilisées et, pourtant, Chrome, Firefox et Opera sont les seuls à avoir pleinement le soutenir – comme indiqué dans la barre bleue supérieure au-dessus de la zone de test. Même alors, ces navigateurs offrent des expériences utilisateur très différentes.

Par exemple, l'image ci-dessus vous montre à quoi ressemble la balise de date dans Chrome. Voici comment le même code s'affiche dans Edge:

Non seulement le style et la taille des polices sont légèrement différents, mais la façon dont la liste déroulante de sélection de la date apparaît est très différente. [19659005] Donc, avant de commencer à penser aux tests multi-navigateurs et à combler les lacunes entre ces navigateurs et moteurs, familiarisez-vous avec les principales différences.

Un outil que vous pouvez utiliser comme référence est Puis-je utiliser… .

Vous pouvez rechercher des écarts dans les composants et les technologies les plus couramment utilisés. Prenons, par exemple, la disposition de la grille CSS:

La plupart des principaux navigateurs (et certains moins importants) prennent en charge la disposition de la grille CSS (ceux en vert). Internet Explorer (en bleu) fournit une prise en charge partielle et Opera Mini (en violet) n'en fournit aucune.

Ou disons que vous essayez d'utiliser plus d'images WebP dans vos conceptions car elles sont bien meilleures pour les performances et la résolution. Voici ce que je peux utiliser… nous parle de la prise en charge du navigateur pour le format d'image:

Les versions les plus récentes d'Internet Explorer et de Safari (Web et mobile) ne pas fournissent soutien pour elle. Donc, si vous avez l'intention de concevoir avec des images WebP, vous devrez créer une solution de contournement pour ces navigateurs.

Conclusion: prenez le temps de comprendre le type de contenu ou de code pris en charge, afin de pouvoir créer plus efficacement un site Web dès le départ.

Astuce de pro: créer une matrice de navigateur pour référence

Vous pouvez voir pourquoi il est si important de comprendre les différences entre les rendus et la prise en charge du navigateur. Plus vous vous familiariserez avec eux, moins vous aurez à faire de brouillage lorsqu'une nouvelle anomalie sera découverte.

Pour vous faciliter la tâche, il serait bon de créer une matrice de navigateur pour toutes ces différences maintenant.

En voici une simple que LambdaTest a conçue:

Je recommande de créer le vôtre. Vous pouvez exploiter les données de Puis-je utiliser… et documenter les problèmes de support que vous avez rencontrés dans vos propres projets.

Cela vous aidera également à définir des priorités lors de la conception. Par exemple, vous pouvez décider quelles fonctionnalités non prises en charge valent la peine d'être utilisées en fonction du type d'impact qu'elles ont sur les objectifs de votre site Web.

Il serait également utile de disposer de cette feuille de calcul une fois qu'un site sera en ligne. À l'aide des données de Google Analytics, vous pouvez commencer à hiérarchiser les choix de conception en fonction des navigateurs Web que vos utilisateurs utilisent principalement.

Procurez-vous un outil de test multi-navigateur qui fait tout

Peu importe la taille des sites Web tu construis. Tous les sites accessibles au public bénéficieraient d'un outil de test multi-navigateur automatisé.

Ce qui est particulièrement intéressant dans l'automatisation avec LambdaTest, c'est qu'il offre à ses utilisateurs des options. Des tests entièrement automatisés qui vérifient l'impact de votre code sur le frontend aux tâches semi-automatisées qui facilitent le travail de gestion des mises à jour et des bogues, il existe de nombreuses façons d'automatiser et d'optimiser votre processus.

Voici certains des faits saillants que vous devez connaître:

Test en temps réel: Idéal pour le suivi des bogues

Le test en temps réel est utile lorsqu'il y a quelque chose de ciblé que vous devez examiner de vos propres yeux. Par exemple, si vous avez envoyé un design au client pour examen et qu'il insiste sur le fait que quelque chose ne va pas bien de son côté, vous pouvez consulter le site Web en utilisant sa configuration exacte. Il serait également utile pour confirmer les bogues et déterminer les navigateurs concernés.

Dans le panneau Test en temps réel vous entrerez l'URL de votre site, puis choisirez vos spécifications d'affichage.

Il vous permet d'être très spécifique, en choisissant parmi:

• Mac vs Android,
• Type d'appareil,
• Version d'appareil,
• Système d'exploitation,
• Navigateur Web.

Une fois le test commencé, voici ce que vous verrez (en fonction du type d'appareil que vous choisissez, bien sûr):

Ci-dessus, vous pouvez voir la première option dans la barre latérale qui vous permet de changer rapidement la vue de l'appareil. De cette façon, si vous avez quelques vues de navigateur sur lesquelles vous essayez de comparer ou de vérifier des erreurs, vous n'avez pas à revenir en arrière.

En ce qui concerne les autres options de test en temps réel, la plupart d'entre elles sont utiles pour identifier et signaler les problèmes dans le contexte où ils se sont réellement produits.

Dans l'outil de suivi des bogues ci-dessus, vous pouvez localiser un endroit de la page où une erreur s'est produite. Vous pouvez ensuite le marquer à l'aide d'un certain nombre d'outils dans la barre latérale.

Les utilisateurs peuvent également utiliser les options de capture d'écran et de vidéo pour capturer des erreurs plus importantes, en particulier celles qui se produisent lorsque vous vous déplacez sur le site ou interagissez avec le site.

Capture d'écran Test: Idéal pour accélérer les tests manuels

Il n'y a aucune raison que vous ou votre QA ne puissiez toujours pas consulter votre site Web par vous-même. Cela dit, pourquoi faire en sorte que le processus prenne plus de temps que nécessaire? Vous pouvez laisser les outils de test de l'interface utilisateur visuelle de LambdaTest accélérer le processus.

L'outil Capture d'écran, par exemple, vous permet de sélectionner simultanément tous les appareils et navigateurs que vous souhaitez comparer:

Une fois le test terminé, vous aurez toutes les captures d'écran demandées au même endroit:

LambdaTest ) ( Grand aperçu )

Vous pouvez les voir ici, les télécharger sur votre ordinateur ou les partager avec d'autres.

Vous pouvez également organiser vos captures d'écran par projet et version / tour. De cette façon, si vous travaillez sur plusieurs séries de révisions et que vous souhaitez vous référer à une version précédente, toutes les copies de l'itération précédente existent ici. (Vous pouvez également utiliser des captures d'écran dans les tests de régression que j'expliquerai sous peu.)

Test réactif: Idéal pour confirmer une expérience mobile avant tout

Si vous avez besoin de voir plus qu'un simple capture d'écran statique, les tests réactifs vous permettent couvert. Tout ce que vous devez faire est de sélectionner le système d'exploitation et les appareils que vous souhaitez comparer et l'outil remplira les versions de travail complètes du site dans le navigateur mobile:

Vous pouvez revoir la conception et l'interactivité de votre site Web non seulement dans tous les navigateurs possibles, mais vous pouvez également modifier l'orientation du site (au cas où des problèmes apparaissent quand il passe en mode paysage.)

Ce qui est bien avec cet outil de test, c'est que, si quelque chose semble bancal, vous pouvez marquer le bogue dès que vous le détectez. Vous disposez d'un bouton pour le faire directement au-dessus du navigateur mobile interactif.

Smart Testing: Idéal pour les tests de régression

L'œil ne peut détecter que beaucoup de choses, surtout lorsque vous avez consulté la même section d'une page Web

Ainsi, lorsque vous commencez à implémenter des modifications sur votre site – pendant le développement, juste avant le lancement et même après – les tests de régression vont être cruciaux pour détecter ces problèmes potentiellement difficiles à repérer.

Cette devrait avoir lieu chaque fois que quelque chose change:

• Vous mettez à jour manuellement une partie de la conception.
• Le code est modifié sur le backend.
• Quelqu'un signale un bogue et le correctif est implémenté.
• Le logiciel est mis à jour. [19659021] Une API est reconnectée.

Si vous savez quelle page et quelle partie de cette page sont directement impactées, les tests intelligents peuvent simplifier la tâche pour confirmer que tout va bien.

Téléchargez simplement la capture d'écran originale de la page impactée puis ajouter une image de comparaison e lorsque le changement a été effectué. (C'est là que cet outil de capture d'écran est vraiment utile.)

Remarque: Il n'y a évidemment rien de mal avec le site Web Smashing Magazine. Mais ce que j'ai fait dans l'exemple ci-dessus, c'est utiliser des rendus pour différentes versions de l'iPhone. Évidemment, ce n'est pas ainsi que fonctionnent les tests de régression, mais je voulais vous montrer à quoi ressemble cette fonction de comparaison lorsque quelque chose ne va pas.

Maintenant, quant à la raison pour laquelle cette fonctionnalité est si géniale, voici comment cela fonctionne:

Cette capture d'écran unique vous permet de voir où les deux versions de votre page ne s'alignent plus. Donc, si les captures d'écran provenaient de la même vue de navigateur à l'origine, cela pourrait être un problème si vous n'aviez pas prévu de réaligner tous les éléments.

Vous pouvez également utiliser les tests de comparaison côte à côte pour vérifier la même chose:

Encore une fois, les tests intelligents sont destinés à vous aider à localiser et à signaler rapidement les problèmes lors des tests de régression. Trouvez la méthode qui vous convient le mieux, afin que vous puissiez désormais résoudre ces problèmes le plus rapidement possible.

Test automatisé: Idéal pour détecter les problèmes à plus grande échelle

Techniquement, tout ce que nous avons examiné afin loin a une certaine forme d'automatisation intégrée, qu'il s'agisse de traiter simultanément 20 captures d'écran de navigateur différentes ou de vous permettre de voir instantanément les interfaces de test mobiles pour tous les appareils iOS et Android à la fois.

Cela dit, la plate-forme LambdaTest est également livrée avec un outil appelé " Automatisation". Et cela vous permet de faire des tests de sélénium dans le cloud sur plus de 2 000 navigateurs. Une nouvelle fonctionnalité, «Lambda Tunnel», peut également être utilisée pour effectuer des tests de sélénium sur votre hôte local. De cette façon, vous pouvez voir comment vos modifications de code apparaissent avant même qu'elles ne soient mises en ligne.

La combinaison de LambdaTest avec les tests au sélénium présente de nombreux avantages:

• C'est un moyen très efficace d'effectuer de grandes quantités de tests inter-navigateurs, augmentant ainsi la couverture de votre navigateur (ce qui est impossible à faire manuellement).
• Avec des tests inter-navigateurs parallèles, vous réduirez le temps passé à exécuter les tests d'automatisation dans leur ensemble.
• Parce que les tests Selenium commencent par identifier votre codage préféré

Bien entendu, le plus grand avantage de l'utilisation de LambdaTest Selenium Automation Grid est que LambdaTest vous aidera à évaluer si vos tests réussissent ou échouent.

Vous devez encore examiner les résultats pour confirmer que toutes les erreurs sont de véritables échecs et vice versa, mais cela vous fera économiser un beaucoup de temps et de maux de tête pour que LambdaTest fasse le travail initial pour vous.

Conclusion

Les tests entre navigateurs ne consistent pas seulement à s'assurer que les sites Web sont réactifs aux mobiles. Ce que nous cherchons finalement à faire ici, c'est d'éliminer les conjectures de la conception Web. Il peut y avoir plus d'une douzaine de navigateurs possibles et des centaines de configurations de navigateur / appareil, mais des tests croisés automatisés peuvent faciliter la vérification de toutes ces possibilités et la localisation des erreurs.