Partager via

Émuler et tester d’autres navigateurs

  • Article

Pour vous assurer que votre site web fonctionne pour tous vos utilisateurs, testez votre site web sur d’autres navigateurs et appareils. Tous vos utilisateurs n’utilisent pas le navigateur et l’appareil que vous avez utilisés lors du développement. Nous vous encourageons à consulter les solutions d’émulation fournies par d’autres navigateurs, en plus d’utiliser l’outil d’émulation d’appareil dans Microsoft Edge DevTools.

Résumé

Il existe plusieurs niveaux de test que vous pouvez effectuer pour tester votre site web dans différentes conditions :

  • Les émulateurs de navigateur vous aident à tester rapidement l’apparence et le comportement de votre site web à différentes tailles d’écran et résolutions, avec l’émulation d’événements tactiles et en remplaçant la chaîne User-Agent que le navigateur envoie. Vous utilisez des émulateurs de navigateur à partir du navigateur sur lequel vous développez. Voir Émulateurs de navigateur, ci-dessous.

  • Les émulateurs et simulateurs d’appareil vous permettent d’exécuter d’autres appareils à partir de votre machine de développement et de tester votre site web comme si vous utilisiez ces autres appareils. Consultez Émulateurs et simulateurs d’appareil ci-dessous.

  • Les émulateurs basés sur le cloud vous permettent d’exécuter des tests automatisés pour votre site web sur différentes plateformes. Consultez Émulateurs et simulateurs basés sur le cloud, ci-dessous.

Émulateurs de navigateur

Les émulateurs de navigateur sont parfaits pour tester l’apparence et le comportement de votre site web à différentes tailles d’écran et résolutions, ou lorsque les événements tactiles sont activés, ou lorsque la chaîne User-Agent est définie sur la chaîne User-Agent d’un autre navigateur.

Vous utilisez des émulateurs de navigateur à partir du navigateur sur lequel vous développez. Par exemple, dans Microsoft Edge, vous pouvez utiliser l’outil Émulation d’appareil dans DevTools pour obtenir une approximation de l’apparence et du comportement de votre site web sur différents appareils. Pour plus d’informations sur l’utilisation de l’outil d’émulation d’appareil dans Microsoft Edge DevTools, consultez Émuler des appareils mobiles (émulation d’appareil).

Les émulateurs de navigateur n’émulent pas les différences de prise en charge des API web ou css. Par exemple, l’outil d’émulation d’appareil dans Microsoft Edge n’émule pas la façon dont les différentes API web ou fonctionnalités CSS que votre site peut utiliser sont prises en charge dans Firefox ou Safari. Pour être certain que tout se comporte comme prévu, testez votre site sur des navigateurs s’exécutant sur des appareils réels.

Voici quelques émulateurs de navigateur que vous pouvez utiliser pour tester votre site web sur d’autres navigateurs :

Émulateurs et simulateurs d’appareil

Les simulateurs et émulateurs d’appareil simulent l’ensemble de l’appareil, plutôt que de simuler simplement l’environnement du navigateur. Chaque simulateur est utile pour tester des aspects qui nécessitent une intégration avec le système d’exploitation particulier, tels que l’entrée de formulaire à l’aide de claviers d’appareil mobile.

Vous installez des émulateurs d’appareil et des simulateurs sur votre ordinateur de développement, afin de pouvoir continuer à tester votre site web sur la même machine que celle sur laquelle vous développez, tout en simulant l’expérience d’utilisation d’un autre appareil.

Émulateur Android

Pour le moment, il n’existe aucun moyen d’installer Microsoft Edge sur un émulateur Android. Toutefois, vous pouvez utiliser le navigateur Android, l’interpréteur de commandes de contenu Chromium et Firefox pour Android, qui sont abordés plus loin dans cet article. Chromium Content Shell exécute le même moteur de rendu Chromium que Microsoft Edge, mais est fourni sans fonctionnalités spécifiques au navigateur.

Pour utiliser l’émulateur Android :

  1. Téléchargez l’émulateur Android, qui est empaqueté dans le cadre du Kit de développement logiciel (SDK) Android, en téléchargeant Android Studio.

  2. Configurez un appareil virtuel en suivant les étapes décrites dans Créer et gérer des appareils virtuels.

  3. Démarrez l’émulateur en suivant les étapes décrites dans Exécuter des applications sur l’émulateur Android.

  4. Une fois votre émulateur démarré, sélectionnez l’icône Navigateur et testez votre site web sur l’ancien navigateur Stock Pour Android.

Interpréteur de commandes de contenu Chromium sur Android

Pour installer Chromium Content Shell pour Android, maintenez votre émulateur en cours d’exécution et exécutez la commande suivante :

git clone https://github.com/PaulKinlan/chromium-android-installer.git
chmod u+x ./chromium-android-installer/*.sh
./chromium-android-installer/install-chromeandroid.sh

Vous pouvez maintenant tester votre site web avec Chromium Content Shell.

Firefox sur Android

À l’instar de Chromium Content Shell, vous pouvez obtenir un APK pour installer Firefox sur l’émulateur.

Téléchargez le fichier .apk correct.

Pour installer le fichier sur un émulateur ouvert ou un appareil Android connecté, exécutez la commande suivante :

adb install <path_to_APK>/fennec-XX.X.XX.android-arm.apk

Simulateur iOS

Le simulateur iOS pour Mac OS X est fourni avec Xcode, que vous installez à partir de l’App Store.

Lorsque vous avez terminé, découvrez comment utiliser le simulateur via la documentation apple developer.

Pour éviter d’avoir à ouvrir Xcode chaque fois que vous souhaitez utiliser le simulateur iOS, ouvrez le simulateur iOS, cliquez avec le bouton droit sur l’icône simulateur iOS dans votre dock, puis sélectionnez Conserver dans le dock. Maintenant, vous pouvez simplement cliquer sur l’icône chaque fois que vous en avez besoin.

Machines virtuelles

Pour tester votre site web sur d’autres systèmes d’exploitation, vous pouvez exécuter des machines virtuelles sur votre appareil de développement. Par exemple, Hyper-V est un outil de virtualisation qui vous permet d’exécuter différentes versions de Windows et Linux. Pour en savoir plus, consultez Présentation d’Hyper-V sur Windows 10.

Pour les autres machines virtuelles, consultez Machines virtuelles dans Stratégies pour effectuer des tests sur MDN.

Émulateurs et simulateurs basés sur le cloud

Les émulateurs et simulateurs basés sur le cloud sont des solutions commerciales permettant de tester votre site web sur différents appareils et navigateurs sans rien installer sur votre ordinateur de développement. Ils sont utiles lorsque vous n’avez pas accès à des appareils réels ou lorsque vous ne pouvez pas utiliser d’émulateurs locaux. Les solutions basées sur le cloud sont également utiles pour automatiser les tests sur différentes plateformes.

Consultez Émulateurs dans Stratégies pour effectuer des tests sur MDN.

Voir aussi

Conception réactive :

Android :

Pomme:

MDN :

Notes

Les parties de cette page sont des modifications basées sur le travail créé et partagé par Google et utilisées conformément aux termes décrits dans la licence internationale Creative Commons Attribution 4.0. La page d’origine est disponible ici et a été créée par Meggin Kearney (Rédacteur technique) et Paul Bakaus (Open Web Developer Advocate chez Google | Outils, Performance, Animation, Expérience utilisateur).

Licence Creative Commons Cette œuvre est concédée sous licence creative commons attribution 4.0 international.