L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2024 !
Liste de contrôle des tests sur plusieurs navigateurs avant la mise en production –
Cet article a été publié à l'origine sur LambdaTest . Merci de soutenir les partenaires qui rendent SitePoint possible.
Lorsque vous développez un site Web, la mise en ligne est comme un rêve devenu réalité. Mais ensuite, vous remarquez que les choses vont mal après le lancement et cela devient rapidement un cauchemar. Un de mes amis était tellement excité qu’il était sur le point de lancer son nouveau site Web. Mais quand il a finalement appuyé sur le bouton de lancement, certaines tendances inhabituelles et inquiétantes ont commencé à apparaître. Après avoir approfondi les détails dans Google Analytics, il a découvert que le site Web affichait un taux de rebond très élevé sur les appareils mobiles.
Le site Web était en désordre sur les appareils mobiles. Tous les éléments avaient laissé leur place et le logo n'était même pas adapté à l'écran. Ce jour-là, il m’a appris une leçon précieuse, qu’il m’a transmise: " Consultez une liste de vérification des tests de navigateur sur plusieurs avant de commencer à vivre ." navigue sur le Web sur une plateforme, un système d'exploitation ou un navigateur différent, et vous ne pouvez même pas y penser à l'avance. Formuler une stratégie d'essais croisée sur plusieurs navigateurs parfaite peut vous aider, mais parfois même après cela, vous devez être préparé à certains bogues indésirables. Cependant, une liste de contrôle appropriée peut vous aider à les éviter ou à les résoudre avant tout le monde.
Quelques conditions préalables avant de passer en revue la liste de contrôle
Avant de passer à la liste de contrôle, vous devez vous assurer de bien savoir comment pour effectuer des tests entre navigateurs.
- Si vous voulez effectuer des tests entre navigateurs, vous devez savoir sur quels navigateurs et dispositifs vous allez tester . Donc, formulez une stratégie appropriée de test entre navigateurs.
- Lorsque vous avez défini votre stratégie de test entre navigateurs, assurez-vous de tester votre site Web hébergé localement ou votre site de développement sur des outils de test de navigateur tels que LambdaTest avant de commencer à vivre. La plate-forme dispose d'une fonctionnalité appelée tunnel Lambda qui vous offre la possibilité de connecter vos sites Web hébergés localement ou vos applications Web afin de tester dans le cloud des tests inter-navigateurs à l'aide du tunnel SSH. La compatibilité entre navigateurs et l’accessibilité entre navigateurs affectent également le référencement de votre site Web. Par conséquent, il est toujours important de le tester de manière approfondie et de le rendre parfaitement compatible avec l'indexation des sites sur les moteurs de recherche. Vous pouvez également utiliser une plate-forme capable de vous fournir tous les appareils dont vous avez besoin, comme LambdaTest, qui propose une large gamme d'appareils mobiles iOS et Android sur lesquels tester.
Une fois ces conditions préalables remplies, l'étape suivante consiste à parcourir le liste de contrôle.
La liste de contrôle ultime pour les tests sur plusieurs navigateurs avant la mise en production
Cette liste de contrôle utile vous aidera à vous assurer que vous avez bien mis en forme votre point i et testé tous vos éléments avant de vous installer dans votre environnement local.
Alignement d'éléments dans tous les navigateurs
Assurez-vous que les éléments se trouvent au bon endroit.
Vérification de SSL dans divers navigateurs
Si vous rencontrez cette erreur, cela peut être dû notamment au fait que le certificat SSL de votre site Web ne prend pas en charge certaines versions du navigateur. Si votre utilisateur tente d'accéder à ces versions de navigateur sur votre site Web, il risque de ne pas pouvoir y accéder du tout. Vérifiez donc les certificats SSL de votre site Web dans tous les navigateurs avant de vous connecter.
Rendu de la police dans différents navigateurs
Ceux qui n’aiment pas les belles polices sur leur site Web peuvent toutefois causer des erreurs s’ils ne s'affichent pas correctement. Le rendu des polices est fortement affecté par le navigateur dans lequel vous naviguez sur votre site. Vous devez donc vous assurer que vos polices ont le même rendu dans chaque navigateur Web.
En savoir plus sur Compatibilité des polices et des navigateurs .
Compatibilité des éléments multimédias avec des navigateurs variés
Les vidéos sont la forme la plus aimée des médias de nos jours. Les concepteurs et les développeurs Web en ont profité et vous pouvez facilement trouver une vidéo de démonstration ou une vidéo de didacticiel s'exécutant sur la page d'accueil d'un site Web. Toutefois, la compatibilité du navigateur peut vous causer des problèmes si vous utilisez des éléments multimédias non pris en charge et que cela ne se limite pas aux vidéos, mais également aux images. Avant de vous lancer, assurez-vous d’utiliser les éléments pris en charge par tous les navigateurs ou d’avoir recours aux éléments non pris en charge afin que vos utilisateurs ne soient pas confrontés à ce problème!
Comprenez La compatibilité multimédia avec différents navigateurs en détail ici
Vos API sont-elles connectées à tous les navigateurs?
Les appels d'API dépendent également des navigateurs. Certains navigateurs reconnaissent les demandes d'API alors que d'autres peuvent éviter cela ou vous envoyer une erreur. Avant de commencer, assurez-vous toujours que les API que vous utilisez sont connectées dans tous les navigateurs. Certains navigateurs, tels qu'Opera Mini, ne prennent pas en charge les API telles que Websocket.
De plus, certaines méthodes d'appel d'API, telles que getUserMedia / Stream génèrent une erreur sur Opera Mini, iOS Safari 10.3, IE 11 Ainsi, vous devez vous assurer que vos API sont compatibles avec les navigateurs avant de passer au mode de diffusion lorsque vous êtes sur le serveur public et que vos utilisateurs risquent de ne pas être connectés au monde.
Assurez-vous de valider votre code CSS. HTML
Les balises laissées ouvertes peuvent être un cauchemar pour les développeurs et une horreur pour les utilisateurs s'ils voient le code en direct à l'écran. Il est donc impératif de s’assurer que le code est propre et correctement validé. Les écoles W3 ont un coin doux pour la même chose. Vous pouvez facilement valider vos fichiers HTML, JS et CSS avant d'utiliser des outils tels que le service de validation W3C Markup, Free Formatter ou JS Formatter, le service de validation CSS W3C – W3 Jigsaw ou le service de validation CSS.
Des problèmes de compatibilité de navigateur peuvent être trouvés à utilisez davantage ces outils et vous pouvez continuer à les résoudre.
En savoir plus sur Recherche des problèmes de compatibilité entre navigateurs en HTML et CSS .
Après avoir vérifié tous les problèmes de compatibilité majeurs, Il est nécessaire d'effectuer une série d'essais sur plusieurs navigateurs en prenant en général des facteurs mineurs mais importants tels que:
- Alignement des éléments: Tous les éléments sont-ils alignés comme vous le souhaitez?
- Pop Ups: Vérifiez si les fenêtres contextuelles sont correctement affichées et s'ouvrent dans tous les navigateurs.
- Alignement des cases à cocher: Les cases à cocher peuvent être à l'origine de problèmes dans de nombreux navigateurs. Assurez-vous que vos cases à cocher sont alignées et en bon état de fonctionnement.
- Alignement et fonctionnement des boutons: Les boutons jouent un rôle majeur dans les CTA et autres actions, vous devez donc vous assurer qu'ils sont alignés et fonctionnent correctement sur différents navigateurs.
- Redirection des URL à partir des boutons: Vérifiez les liens vers lesquels les boutons sont redirigés.
- Menus déroulants: Vérifiez que la chute Les travaux fonctionnent comme prévu dans tous les navigateurs.
- Formulaires et API de formulaire: Assurez-vous que les formulaires prennent des données et que les données sont transférées intactes au point de terminaison de l'API de collecte.
- Grilles / Tables: Vérifiez l'alignement et l'emplacement des tables et des grilles le cas échéant sur tous les navigateurs.
- Sessions et cookies: Si votre site Web utilise des cookies, vérifiez que l'invite est présente et qu'elle fonctionne en conséquence.
- Dates: Vérifiez si la date f ormats comme décidé dans chaque navigateur.
- Fonctionnalité zoom avant et zoom arrière: Vérifiez si la fonctionnalité zoom avant et zoom arrière fonctionne correctement et ne casse pas l'interface utilisateur lors de l'utilisation.
- Apparence du défilement: Vérifiez si le défilement est présent sur les barres horizontales et verticales et qu'il est fonctionnel.
- Flash: Assurez-vous que les vidéos, les animations, les RIA et les applications pris en charge par Flash se croisent Navigateur.
- Animations HTML: Vérifiez si vos animations se chargent dans tous les navigateurs.
- Survol de la souris: Vérifiez si la souris s’ajuste au bouton, à la zone de texte, au lien, et espace blanc en conséquence.
- Alignement des images: Assurez-vous que toutes les images sont alignées et en place sur différents navigateurs.
- Balises alt: Les balises alt sont à nouveau importantes. nous devons être sûrs qu'ils sont en place.
Et tout ce que vous pouvez imaginer Tous les navigateurs, systèmes d’exploitation et combinaisons d’appareils possibles.
Comme nous pouvons le voir ici, il existe diverses choses à tester dans un environnement local à travers des milliers de combinaisons afin de s’assurer que cela n’entrave pas le site est fait en direct. Nous devons donc nous assurer de tester toutes les combinaisons possibles pour éviter toute surprise supplémentaire. Comme beaucoup des tests suivants sont répétitifs et prennent beaucoup de temps, nous pouvons donc utiliser une grille en ligne Selnium pour automatiser les tests inter-navigateurs . Avec une telle automatisation, vous pouvez éviter les tâches répétitives et fastidieuses et les automatiser à l'aide d'un script simple.
LambdaTest fournit également une grille de sélénium en ligne sur laquelle vous pouvez automatiser vos tests sur des serveurs publics et locaux. et testez sur la grille Cloud LambdaTest de plus de 2000 périphériques, navigateurs, versions de navigateur et combinaisons de résolution. Par conséquent, vous devez vous assurer de trouver le meilleur outil de test inter-navigateurs, puis procéder à des tests sur votre liste de contrôle, certains manuellement, tandis que d'autres utilisent l'automatisation.
Une fois que vous avez terminé de tester cette liste de contrôle de test inter-navigateur, vous êtes tous prêts à aller vivre et appuyez sur le bouton vert. J'espère que vous ne rencontrerez peut-être pas la même situation que mon ami, car vous êtes assez malin pour ne pas répéter la même erreur.
Faites-nous savoir si j'ai oublié quelque chose qui devrait figurer dans la liste de contrôle de la section des commentaires ci-dessous!
Jusque là, bons tests et bonne chance pour le lancement!
Deeksha Agarwal est en croissance de produit à LambdaTest est également un blogueur passionné de technologie et un évangéliste du produit.
Source link