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

Commentaires

  1. Bonjour,
    Merci pour toutes ces informations, mais j'ai choisi comme vous d'utiliser les user agents incorporés au navigateur (Safari et Firefox) mais lorsque je suis sur la page a verifier et que je change le user agent, cela ne semble pas fonctionner, la page affichées reste la meme. Or je l'ai testé sur IETester et on y voit des differences ?
    Merci de me specifier s'il y a quelque chose a faire pour s'en servir ? (je suis sous Windows 7)

    RépondreSupprimer
  2. User Agent Switcher !!?? heu je crois qu'il faut pas confondre, ce module fait juste passer ton navigateur pour un autre avec une ptite ligne identifiant, rien à voir avec un moteur d'affichage de navigateur. C'est une bonne idée de l'utiliser je n'y avait pas pensé, mais ça sert juste si par exemple tu fait un site avec une version pour telephone mobile, et bien en mettant l'user agent sur iphone par exemple tu verra ton site s'afficher en tout petit comme sur un mobile mais c'est tout. Idem s'il y a des spécificités pour un navigateur particulier, IE6 par exemple. Mais ce sera toujours Firefox qui affichera.

    RépondreSupprimer

Enregistrer un commentaire

Chers lecteurs, n'hésitez pas à laisser un commentaire sur cet article !

Articles les plus consultés

Sécurité : "Have I been pwned?", le service qui vous dit si votre compte a été piraté

Mindmapping : Xmind passe au cloud

PIM : Akeneo 1.6 est disponible en open-source