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())

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 de l'écran de l'appareil en pixels
"pixelRatio" : rapport de pixels de l'appareil
"touch" : é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.

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 la 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 inférer 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 (ancien mode), ChromeDriver s'efforce de déduire le "clientHints" 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)

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 une é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'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.