Votre tâche ne se limite pas à vous assurer que votre site fonctionne parfaitement sur Chrome et Android. Même si le mode Appareil peut simuler un certain nombre d'autres appareils, comme les iPhone, nous vous encourageons à découvrir d'autres solutions de navigateur pour l'émulation.
Résumé
- Si vous ne possédez pas un appareil particulier ou si vous souhaitez effectuer un contrôle ponctuel, la meilleure option consiste à émuler l'appareil directement dans votre navigateur.
- Les émulateurs et simulateurs d'appareils vous permettent de reproduire votre site de développement sur différents appareils depuis votre poste de travail.
- Les émulateurs cloud vous permettent d'automatiser les tests unitaires de votre site sur différentes plates-formes.
Émulateurs de navigateur
Les émulateurs de navigateurs sont parfaits pour tester la réactivité d'un site, mais ils n'émulent pas les différences d'API, de compatibilité CSS et de certains comportements que vous verriez sur un navigateur mobile. Testez votre site sur des navigateurs exécutés sur des appareils physiques pour vous assurer que tout se passe comme prévu.
Vue responsive design de Firefox
Firefox propose une vue responsive design qui vous encourage à ne plus penser en termes d'appareils spécifiques, mais à explorer comment votre conception change à 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, utilisez l'émulation intégrée de Microsoft Edge.
Étant donné qu'Edge n'est pas compatible avec les anciennes versions, utilisez l'émulation d'IE 11 pour simuler l'apparence de votre page dans les anciennes versions d'Internet Explorer.
Émulateurs et simulateurs d'appareils
Les simulateurs et les émulateurs d'appareils ne simulent pas seulement l'environnement du navigateur, mais l'appareil entier. Ils sont utiles pour tester des éléments qui nécessitent une intégration de l'OS, par exemple la saisie de formulaires avec des claviers virtuels.
Android Emulator
Navigateur par défaut 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 Content Shell 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 dispose d'aucune des fonctionnalités spécifiques 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. Vous pourrez alors tester votre site sur l'ancien navigateur Stock pour Android.
Chromium Content Shell sur Android
Shell de contenu Android Emulator
Pour installer Chromium Content Shell pour Android, laissez votre émulateur en cours d'exécution 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 le Content Shell Chromium.
Firefox sur Android
Icône Firefox sur Android Emulator
Comme pour le Content Shell de Chromium, vous pouvez obtenir un APK pour installer Firefox sur l'émulateur.
Téléchargez le fichier .apk approprié sur la page https://ftp.mozilla.org/pub/mozilla.org/mobile/releases/latest/.
Vous pouvez ensuite installer le fichier sur un émulateur ouvert ou 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é, découvrez comment utiliser le simulateur dans la documentation 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.
Émulateurs et simulateurs cloud
Si vous ne pouvez pas utiliser les émulateurs et que vous n'avez pas accès à des appareils physiques, les émulateurs cloud sont la meilleure solution. Un grand avantage des émulateurs cloud par rapport aux appareils réels et aux émulateurs locaux est que vous pouvez automatiser les tests unitaires de votre site sur différentes plates-formes.
- BrowserStack (commercial) est la solution la plus simple à utiliser pour les tests manuels. Vous sélectionnez un système d'exploitation, la version de votre navigateur et le type d'appareil, puis une URL à parcourir. Une machine virtuelle hébergée avec laquelle vous pouvez interagir est alors lancée. Vous pouvez également lancer 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, ce qui peut être très utile pour créer un script de parcours sur votre site et regarder l'enregistrement vidéo de ce parcours par la suite sur différents appareils. Vous pouvez également effectuer des tests manuels sur votre site.
- Device Anywhere (commercial) n'utilise pas d'émulateurs, mais de véritables appareils que vous pouvez contrôler à distance. Cette option est très utile si vous devez reproduire un problème sur un appareil spécifique et que vous ne voyez pas le bug dans l'une des options des guides précédents.
- LambdaTest (commercial) vous aidera à effectuer des tests manuels multinavigateurs 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 même les partager via des intégrations telles que MS Teams, Slack et plus encore. Les utilisateurs peuvent accélérer leurs tests en les exécutant en parallèle.