Il ne s'agit pas seulement de vous assurer que votre site fonctionne de manière optimale sur Chrome et Android. Même si Le mode Appareil peut simuler une gamme d'autres appareils, comme l'iPhone. Nous vous conseillons de consulter d'autres et de navigateurs pour l'émulation.
Résumé
- Lorsque vous n'avez pas d'appareil en particulier ou que vous souhaitez faire un contrôle ponctuel, la meilleure option consiste à émuler l'appareil directement dans votre navigateur.
- Les émulateurs et simulateurs d'appareils vous permettent d'imiter votre site de développement sur toute une gamme d'appareils, votre station 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 navigateur sont parfaits pour tester la réactivité d'un site, mais ils n'émulent pas les différences. dans l'API, la prise en charge CSS et certains comportements que vous pourriez voir dans un navigateur mobile. Testez votre site sur navigateurs exécutés sur des appareils réels pour s’assurer que tout se comporte comme prévu.
Firefox Vue Responsive Design
Firefox propose un Responsive Design qui vous encourage à cesser de penser en termes de des appareils et explorer plutôt comment votre conception change aux tailles d'écran courantes ou à votre propre taille en 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.
Edge n'étant pas fourni avec l'ancienne compatibilité, utilisez l'émulation IE 11 pour simuler comment votre cette page s'afficherait dans les anciennes versions d'Internet Explorer.
Émulateurs et simulateurs d'appareils
Les simulateurs et émulateurs d'appareils simulent non seulement l'environnement de navigation, mais aussi l'ensemble de l'appareil. Ils sont utiles pour tester des éléments qui nécessitent une intégration de l'OS, comme la saisie de formulaire avec des claviers.
Android Emulator
Navigateur d'applications dans Android Emulator
Pour le moment, il n'existe aucun moyen d'installer Chrome sur un émulateur Android. Vous pouvez toutefois utiliser le navigateur Android, le shell de contenu Chromium et Firefox pour Android, que nous aborderons . Chromium Content Shell utilise le même moteur de rendu Chrome, mais n'inclut pas des fonctionnalités propres au navigateur.
Android Emulator est fourni avec le SDK Android que vous devez télécharger ici. Ensuite, Suivez les instructions pour configurer un appareil virtuel et démarrer l'émulateur.
Une fois votre émulateur démarré, cliquez sur l'icône Navigateur pour tester votre site sur le 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 la commande suivante : à l'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 shell de contenu Chromium.
Firefox sur Android
Icône Firefox sur Android Emulator
Comme Content Shell dans Chromium, vous pouvez obtenir un APK pour installer Firefox sur l'émulateur.
Téléchargez le bon fichier .apk depuis 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 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 en consultant 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 dans le cloud
Si vous ne pouvez pas utiliser les émulateurs et que vous n'avez pas accès à de vrais appareils, les émulateurs dans le cloud sont la prochaine meilleure chose. Un avantage majeur des émulateurs dans le cloud par rapport aux appareils réels et aux émulateurs locaux est que vous pouvez automatiser des tests unitaires pour votre site sur différentes plates-formes.
- BrowserStack (commercial) est le navigateur le plus simple à utiliser pour les tests manuels. Vous sélectionnez un système d'exploitation sélectionnez la version de votre navigateur et votre type d'appareil, sélectionnez l'URL à parcourir, et un une VM hébergée avec laquelle vous pouvez interagir. Vous pouvez également lancer plusieurs émulateurs dans le même écran, ce qui vous permet de tester l'apparence de votre application sur plusieurs appareils en même temps en temps réel.
- SauceLabs (commercial) vous permet d'exécuter des tests unitaires dans un émulateur, par exemple très utile pour créer un script de flux sur votre site et visionner l'enregistrement vidéo sur différents appareils. Vous pouvez également effectuer des tests manuels sur votre site.
- Device Anywhere (commercial) n'utilise pas d'émulateurs, mais de vrais appareils que vous pouvez contrôler à distance. Cela s'avère très utile lorsque vous devez reproduire un problème sur une page et que le bug ne s'affiche sur aucune des options des guides précédents.
- LambdaTest (commercial) vous aide à tester manuellement plusieurs navigateurs sur une combinaison. sur plus de 2 000 navigateurs systèmes d'exploitation. Les utilisateurs pourront enregistrer des vidéos de bugs complexes partagez-les via des intégrations telles que MS Teams, Slack, etc. Les utilisateurs peuvent accélérer leurs tests en l'exécution de tests en parallèle.