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

Émulation mobile

Chrome permet aux utilisateurs d'émuler Chrome sur un appareil mobile à partir de la version pour ordinateur de bureau de Chrome en activant le mode appareil avec les outils pour les développeurs Chrome. Cette fonctionnalité accélère le développement Web et permet aux développeurs de tester rapidement l'affichage d'un site Web sur un appareil mobile, sans avoir besoin d'un appareil réel. ChromeDriver peut également émuler des appareils avec la fonctionnalité "mobileEmulation", spécifiée avec une valeur de dictionnaire.

Comme dans les outils pour les développeurs, il existe deux façons d'activer l'émulation mobile dans ChromeDriver:

Spécifier un appareil connu
Spécifier des attributs d'appareil individuels

Le format du dictionnaire "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, le dictionnaire "mobileEmulation" doit contenir un "deviceName". Utilisez un nom d'appareil valide dans les paramètres des appareils émulés 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())

Source des appareils connus

La liste des appareils connus est générée à partir du panneau d'émulation des outils de développement. Toutefois, vous pouvez utiliser une autre version de ChromeDriver avec une version de Chrome qui dispose d'une liste d'appareils plus récente ou plus ancienne.

Si vous essayez un nom d'appareil que ChromeDriver ne reconnaît pas, un message d'erreur s'affiche: "<your device name> doit être un appareil valide". Pour émuler un appareil que ChromeDriver ne connaît pas, activez l'émulation mobile à l'aide de métriques d'appareil individuelles.

Spécifier des attributs d'appareil individuels

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

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

"width" : largeur de l'écran de l'appareil en pixels
"height" : hauteur en pixels de l'écran de l'appareil
"pixelRatio" : rapport de pixels de l'appareil
"touch" : indique si les événements tactiles doivent être émulés. 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 mobile (barres de défilement en superposition, émission d'événements d'orientation, réduction du contenu pour qu'il s'adapte au viewport, 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", "ChromeOS", "ChromiumOS", "Fuchsia", "Linux", "macOS", "Windows") qui correspond exactement à la valeur renvoyée par Chrome exécuté 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 de ressource pour mobile ou pour ordinateur. En général, Chrome exécuté sur un téléphone mobile Android définit cette valeur sur "true". Chrome sur un appareil Android de type tablette définit cette valeur sur "false". Chrome sur un ordinateur définit également cette valeur sur "false". Vous pouvez utiliser ces informations pour spécifier une émulation réaliste. Cette valeur est obligatoire.
Les autres entrées sont facultatives et peuvent être omises, sauf si elles sont pertinentes pour le test :
- "marques" : liste de paires marque / version majeure. En cas d'omission, le navigateur utilise ses propres valeurs.
- "fullVersionList" : liste des paires marque / version. Il 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 de 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" : nombre de bits de la 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 dont la valeur par défaut est "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". Par conséquent, cette valeur peut être omise.

Si le dictionnaire "clientHints" est omis (mode ancien), ChromeDriver s'efforce d'inférer les "clientHints" à partir de "userAgent". Cette fonctionnalité n'est pas fiable, en raison des ambiguïtés internes du format de valeur "userAgent".

Les téléphones et tablettes disponibles dans le panneau "Émulation mobile" se trouvent dans le code source DevTools.

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)

JSON

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

"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
  }
}

Émulation mobile par rapport aux appareils réels

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

Les appareils mobiles disposent souvent d'un GPU différent, ce qui peut entraîner de grandes variations de performances.
L'UI mobile n'est pas émulée (en particulier, le masquage de la barre d'adresse affecte la hauteur de la page).
Les pop-ups de désambiguïsation (dans lesquels vous sélectionnez l'une des cibles tactiles proposées) ne sont pas acceptés.
De nombreuses API matérielles (par exemple, l'événement orientationchange) sont indisponibles.