Go to Hackademy website

Tester une application avec Internet Explorer sur OS X

Victor Darras

Posté par Victor Darras dans les catégories intégration

Malgré l’évolution constante de nos navigateurs web, le gain en sécurité et en rapidité qu’ils nous offrent, nous avons encore l’obligation de penser à tous les utilisateurs de la toile. Même si je suis aujourd’hui un fervent défenseur de la nouveauté, chacun sait qu’il reste des utilisateurs sur Internet Explorer (IE) et nous ne pouvons les abandonner à leur sort.

Quelle sont les solutions ?

Travaillant sur OS X depuis maintenant quelques mois, le problème est vite apparu : il me faut une machine avec Windows et IE.

Alors il existe bien sûr plusieurs solutions :

  • Le dual boot : un peu long à mettre en place, pas forcément abordable par tous et un peu encombrant si les tests sont ponctuels ;
  • Installer plusieurs navigateurs : Probablement la plus simple solution mais aussi la moins efficace. Il faut savoir que le rendu d’une page (et plus spécifiquement des typographies) dépend du navigateur mais aussi du système d’exploitation utilisé et chaque navigateur n’est évidemment pas disponible sur tous les OS (Internet Explorer par exemple). Un article plus complet sur le sujet ;
  • Utiliser une machine virtuelle : Solution radicale qui vous permettra d’être dans la machine de votre utilisateur cible (même OS et navigateur) tout en développant sur votre OS favori. C’est la solution que nous aborderons au cours de l’article.

Il existe aujourd’hui des solutions telles que Winebottler (équivalent d’un Wine sur des distribution Linux) qui nous permettent de lancer des applications Windows dans OS X. Mais comme expliqué précédemment, il est préférable d’utiliser le même environnement que l’utilisateur final.

Nous allons voir dans cet article de quelle manière nous pouvons tester une application avec IE tout en restant sur un poste OS X. Nous utiliserons VirtualBox afin de lancer une machine virtuelle dotée de Windows 7.

Virtualisons

Ce que j’ai besoin de tester en priorité est surtout l’intégration de l’application, mais cette virtualisation peut aussi être pratique pour tester une application en JS, qui lui aussi est interprété différemment par le navigateur de Microsoft.

Il est bien sûr recommandé de tester toutes les versions d’un navigateur, le plus simple avec IE étant de lancer une VM différente pour chaque version du navigateur.

N’hésitez pas non plus à tester plusieurs navigateurs (Firefox, Chrome, Safari pour ne citer que les plus populaires) au sein d’un même OS, les différences ne sont pas toujours négligeables.

Pour simplifier la démarche je ne créerais qu’une machine virtuelle sur Windows 7 avec Internet Explorer 8, mais le principe reste relativement identique avec un OS ou des navigateurs différents.

Mise en place

Tout d’abord je vous invite à télécharger une version de Windows ainsi que d’IE sur le site de Microsoft.

Cliquez sur Download et sélectionnez les parties du fichier que vous désirez installer sur votre machine virtuelle.

J’aurais besoin d’IE8, je télécharge donc les 4 parties (dont l’exécutable même si celui-ci n’est pas interprété par OS X). Une fois le tout téléchargé, je dois modifier l’extension du fichier .exe en .rar.

Cela permettra à notre logiciel de décompression de décompresser tous les fichiers en une fois.

Nous obtenons alors un fichier .vhd et un fichier .vmc. C’est le premier qui nous intéresse, un .vhd est une sorte d’image disque (comme un .iso) mais pour un disque dur.

Ensuite il nous faut télécharger et installer VirtualBox sur la machine.

Un Windows sauvage apparaît.

Ouvrez VirtualBox et créez une nouvelle machine virtuelle. À l’étape “Disque dur” sélectionnez le fichier .vhd que vous venez de télécharger.

Vous pouvez maintenant lancer la VM. Arrivé à l’écran de connexion entrez le mot de passe “Password1” qui est celui par défaut des images fournies sur le site de Microsoft.

On lance l’application

Maintenant faisons en sorte que notre application tourne correctement sur OS X afin d’y accéder directement depuis IE à travers notre machine virtuelle.

Nous accéderons au site comme si nous étions en réseau local entre 2 ordinateurs, il nous faut donc récupérer l’IP locale de l’hôte. Pour cela, accédez à vos préférences réseaux.

Récupérer son ip

Retournez dans VirtualBox et ouvrez Internet Explorer, entrez l’adresse IP découverte précédemment ainsi que le port de votre application (si besoin).

Nous y sommes

Voilà vous pouvez maintenant découvrir votre application ainsi que tous les bugs graphiques ou fonctionnels lié à l’utilisation d’Internet Explorer.

N’hésitez pas à télécharger et installer d’autres navigateurs dans votre nouvelle VM afin d’avoir une idée la plus large possible du rendu coté utilisateur.

Bonne intégration !

Vous trouverez dans cet article des détails supplémentaires sur les erreurs et bonnes pratiques des tests cross-browser.

L’équipe Synbioz.

Libres d’être ensemble.

Articles connexes

Images, Lazy loading ou Chargement paresseux

19/04/2018

Bonjour à tous, aujourd’hui un sujet à cheval entre intégration et développement front, nous allons faire en sorte d’améliorer les performances de rendu de vos pages web. Je pense pouvoir avancer...

État des lieux des polices

25/01/2018

Bonjour à tous, aujourd’hui j’aimerais revenir sur une notion centrale du webdesign, les polices. Parfois ignorées (oui je te vois dans le fond, jeune intégrateur impétueux que Google Fonts rend...

CSS Grid Layout c'est magique

05/05/2017

Bonjour à tous, aujourd’hui nous allons découvrir ensemble une des plus belles nouveautés de CSS depuis plusieurs années, les Grids. Si je vous dis que c’est l’une des plus belles nouveautés c’est...

Comment remplacer une image en erreur

10/01/2017

Bonjour à tous, aujourd’hui un article très abordable puisque nous allons voir ensemble comment mettre en place un élément de remplacement pour les images afin d’éviter le fameux : Lire la suite...