Faire des tests sur plusieurs navigateurs est plus qu’indispensable. Sur 3 navigateurs différents, vous constaterez 3 affichages différents, et sur 3 versions du même navigateur, vous verrez aussi des disparités.
Cette étape peut-être rapide si vous avez les bons outils et surtout la bonne méthode. Une checklist des principaux bugs possibles vous permettra d’éviter la majorité des problèmes de compatibilité.
Tous les bugs que vous pouvez corriger avant votre mise en production seront du temps précieux gagné par la suite.
Suivez le guide pour faire des tests cross-browser efficaces et complets.
C’est quoi un test cross-browser ?
Un test cross-browser, ou test de navigateur croisé en français, consiste à vérifier que votre site internet ou application fonctionne correctement sur les différents navigateurs, systèmes d’exploitation et appareils.
Eh oui, ce serait tellement plus simple si chaque outil proposait le même code ! Mais c’est malheureusement loin d’être le cas… Alors, si vous voulez offrir une expérience optimale à vos utilisateurs, vous devrez vérifier comment votre code est traduit en fonction :
- Des paramètres par défaut d’un navigateur ou d’un système d’exploitation
- Des paramètres définis par l’utilisateur, comme la résolution de l’écran par exemple
- Des fonctionnalités de l’appareil qui peuvent entraîner des différences dans la résolution de l’écran ou l’équilibrage des couleurs
- Des moteurs utilisés pour traiter les instructions web
- De la prise en charge (ou pas) des normes web récentes, telles que CSS3
Comment fonctionne un test cross-browser ?
L’objectif premier d’un test cross-browser est d’identifier les erreurs de fonctionnalité sur des clients web spécifiques, avant que les utilisateurs ne les rencontrent.
Pour réaliser cet exercice, vous pouvez noter manuellement les différences sur divers clients web ou exécuter des scripts de test.
La méthode manuelle pour réaliser un test cross-browser
Pour réaliser un test de navigateur croisé manuellement, vous sélectionnez les systèmes d’exploitation, navigateurs et appareils les plus populaires. Vous pouvez aussi les choisir en fonction des données de trafic sur votre site.
Votre équipe (ou vous-même) affichera votre site ou application sur ces différents espaces, afin de vérifier la compatibilité, l’ergonomie et le temps de chargement.
Cette méthode est assez fastidieuse et n’est pas la plus recommandée… Néanmoins, cela peut vous permettre d’avoir un premier aperçu et de réaliser quelques optimisations rapidement.
La méthode automatisée pour réaliser un test cross-browser
Avec cette méthode, les développeurs écrivent des scripts qui lancent périodiquement votre site web dans plusieurs navigateurs. Ces scripts peuvent simuler des visites et des parcours, pour analyser les points bloquants.
Beaucoup plus efficace, cette méthode vous aide à détecter rapidement les axes d’amélioration, ainsi que les zones où tout fonctionne correctement.
Quels paramètres sont pris en compte dans les tests ?
Afin de proposer une expérience utilisateur optimale, les paramètres et fonctionnalités qui peuvent être analysés sont :
- La durée : le temps nécessaire pour exécuter une interaction sur la page (créer un compte, cliquer sur un bouton, ajouter un article au panier ou toute action importante).
- Le temps de chargement: la durée nécessaire pour que tous les éléments d’une page se chargent complètement.
- Les fonctionnalités de base : vérifiez si toutes les boîtes de dialogue et tous les menus fonctionnent comme prévu, si les champs des formulaires acceptent bien les entrées, si le site web gère correctement les cookies, si la saisie tactile reste fluide pour les mobiles et les tablettes, etc.
- Le design: vous vous assurez que les polices, images et mise en page correspondent aux spécifications des systèmes d’exploitation, des mobiles et autres interfaces web.
- L’accessibilité : la conformité aux directives d’accessibilité au contenu web (WCAG).
- La réactivité : la fluidité de la conception et son adaptation aux différentes tailles et orientations d’écran.
- Les Core web Vitals: LCP (Largest Contentful Paint), CLS (Cumulative Layout Shift) et FID (First Input Delay).
Pourquoi réaliser un test cross-browser ?
Le test de navigateur croisé permet d’évaluer l’expérience utilisateur sur votre site ou application. Chaque navigateur rend le HTML, le CSS et le JavaScript de manière unique. A cet effet, le débogage minutieux du code source de votre site web ne suffit pas pour garantir un affichage optimal sur chacun d’eux.
Par exemple, certains navigateurs, plus anciens, ne prennent pas en charge le CSS3. Ce qui signifie que les fonctions interactives d’un site web, telles que la possibilité de zoomer et de dézoomer, peuvent ne pas fonctionner.
En réalisant un test cross-browser, vous repérez les erreurs de compatibilité spécifiques à un navigateur et vous les corrigez. Ce qui contribue à optimiser l’expérience utilisateur et, directement, à augmenter votre taux de conversion. Car c’est bien là l’objectif : offrir une navigation fluide qui incite l’internaute à poursuivre son parcours jusqu’à la transformation.
Par ailleurs, garantir un fonctionnement parfait sur les navigateurs ou appareils améliore le référencement naturel de votre site internet. C’est même un critère essentiel des Core Web Vitals de Google (des « signaux web essentiels », basés sur l’accessibilité et l’expérience utilisateur, que le célèbre moteur de recherche analyse pour positionner votre site).
3 choses à vérifier pendant un test cross-browser
Pour vous assurer un résultat pertinent, vous devez vérifier quelques éléments importants pendant votre test cross-browser.
Au préalable
Pour bien préparer vos tests cross-browser assurez-vous de :
- Vérifier les navigateurs et OS que vous vous êtes engagés à couvrir dans le cahier des charges.
- Avoir un émulateur mobile ou bien directement un device de test à disposition.
Pour ce premier point, ne faites pas de zèle : inutile de remonter à des versions très anciennes d’Internet Explorer si votre client ne vous l’a pas demandé.
Pour rappel, les navigateurs à passer en revue sont : Chrome / Internet explorer / Firefox / Edge / Safari / Opera ;
1. Votre rendu visuel est-il fidèle à votre maquette ?
Visuels
Cette vérification consiste à se poser deux questions :
- Vos composants apparaissent-ils tous ? Si ce n’est pas le cas, vous constaterez des décalages ou des espaces « vides ».
- Sont-ils à la bonne place ?
Vidéos
Certains formats de vidéo ne sont pas supportés par les navigateurs. Pour éviter un vilain message d’erreur, passez en revue les pages du site contenant des vidéos sur tous les navigateurs.
C’est parfois aussi le cas pour les images, vous verrez alors une zone grise comme si cette dernière n’était pas hébergée.
Polices
En webdesign, les polices dites web sont souvent utilisées pour être sûr que chaque navigateur l’affiche correctement.
Toutefois, vous aurez également à afficher des polices plus stylisées. Vérifiez alors leur bon affichage ou si le site propose bien des alternatives à la police principale si cette dernière ne peut pas s’afficher.
Contrôlez enfin la bonne prise en compte des gabarits de titre (H1, H2, H3) et l’harmonie de l’ensemble.
2. La technique et la sécurité fonctionnent-elles bien ?
Technique
Dans le cas où vous utilisez des API pour votre projet, sachez que les appels peuvent plus ou moins bien se dérouler d’un navigateur à l’autre.
Il pourra arriver qu’un navigateur soit catégoriquement incompatible avec votre API et mieux vaut détecter le problème avant la mise en production (c’est le cas de l’API Websocket et du navigateur Opera Mini par exemple).
Les tests cross-browser servent aussi à éviter que du code apparaisse sur votre site à cause d’une balise restée ouverte. Utilisez « Code Sniffer pour PHP » ou le test ultime des standards avec le WC3 validator dont l’objectif est de vous alerter sur :
- les attributs manquants ou non valides ;
- les balises inconnues ;
- les balises non fermées.
Sécurité
Ce n’est parce que votre certificat SSL est valide sur Google, qu’il le sera sur Safari.
Veillez donc à bien vérifier l’affichage de votre homepage sur chaque navigateur.
3. Retrouvez-vous toutes les interactions et animations souhaitées ?
Dernière partie, mais pas des moindres : le test des interactions.
Cela peut vous sembler fastidieux. Pourtant, en suivant une logique de navigation, vous pourrez faire vos tests cross-browser assez rapidement.
Prenez le temps de remplir cette checklist avant de pousser en production :
- Les pop-up : s’affichent-elles correctement dans chaque navigateur ?
- Les checkbox : sont-elles bien alignées et peut-on bien les cocher ?
- Les boutons : les call-to-actions sont les parties sensibles des sites web. Assurez-vous qu’ils apparaissent proprement et qu’ils soient bien cliquables sur tous les navigateurs. Allez au bout de la démarche en cliquant sur le bouton pour vérifier l’ouverture de la bonne URL (et peut-être dans un nouvel onglet si vous avez précisé
target_blank) ; - Survolez vos images et boutons pour vérifier que les balises Alt ressortent bien.
- Les ancres ou drop down/up menus sont-ils actifs ? C’est-à-dire les liens vers les différentes sections de la home pour un site on-page ou le bouton « HAUT » dans le footer pour scroller automatiquement en haut de page. Vérifiez ensuite le scroll vertical et horizontal dans chaque fenêtre de chaque browser.
- Les formulaires : cliquez dans chaque champs, remplissez vos principaux formulaires et assurez-vous que les données remontent bien dans l’API ou la base de données.
- Si vous utilisez des dates ou calendriers, vérifiez le bon format et le fuseau horaire.
- Vos tableaux et grilles sont-elles bien alignées quelque soit le navigateur ?
- Bandeau de cookies et acceptation : vérifiez leur affichage cross-browser et assurez-vous que l’annonce dynamique apparaît et enregistre le consentement « J’accepte ».
- Responsive design : réduisez et agrandissez votre fenêtre pour vérifier si les redimensionnements et alignements se comportent bien.
- Les animations HMTL5 / CSS3 : les effets dynamiques attendus ont-ils le rendu souhaité ? Y compris sur IE ??!
3 outils pour réussir votre test cross-browser
Comme nous l’avons dit précédemment, la méthode manuelle n’est pas la plus préconisée pour réaliser un test de navigateur croisé. D’autant plus qu’il existe des outils pour vous aider…
1. CrossBrowserTesting
Basé dans le cloud, CrossBrowserTesting permet d’effectuer rapidement des tests manuels, visuels et Selenium sur plus de 2 050 configurations de navigateurs desktop et mobiles.
La fonction d’enregistrement et de relecture vous permet d’enregistrer un test en direct pour mieux l’analyser ensuite. À la fin, vous bénéficiez de captures d’écran et de comparaisons automatisées.
2. LambdaTest
Basé également dans le cloud, LambdaTest vous aide à réaliser des tests interactifs en direct sur votre site internet ou application.
Vous pouvez exécuter des tests cross-browsers automatisés sur une grille Selenium évolutive comportant plus de 2 000 navigateurs. De quoi vérifier l’expérience offerte aux utilisateurs de différentes plateformes ou devices, afin de maximiser au mieux la navigation sur vos pages !
3. BrowserStack
C’est l’un des outils les plus connus et les plus simples d’utilisation ! BrowserStack vous permet de tester plus de 3 000 configurations, en temps réel. Tous les navigateurs, ainsi que les différents mobiles Android et Apple, peuvent être passés au crible avec ce testeur.
Vous êtes sûr de développer un site web ou une application mobile qui proposera une navigation optimale à tous vos visiteurs.
Notre astuce
Si vous suivez précautionneusement cette checklist des tests cross-browser, vous êtes maintenant fin prêt pour votre mise en production.
Pour vous aider à réaliser votre test, pensez à faire appel à des freelances qualifiés !
