Votre tâche ne se limite pas à vous assurer que votre site fonctionne correctement sur Chrome et Android. Bien que le mode Appareil puisse simuler toute une gamme d'autres appareils tels que des iPhone, nous vous encourageons à consulter les solutions d'émulation d'autres navigateurs.
Résumé
- Si vous n'avez pas d'appareil en particulier ou que vous souhaitez effectuer une vérification ponctuelle, la meilleure solution consiste à émuler l'appareil directement dans votre navigateur.
- Les émulateurs d'appareils et les simulateurs vous permettent d'imiter votre site de développement sur toute une gamme d'appareils depuis votre poste de travail.
- Les émulateurs dans le cloud vous permettent d'automatiser les tests unitaires pour votre site sur différentes plates-formes.
Émulateurs de navigateur
Les émulateurs de navigateur sont parfaits pour tester la réactivité d'un site, mais ils n'émulent pas les différences d'API, de compatibilité CSS ni de certains comportements que vous pourriez rencontrer sur un navigateur mobile. Testez votre site sur des navigateurs fonctionnant sur des appareils réels pour vous assurer que tout se comporte comme prévu.
Vue Responsive Design de Firefox
Firefox dispose d'une vue de conception réactive qui vous incite à ne plus penser en termes d'appareils spécifiques et à explorer plutôt comment votre conception change pour des tailles d'écran courantes ou votre propre taille en faisant glisser les bords.
Émulation F12 d'Edge
Pour émuler des téléphones Windows Phone, utilisez l'émulation intégrée de Microsoft Edge.
Comme Edge n'est pas compatible avec les anciennes versions, utilisez l'émulation d'IE 11 pour simuler l'apparence de votre page dans d'anciennes versions d'Internet Explorer.
Émulateurs et simulateurs d'appareils
Les simulateurs d'appareils et les émulateurs simulent non seulement l'environnement du navigateur, mais aussi l'ensemble de l'appareil. Ils sont utiles pour tester les éléments qui nécessitent une intégration de l'OS, comme la saisie de formulaire avec des claviers virtuels.
Android Emulator
Navigateur standard dans Android Emulator
Pour le moment, il n'est pas possible d'installer Chrome sur un émulateur Android. Toutefois, vous pouvez utiliser le navigateur Android, le shell de contenu Chromium et Firefox pour Android, que nous aborderons plus loin dans ce guide. Chromium Content Shell utilise le même moteur de rendu Chrome, mais ne propose aucune des fonctionnalités propres au navigateur.
Android Emulator est fourni avec le SDK Android, que vous devez télécharger ici. Suivez ensuite les instructions pour configurer un appareil virtuel et démarrer l'émulateur.
Une fois l'émulateur démarré, cliquez sur l'icône du navigateur pour tester votre site sur l'ancien navigateur Stock pour Android.
Shell de contenu Chromium sur Android
Shell de contenu Android Emulator
Pour installer l'interface système de contenu Chromium pour Android, laissez votre émulateur s'exécuter et exécutez les commandes suivantes dans une invite de commande:
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 avec l'interface système de contenu Chromium.
Firefox sur Android
Icône Firefox sur Android Emulator
Comme pour le shell de contenu de Chromium, vous pouvez obtenir un APK pour installer Firefox sur l'émulateur.
Téléchargez le fichier .apk approprié à l'adresse https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.
Vous pouvez alors installer le fichier sur un émulateur ouvert ou sur un appareil Android connecté à l'aide de 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 pouvez installer depuis l'App Store.
Lorsque vous avez terminé, apprenez à utiliser le simulateur en consultant la documentation d'Apple.
Modern.IE
VM IE moderne
Les machines virtuelles Modern.IE vous permettent d'accéder à différentes versions d'IE sur votre ordinateur via VirtualBox (ou VMWare). Choisissez une machine virtuelle sur la page de téléchargement ici.
Émulateurs et simulateurs dans le cloud
Si vous ne pouvez pas utiliser les émulateurs et que vous n'avez pas accès à des appareils réels, les émulateurs basés sur le cloud sont la deuxième meilleure option. L'un des principaux avantages des émulateurs dans le cloud par rapport aux appareils réels et aux émulateurs locaux est que vous pouvez automatiser les tests unitaires pour votre site sur différentes plates-formes.
- BrowserStack (commercial) est la plus facile à utiliser pour les tests manuels. Vous sélectionnez un système d'exploitation, la version de votre navigateur et votre type d'appareil, puis une URL à parcourir. Le système lance alors une machine virtuelle hébergée avec laquelle vous pouvez interagir. Vous pouvez également déclencher plusieurs émulateurs sur le même écran, ce qui vous permet de tester l'apparence de votre application sur plusieurs appareils en même temps.
- SauceLabs (commercial) vous permet d'exécuter des tests unitaires dans un émulateur. Cela peut s'avérer très utile pour rédiger le script d'un flux sur votre site et regarder ensuite l'enregistrement vidéo de ce processus sur différents appareils. Vous pouvez également effectuer des tests manuels sur votre site.
- Device Anywhere (commercial) n'utilise pas d'émulateurs, mais des appareils réels que vous pouvez contrôler à distance. Cette fonctionnalité est très utile si vous devez reproduire un problème sur un appareil spécifique et que le bug ne s'affiche pour aucune des options décrites dans les guides précédents.
- LambdaTest (commercial) vous permet d'effectuer des tests manuels de plusieurs navigateurs sur une combinaison de plus de 2 000 navigateurs et systèmes d'exploitation. Les utilisateurs pourront enregistrer des vidéos de bugs complexes et les partager via des intégrations telles que MS Teams, Slack, etc. Les utilisateurs peuvent accélérer leurs tests en les exécutant en parallèle.