Test cross-browser : 3 choses à vérifier

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...

Voir l'article complet Partager Tweeter

Le blog Codeur.com

Publié le 23 juillet 2019 par Morgane Ponton

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.

Voici 3 choses à vérifier pour faire des tests cross-browser efficaces et complets.

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 ? ? !

Si vous suivez précautionneusement cette checklist des tests cross-browser, vous êtes maintenant fin prêt pour votre mise en production.

Lire la suite de l'article

Newsletter WebActus

Abonnez-vous pour recevoir notre sélection des meilleurs articles directement dans votre boîte mail.

Nous ne partagerons pas votre adresse e-mail.

Toutes les catégories