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 l'affichage d'un site Web sur un appareil mobile, sans nécessiter d'appareil réel. ChromeDriver peut également activer l'émulation mobile, via le paramètre "mobileEmulation" "capability", spécifiée avec une valeur de dictionnaire.

Tout comme dans le panneau "Émulation des outils de développement", ChromeDriver vous permet d'activer l'émulation mobile de deux manières: en spécifiant un appareil connu ou en spécifiant des attributs d'appareil individuels. Format de la "mobileEmulation" le dictionnaire dépend de la méthode souhaitée.

Spécifier un appareil mobile connu

Pour activer l'émulation mobile avec un nom d'appareil spécifique, l'option "mobileEmulation" le dictionnaire doit contenir un "deviceName". Utilisez un nom d'appareil valide provenant du panneau d'émulation 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 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 façon, l'option "mobileEmulation" peut contenir "deviceMetrics" et "clientHints" des dictionnaires et un "userAgent" . Les métriques d'appareil suivantes doivent être spécifiées dans "deviceMetrics" dictionnaire:

"width" (largeur) - La largeur en pixels de l'écran de l'appareil
"height" - La 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" ou "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.
- "modèle" - 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" - 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 s'efforce d'inférer le paramètre "clientHints" à partir de "userAgent". Cette fonctionnalité ne fonctionne pas de manière fiable, mais en raison des ambiguïtés internes liées à "userAgent". format de valeur.

Les téléphones et les tablettes disponibles dans le panneau "Mobile Emulation" (Émulation mobile) 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 complète d'une émulation mobile:

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

Il peut être utile de tester un site Web mobile sur un ordinateur de bureau à l'aide de l'émulation mobile. Toutefois, les testeurs doivent savoir qu'il existe de nombreuses différences subtiles, par exemple:

un GPU entièrement différent, ce qui peut entraîner d'importants changements de performances ;
l'interface utilisateur 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 (dans lequel vous sélectionnez l'une des quelques zones cibles tactiles) n'est pas disponible.
de nombreuses API matérielles (par exemple, un événement de changement d'orientation) ne sont pas disponibles.