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

Émulation mobile

Chrome permet aux utilisateurs d'émuler Chrome sur un appareil mobile (tel qu'une tablette "Nexus 7" ou un "iPhone 5") à partir de la version pour ordinateur de Chrome, en activant la fonctionnalité d'émulation mobile dans les outils pour les développeurs Chrome. Cette fonctionnalité accélère le développement Web et permet aux développeurs de tester rapidement le rendu d'un site Web sur un appareil mobile, sans nécessiter d'appareil réel. ChromeDriver peut également activer l'émulation mobile via la fonctionnalité "mobileEmulation", spécifiée à l'aide d'une valeur de dictionnaire.

Tout comme dans le panneau "DevTools Émulation", ChromeDriver propose deux façons d'activer l'émulation Mobile: en spécifiant un appareil connu ou en spécifiant des attributs d'appareil individuels. Le format du dictionnaire "mobileEmulation" dépend de la méthode souhaitée.

Spécification d'un appareil mobile connu

Pour activer l'émulation mobile avec un nom d'appareil spécifique, le dictionnaire "mobileEmulation" doit contenir un "deviceName". Utilisez un nom d'appareil valide provenant du panneau d'émulation DevTools comme valeur pour "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 des attributs d'appareils individuels

Il est également possible d'activer l'émulation mobile en spécifiant des attributs individuels. Pour activer l'émulation mobile de cette manière, le dictionnaire "mobileEmulation" peut contenir les dictionnaires "deviceMetrics" et "clientHints", ainsi qu'une chaîne "userAgent". Les métriques d'appareil suivantes doivent être spécifiées dans le dictionnaire "deviceMetrics" :

"width" : la largeur de l'écran de l'appareil, en pixels.
"height" : hauteur de l'écran de l'appareil, en pixels.
"pixelRatio" : ratio de pixels de l'appareil
"touch" : permet d'émuler 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 en superposition, émission d'événements d'orientation, réduction du contenu pour l'adapter à la fenêtre d'affichage, etc.). La valeur par défaut est "true" et peut généralement être omise.

Le dictionnaire "clientHints" peut contenir les entrées suivantes:

"platform" : système d'exploitation. Il peut s'agir d'une valeur connue ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS" ou "Windows"), qui correspond exactement à celle renvoyée par Chrome exécuté sur la plate-forme donnée, ou d'une valeur personnalisée. Cette valeur est obligatoire.
"mobile" : indique si le navigateur doit demander une version de ressources pour mobile ou ordinateur. Généralement, Chrome exécuté sur un téléphone mobile avec Android définit cette valeur sur "true". Sur une tablette Android, Chrome définit cette valeur sur "false". Sur un ordinateur de bureau, Chrome 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 :
- "marques" : liste des paires marque / version majeure. Si cette valeur est omise, le navigateur utilise ses propres valeurs.
- "fullVersionList" : liste des paires marque / version. Elle a omis que le navigateur utilise ses propres valeurs.
- "platformVersion" : 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 processeur. 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" : bit de 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 la valeur "userAgent" à partir de "clientHints" sur les plates-formes suivantes: "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS" et "Windows". Cette valeur peut donc être omise.

Si le dictionnaire "clientHints" est omis (ancien mode), ChromeDriver déduise au mieux les "clientHints" à partir de "userAgent". Toutefois, cette fonctionnalité ne fonctionne pas de manière fiable en raison d'ambiguïtés internes concernant le format de valeur "userAgent".

Les téléphones et tablettes disponibles dans le panneau "Mobile Emulation" (Émulation mobile) sont disponibles 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érences entre l'émulation mobile et les appareils réels

Tester un site Web mobile sur un ordinateur à l'aide d'une émulation mobile peut être utile, mais les testeurs doivent être conscients qu'il existe de nombreuses différences subtiles, telles que:

des GPU complètement différents, ce qui peut entraîner des variations de performances importantes,
L'interface utilisateur pour mobile n'est pas émulée (en particulier, le masquage de la barre d'URL a une incidence sur la hauteur de la page).
Le pop-up de sélection d'application (où vous sélectionnez l'une des quelques zones cibles tactiles) n'est pas pris en charge.
de nombreuses API matérielles (par exemple, l'événement de changement d'orientation) ne sont pas disponibles.