Cette page a été traduite par l'API Cloud Translation.

Émulation mobile

Chrome permet aux utilisateurs d'émuler Chrome sur un appareil mobile à partir d'un ordinateur de bureau. version de Chrome, en activant mode appareil avec les outils pour les développeurs Chrome. Cette fonctionnalité accélère le développement Web, permet aux développeurs de tester rapidement la façon dont un site Web s'affiche sur un appareil mobile, sans nécessiter d'appareil réel. ChromeDriver peut et émuler les appareils avec la fonction "mobileEmulation" spécifique, spécifiée par un du dictionnaire.

Comme dans les outils de développement, ChromeDriver vous permet d'activer l'émulation mobile de deux manières:

Spécifier un appareil connu
Spécifier les attributs de chaque appareil

Format de la fonction "mobileEmulation" dépend de la méthode requise.

Spécifier un appareil mobile connu

Pour activer l'émulation d'appareil avec un appareil spécifique, l'option "mobileEmulation" le dictionnaire doit contenir un "deviceName". Utilisez un nom d'appareil valide provenant des paramètres des appareils émulés de DevTools comme valeur de "deviceName".

Capture d'écran du paramètre "Appareils"

Java

Map<String, String> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceName", "Nexus 5");
ChromeOptions chromeOptions = new ChromeOptions();
chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation);
WebDriver driver = new ChromeDriver(chromeOptions);

Ruby

mobile_emulation = { "deviceName" => "Nexus 5" }
caps = Selenium::WebDriver::Remote::Capabilities.chrome(
   "chromeOptions" => { "mobileEmulation" => mobile_emulation })
driver = Selenium::WebDriver.for :remote, url: 'http://localhost:4444/wd/hub',
desired_capabilities: caps

Python

from selenium import webdriver
mobile_emulation = { "deviceName": "Nexus 5" }
chrome_options = webdriver.ChromeOptions()
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Remote(command_executor='http://127.0.0.1:4444/wd/hub',
desired_capabilities = chrome_options.to_capabilities())

Spécifier les attributs de chaque appareil

Vous pouvez activer l'émulation mobile en spécifiant des attributs individuels. La "mobileEmulation" le dictionnaire peut contenir deviceMetrics, clientHints de dictionnaires et d'une chaîne userAgent.

Les métriques d'appareil suivantes doivent être spécifiées dans "deviceMetrics" dictionnaire:

"width" - La largeur en pixels de l'écran de l'appareil
"height" : hauteur en pixels de l'écran de l'appareil
"pixelRatio" – Le rapport de pixels de l'appareil
"toucher" - émule ou non les événements tactiles. La valeur par défaut est "true" et peut généralement être omise.
"mobile" - indique si le navigateur doit se comporter comme un user-agent pour mobile (barres de défilement superposées, émettre des événements d'orientation, réduire le contenu pour l'adapter à la fenêtre d'affichage, etc.). La valeur par défaut est "true" et peut généralement être omise.

"clientHints" peut contenir les entrées suivantes:

"plate-forme" : le système d'exploitation. Il peut s'agir d'une valeur connue ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows"), qui correspond exactement à la valeur renvoyée par Chrome exécutée sur la plate-forme donnée, ou d'une valeur définie par l'utilisateur. Cette valeur est obligatoire.
"mobile" - Indique si le navigateur doit demander une version des ressources pour mobile ou pour ordinateur. Généralement, Chrome s'exécute sur un téléphone mobile avec Android définit cette valeur sur "true". Chrome sur une tablette Android définit cette valeur sur "false". Chrome sur un ordinateur de bureau définit également cette valeur sur "false". Vous pouvez utiliser ces informations pour spécifier une émulation réaliste. Cette valeur est obligatoire.
Les entrées restantes sont facultatives et peuvent être omises, sauf si elles sont pertinentes pour le test: <ph type="x-smartling-placeholder">
- "marques" - Liste des paires marque / version majeure. En cas d'omission, le navigateur utilise ses propres valeurs.
- "fullVersionList" - Liste des paires marque / version. Il a omis le navigateur utilise ses propres valeurs.
- "Version de la plate-forme" - Version de l'OS La valeur par défaut est une chaîne vide.
- "model" - modèle de l'appareil. La valeur par défaut est une chaîne vide.
- « Architecture » - Architecture du CPU Les valeurs connues sont "x86" et "arm". L'utilisateur est libre de fournir n'importe quelle valeur de chaîne. La valeur par défaut est une chaîne vide.
- "bitness" - plate-forme. Les valeurs connues sont "32" et "64". L'utilisateur est libre de fournir n'importe quelle valeur de chaîne. La valeur par défaut est une chaîne vide.
- "wow64" - Émulation de Windows 32 sur Windows 64 Valeur booléenne définie par défaut sur "false".

ChromeDriver peut déduire "userAgent" valeur de "clientHints" sur les plates-formes suivantes : "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS" et "Windows". Cette valeur peut donc être omise.

Si "clientHints" dictionnaire est omis (ancien mode) ChromeDriver fait de son mieux pour déduire le paramètre "clientHints" à partir de "userAgent". Cette fonctionnalité n'est pas fiable en raison des ambiguïtés internes de "userAgent" format de valeur.

Les téléphones et tablettes disponibles dans le panneau d'émulation mobile peuvent se trouvent dans le code source des outils de développement.

Java

Map<String, Object> deviceMetrics = new HashMap<>();
deviceMetrics.put("width", 360);
deviceMetrics.put("height", 640);
deviceMetrics.put("pixelRatio", 3.0);
Map<String, Object> mobileEmulation = new HashMap<>();
mobileEmulation.put("deviceMetrics", deviceMetrics);
mobileEmulation.put("userAgent", "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19");
Map<String, Object> clientHints = new HashMap<>();
clientHints.put("platform", "Android");
clientHints.put("mobile", true);
mobileEmulation.put("clientHints", clientHints);
ChromeOptions chromeOptions = new ChromeOptions(); chromeOptions.setExperimentalOption("mobileEmulation", mobileEmulation); WebDriver driver = new ChromeDriver(chromeOptions);

Ruby

mobile_emulation = {
   "deviceMetrics" => { "width" => 360, "height" => 640, "pixelRatio" => 3.0 },
   "userAgent" => "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
   "clientHints" => { "platform" => "Android", "mobile" => true}
}
caps = Selenium::WebDriver::Remote::Capabilities.chrome("chromeOptions" => mobile_emulation)
driver = Selenium::WebDriver.for :remote, url: 'http://localhost:4444/wd/hub', desired_capabilities: caps

Python

from selenium import webdriver
from selenium.webdriver.chrome.options import Options
mobile_emulation = {
   "deviceMetrics": { "width": 360, "height": 640, "pixelRatio": 3.0 },
   "userAgent": "Mozilla/5.0 (Linux; Android 4.2.1; en-us; Nexus 5 Build/JOP40D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19",
   "clientHints": {"platform": "Android", "mobile": True} }
chrome_options = Options()
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Chrome(chrome_options = chrome_options)

Exemple de configuration d'émulation mobile complète:

JSON

"mobileEmulation": {
  "userAgent": "Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/111.0.0.0 Mobile Safari/537.36",
  "deviceMetrics": {
     "mobile": true,
     "touch": true,
     "width": 412,
     "height": 823,
     "pixelRatio": 1.75
  },
  "clientHints": {
     "brands": [
        {"brand": "Google Chrome", "version": "111"},
        {"brand": "Chromium", "version": "111"}
     ],
     "fullVersionList": [
        {"brand": "Google Chrome", "version": "111.0.5563.64"},
        {"brand": "Chromium", "version": "111.0.5563.64"}
     ],
     "platform": "Android",
     "platformVersion": "11",
     "architecture": "arm",
     "model": "lorem ipsum (2022)"
     "mobile": true,
     "bitness": "32",
     "wow64": false
  }
}

Différence entre l'émulation mobile et les appareils réels

Il est utile de tester des sites web sur un ordinateur de bureau avec l’émulation mobile, mais ce n'est pas une réplication parfaite des tests sur l'appareil réel. Il existe quelques différences clés, y compris les suivantes:

Les appareils mobiles ont souvent un GPU différent, ce qui peut entraîner des variations importantes des performances.
L'interface utilisateur pour mobile n'est pas émulée (en particulier, le masquage de la barre d'adresse a une incidence sur la hauteur de la page).
Les pop-ups de sélection d'application (dans lesquels vous sélectionnez l'une des quelques zones cibles tactiles) ne sont pas acceptés.
De nombreuses API matérielles (par exemple, l'événement orientationchange) ne sont pas disponibles.