Tester ses navigateurs de façon fiable

Je travaille dans des conditions outrageusement luxueuses.
Comprenez par là que je travaille sur un MacBook Pro depuis quatre ans et que j'ai une machine virtuelle pour chaque version d'Internet Explorer. J'ignorais ma condition de nanti jusqu'au jour où j'ai travaillé avec une agence Web puis discuté avec d'autres développeurs.
Ce qui, comme la plupart des développeurs ne me gênait pas au début (après tout c'est cher à mettre en place) est devenu rapidement un problème : mes prestataires ne pouvaient pas reproduire certains bogues, car ils n'avaient pas les outils nécessaires. Après une petite année à ce régime, j'ai cumulé suffisamment de preuves pour me permettre de demander légitimement aux prochains prestataires de s'équiper avant de travailler avec nous.

C'est probablement le pire moyen de tester : le mode de compatibilité d'IE8 ou IE9 supposé exécuter le moteur de rendu d'IE7 ou IE8. Microsoft a voulu bien faire pour faciliter la vie de ses utilisateurs et leur permettre une transition en douceur de IE7 vers IE8, mais les développeurs se sont vite rendu compte que le mode de compatibilité générait des rendus différents de IE7. À tel point que Yahoo! et sa matrice de navigateurs à tester recommandent constamment de tester spécifiquement le mode de compatibilité (voir les updates, dans les notes).

Certaines techniques sont faussées : j'ai, par exemple, constaté que le support des images en data:uri et base64 fonctionnait dans IE8 en mode IE7 standard alors que IE7 ne le supporte pas. Comment faire pour valider certaines techniques émergentes (ici pour les performances) si vous n'avez pas les bons navigateurs pour tester ?

La différence de comportement la plus grave que j'ai constatée (et je ne suis pas le seul) vient du moteur JavaScript : sous IE6 et IE7, le fait d'oublier d'enlever la dernière virgule (',') après une chaîne JSON a toujours planté le script :

var oData : {
    value1:"blah",
    value2:"blah", // === boom
};

Sous IE8 comme sur tous les autres navigateurs, cette syntaxe est valide. Or, si vous vérifiez avec le mode de compatibilité IE7 sous IE8, vous ne verrez pas cette erreur qui casse votre JavaScript et qui enlève donc des fonctionnalités majeures de votre site, simplement parce que vous n'êtes pas dans les bonnes conditions pour tester.

Internet Explorer est à tel point implanté dans son OS qu'il est en théorie impossible d'en installer plusieurs versions (ce qui leur avait même valu des problèmes avec la justice). Mais plusieurs softs ont pallié cette situation et permettent d'exécuter plusieurs versions d'IE : par exemple IETester, IECollection ou Multiple IE. Le problème, c'est que ces différentes instances d'IE continuent de partager certaines DLL et autres appels système. Ça n'a l'air de rien, mais concrètement pour le développeur Web ça l'empêche de voir certaines choses.

Plugins▲

Fontes et couleurs▲

Pour le rendu des fontes il vous faudra typiquement vérifier votre site sous un Safari sur Mac et sur un IE6 sous XP : le Safari Mac rend les polices exactement comme votre graphiste l'a prévu sur sa belle maquette Photoshop. C'est la vision qu'il a du site et c'est sûrement celle que les décideurs ont également…
Le couple terrible, IE6-XP qui est encore là pour longtemps, est lui à l'extrémité opposée du spectre des rendus et correspond au pire de ce que verront vos visiteurs. Les versions supérieures de IE et des navigateurs ne font qu'améliorer le rendu sans jamais totalement atteindre la perfection du couple Safari / OSX.

J'ajoute que selon la taille de police, l'activation ou pas de l'option lissage, le type de police et les caractères utilisés, certains mots peuvent devenir illisibles ou du moins pénibles à lire sur les Windows. Lorsque vous décidez de l'utilisation d'une police, il vous faudra d'abord vérifier son rendu final sur au moins XP, Vista ou Seven et enfin MacOS. Soit vous maintenez trois machines physiques avec un OS sur chacune, soit vous utilisez les machines virtuelles (ou plus pénible : des machines en dual boot).

Le rendu des couleurs : j'avoue ne pas très bien savoir comment faire ici. Mac et les différents Windows rendent les couleurs différemment, discutez-en deux minutes avec un graphiste, ça lui laissera le loisir de vous montrer qu'il en sait plus que vous. Or avec les machines virtuelles, on affiche un Windows sur un Mac, je n'ai aucune idée de ce que cela donne réellement. Pour en rajouter un peu, je n'obtiens pas les mêmes couleurs selon que je sois sur l'écran du MacBook ou sur le 2d écran… Devant mon incapacité à vous expliquer comment tout cela fonctionne, je ne peux que citer une des bonnes pratiques généralement accolée à l'accessibilité : inutile de jouer avec des nuances de couleurs, préférez de forts contrastes.

Être à jour▲

Microsoft patche régulièrement ses OS ainsi que ses IE. Rarement, mais sûrement certaines choses peuvent s'arrêter de fonctionner suite à ces patchs. Exemple concret : dans les IE, on pouvait récupérer le chemin local d'un fichier sélectionné par un input type=file. Ceci permettait d'afficher une miniature d'une image avant upload, fonctionnalité d'ailleurs à nouveau permise par HTML5. En 2009, un patch est passé et a fait disparaître cette possibilité, après dix ans de bons et loyaux services (voir les screenshots que j'avais faits).

• Avant le patch :

• Après le patch :

Les packs d'IE ne permettent pas de rester à jour, ou alors vous dépendez de leur bon vouloir. Avoir une machine virtuelle permet d'utiliser le mécanisme d'autoupdate de Microsoft.

Les anciens et les futurs navigateurs▲

Outre Internet Explorer, certaines versions de Firefox valent encore la peine d'être testées avec plusieurs versions. Ça a été le cas pendant longtemps pour FF2, c'est encore peut-être le cas sur vos sites pour FF3.0 et à l'heure où j'écris, c'est certainement vrai pour FF3.5, malgré le fait que l'on soit en 3.6 depuis longtemps.

Les bugfixs passés dans ces releases impactent rarement le travail des développeurs (mais ça arrive), mais il y a surtout eu des ajouts de fonctionnalités majeures (rangées sous l'ombrelle HTML5) ou l'ajout de supports CSS3 : il faut que vous testiez au moins une fois pendant le développement comment se comporte votre fallback ou votre graceful degradation sur ces anciennes versions.

Il n'est peut-être pas utile de conserver des versions de Chrome et Opéra, l'un, car il force l'autoupdate, l'autre parce qu'il est rare, mais c'est à vous de juger.

En revanche, il est vital d'avoir les dernières versions d'IE9 et FF4 pour tester régulièrement votre site avec : faites corriger les bogues par Microsoft ou par Mozilla avant que vos utilisateurs ne tombent dessus et vous fassent changer votre code !

Il n'est peut-être pas nécessaire d'avoir une machine virtuelle dédiée à une version passée et future des navigateurs hors IE, car il me semble que différentes versions de FF savent cohabiter et que les bêta/preview d'IE savent également s'installer sans conséquence. Mais il vaut peut-être mieux jouer la prudence là-dessus : ce sont des versions bêta et avec les nouvelles fonctionnalités type accélération matérielle, les navigateurs s'intègrent de plus en plus au système, il me semble donc évident que toute nouvelle installation met en péril l'intégrité des autres versions du même navigateur.
Une fois que le mal est fait, difficile de revenir en arrière, tandis que sur une machine virtuelle, vous pouvez isoler le problème et même revenir en arrière grâce aux fonctionnalités de snapshot à exécuter avant toute installation hasardeuse.

Plugins et addons▲

Votre site dépend parfois de Flash ou Java ? Il affiche des publicités ?

Il vous faut au moins une machine où Flash et Java ne sont pas installés, afin de tester de manière réaliste votre contenu alternatif ou le fallback de votre fonctionnalité. On ne développe pas ce qu'on ne voit pas.

Concernant Flash et c'est valable avec Java : il existe des différences entre Flash 9 (encore répandu) et Flash 10.x. Les flasheurs développent et testent toujours avec la dernière version : ayez donc une machine avec une ancienne installation de Flash pour vérifier rapidement que le Flash qu'on vous livre marche pour tout le monde.

Votre Firefox est peut-être comme le mien : c'est devenu un navigateur de développement sur lequel est installée une dizaine de plugins dont le gourmand Firebug. Après quelques heures de développement, mon Firefox est à la limite du praticable sur certaines pages chargées. Un tour régulier sur un Firefox sans aucun plugin dans une machine virtuelle me permet de vérifier (et non pas de supposer) si c'est un plugin ou mon code qui fait ramer le navigateur.

Vous êtes probablement d'accord avec le principe d'être dans de bonnes conditions pour tester, mais vous avez peur que cela demande du budget et de la ressource machine ? C'est le cas, mais rien d'insurmontable. Concernant votre machine de développement d'abord.

• Mac OS : il faudra le tester de toute façon, ne serait-ce que pour vérifier ce que voient les graphistes et les journalistes… Pendant longtemps il n'y a pas eu de machine virtuelle capable de le faire tourner, mais il semblerait que cela soit aujourd'hui possible, donc si vous voulez rester sous Windows ou Linux, c'est peut-être possible, à vos risques et périls. Pour ma part et depuis quatre ans, j'ai convaincu mes employeurs de payer 50 % plus cher mon matériel pour être dans des conditions de test réalistes. Pour les managers qui doivent justifier ce budget : outre la qualité, un développeur sous Mac est un développeur qui restera plus longtemps chez vous.
• 4 Go de RAM : pendant le développement, il faut tourner avec au moins un IE6 (ou 7) sous XP en permanence ouvert en plus de l'environnement de développement normal (Firefox, éditeurs, divers logiciels…). Avec 2 Go, c'est jouable, mais pénible, du coup certains développeurs ferment à jamais la machine. 4 Go, c'est mieux et ça permet de supporter ces jours pénibles, généralement en début et en fin de projet, où vous allez lancer successivement toutes vos machines virtuelles pour valider des choix techniques ou le développement lui-même.
• Un disque rapide : deux OS qui cohabitent, ça fait énormément d'appels au disque dur, surtout que vous allouerez peu de RAM à Windows (512 Mo maximum en général), donc ce dernier utilisera la mémoire virtuelle (le disque donc). Si vous n'avez que 2 Go de RAM et un disque de portable à 5400 tr/mn, la situation sera intenable. Essayez d'upgrader à 7200 (la différence est flagrante), voire de le remplacer par un SSD, technologie qui commence à être abordable. Je n'ai pas essayé le dernier MacBook AIR, mais la mémoire Flash qu'il utilise en remplacement semble parfaite dans ce cas.

Concernant le software.

• XP et Seven : il vous faut au moins ces deux OS pour installer de IE6 à IE9. Concernant les licences, chez Yahoo! nous utilisions des licences dites corporate (valables pour des milliers de postes), donc pas de problème. En PME, la pratique généralement admise est d'acheter la licence, d'installer… puis de cloner l'image de la machine autant de fois qu'il y a d'environnements et de développeurs. Honnêtement, je ne sais pas si c'est prévu par la licence. Si vous émulez à partir de Seven avec Virtual PC, Microsoft vous offre des images d'installation (limitées dans le temps) parfaites pour les développeurs Web.
• Une machine virtuelle Mac. Payant : j'utilise Parallels Desktop qui me satisfait pleinement, mais qui a la réputation d'être gourmand en ressources. J'ai entendu du bien de VMWare. Dans tous les cas, comptez moins de 100 euros. Gratuit : VirtualBox est le leader de l'open source, mais n'était pas sorti lorsque j'ai commencé à utiliser Parallels il y a quatre ans, je ne peux donc pas en parler. Si vous êtes sur Windows Seven, vous pouvez utiliser Virtual PC.

Les machines virtuelles vous fournissent généralement des images préinstallées. Mais elles ne sont jamais en français et bien sûr ne dispensent pas de fournir une clé Windows valide. Veillez aussi à ce que les images d'XP fournies contiennent bien IE6 : on ne peut pas désinstaller IE7 pour installer IE6.

Je vous conseille de suivre la matrice de Yahoo!, mise à jour deux à trois fois par an. Voici en tout cas le contenu de mes machines après plusieurs années de pratique :

Vista et FF2-3 ne sont peut-être plus utiles à posséder, mais sinon toutes ces combinaisons tiendraient en 5 machines. Cela donne accès à :

• pas de Flash/java, Flash 9 et un Flash à jour partout ailleurs ;
• IE 6, 7 et 8 sur XP, IE8 sur Seven ;
• FF3.0 et FF 3.5 (qui n'apparaît pas) ;
• IE9 bêta à jour, FF4 bêta à jour. Un FF nightly build pour vérifier des bugfix à l'occasion ;
• ces machines comportent presque toutes un Chrome et un Opéra à jour, en plus du Chrome / Opéra / Safari de mon Mac. Oui il y a parfois des différences, pas uniquement visuelles, entre une version Mac et Windows d'un même navigateur.

Cela fait beaucoup de combinaisons et il en manque encore : par exemple si je dois un jour tester le site sur IE6 sans Flash, je n'ai pas de machine toute prête. Qu'à cela ne tienne, il me suffit de cloner ou de faire un snapshot de ma machine IE6 puis de désinstaller Flash pour vérifier mon bogue.

Il existe aussi des équipes Web qui maintiennent des PC avec toutes ces combinaisons, accessibles physiquement ou depuis un VNC. De ce que j'en ai vu, c'est une solution peu pratique que les développeurs finissent par ne plus utiliser, préférant coder à l'aveugle plutôt que de se déplacer ou subir des lags réseau… Oui les développeurs sont comme ça, d'où l'intérêt d'investir dans du matériel !

• Si vous vous considérez comme un professionnel du Web, vous vous devez d'investir dans un environnement de test fiable.
• Il y a de vraies différences de comportement et de rendu entre un IE natif, des packs d'IE et entre OS.
• Il y a un grand nombre de combinaisons possibles (quatre OS, cinq navigateurs, plusieurs sous-versions, Flash…) et les différences iront en s'accentuant (nouveaux navigateurs, adaptation à chaque OS…).
• La seule solution fiable et souple est d'avoir plusieurs machines virtuelles.

Je tiens à remercier eusebe19 et jacques_jean pour leur relecture de cet article.

L'article original peut être vu sur le site BrainCracking : Tester fiablement ses navigateurs