Comment tester un site web sous plusieurs navigateurs ?






Dès qu'on crée un site web ou une web app, la question du test multi-navigateur se pose fatalement. Il y a ceux qui collectionnent les machines en conservant des environnements de travail symptomatiques d'une époque : Windows XP avec IE 6, Windows Vista avec IE 7, Windows Me avec Netscape Navigator :-)

Pour cela, il faut avoir 1- de la place 2 - un parc informatique conséquent. Et encore, vous ne serez jamais sûr de disposer de toutes les configurations possibles et imaginables. Sans parler des navigateurs web mobiles qui font leur apparition. Et de votre moitié qui risque de s'énerver un peu....

Personnellement, j'ai plusieurs méthodes pour tester un site web sous plusieurs environnements.

Si je n'ai besoin que de l'aperçu du rendu d'une page (sans naviguer dedans), j'utilise Adobe Browser Lab. Vous saisissez votre URL, vous choisissez le navigateur pour lequel vous souhaitez avoir un aperçu, et zou, vous obtenez une "photo" de votre site dans tel ou tel navigateur. Par contre, c'est très vite limité car il est impossible de simuler la navigation au sein du site. Dans le même genre, on trouve également BrowserShot.

Lorsqu'il s'agit de tester le comportement complet d'un site dans plusieurs navigateurs différents, j'ai plusieurs techniques :

  • j'installe des versions mobiles de navigateurs anciens, pour pouvoir faire cohabiter IE 6 avec IE 7 ou IE 8 ; c'est pratique, ça ne touche pas à la base de registres Windows, et ça fonctionne plutôt bien. Pour en savoir plus, cliquez ici.
  • ou bien j'installe (PC) un utilitaire qui permet de simuler plusieurs versions d'Internet Explorer sans casser votre configuration. Celui qui fonctionne le mieux à mon avis est IECollection. Il existe également une solution chez Microsoft qui permet de gérer plusieurs IE via un Virtual PC, mais c'est plutôt complexe.
La difficulté, c'est que cela impose souvent d'avoir plusieurs environnements de travail, et qu'il est difficile de simuler un navigateur sous un autre O.S.

Au fil du temps, j'ai donc choisi d'utiliser des user agents incorporés au navigateur.
Comment ça marche ?
  • sous Safari (Mac ou PC), activez l'option "Développeur" (Options > Avancées > Activer le menu développement...). Un nouveau menu "Développement" va s'afficher dans la barre de menus. Cliquez alors sur "Développeur > Agent d'utilisateur" pour faire apparaître une liste de navigateurs et d'O.S. différents.Y compris iPhone et iPad...
  • sous Firefox, il suffit de télécharger le module User Agent Switcher puis de récupérer toute une liste de moteurs complémentaires. Là, vous pouvez simuler quasiment n'importe quelle configuration, y compris des terminaux mobiles récents (iPhone) ou anciens (Nokia 3310 !). Merci Thierry pour l'info au passage ;-)
Voilà, avec tout ça, normalement vous êtes parés pour une bonne séance de test.
Si vous avez d'autres astuces, n'hésitez pas, ça m'intéresse !!