Questa pagina è stata tradotta dall'API Cloud Translation.

Emulazione di dispositivi mobili

Chrome consente agli utenti di emulare Chrome su un dispositivo mobile dalla versione desktop di Chrome attivando la modalità dispositivo con Chrome DevTools. Questa funzionalità consente di velocizzare lo sviluppo web e permette agli sviluppatori di testare rapidamente il rendering di un sito web su un dispositivo mobile, senza bisogno di un dispositivo reale. ChromeDriver può anche emulare i dispositivi con la funzionalità "mobileEmulation", specificata con un valore del dizionario.

Come in DevTools, in ChromeDriver esistono due modi per attivare l'emulazione mobile:

Specificare un dispositivo noto
Specificare gli attributi dei singoli dispositivi

Il formato del dizionario "mobileEmulation" dipende dal metodo necessario.

Specificare un dispositivo mobile noto

Per attivare l'emulazione del dispositivo con un dispositivo specifico, il dizionario "mobileEmulation" deve contenere un "deviceName". Utilizza un nome dispositivo valido dalle impostazioni dei dispositivi virtuali di DevTools come valore per "deviceName".

Screenshot dell'impostazione Dispositivi

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

Origine dei dispositivi noti

L'elenco dei dispositivi noti viene generato dal riquadro Emulazione di DevTools. Tuttavia, puoi utilizzare una versione diversa di ChromeDriver con una versione di Chrome che ha un elenco di dispositivi più recente o precedente.

Se provi un nome di dispositivo non riconosciuto da ChromeDriver, viene visualizzato un messaggio di errore: "<your device name> deve essere un dispositivo valido". Per emulare un dispositivo sconosciuto a ChromeDriver, attiva l'emulazione mobile utilizzando le metriche dei singoli dispositivi.

Specificare gli attributi dei singoli dispositivi

Puoi attivare l'emulazione mobile specificando singoli attributi. Il dizionario "mobileEmulation" può contenere i dizionari deviceMetrics e clientHints e una stringa userAgent.

Nel dizionario "deviceMetrics" devono essere specificate le seguenti metriche del dispositivo:

"width": la larghezza in pixel dello schermo del dispositivo
"height": l'altezza in pixel dello schermo del dispositivo
"pixelRatio": il rapporto pixel del dispositivo
"touch": indica se emulare gli eventi touch. Il valore predefinito è true e in genere può essere omesso.
"mobile": indica se il browser deve comportarsi come uno user agent mobile (barra delle scorribande in overlay, emissione di eventi di orientamento, riduzione dei contenuti per adattarli al viewport e così via). Il valore predefinito è true e in genere può essere omesso.

Il dizionario "clientHints" può avere le seguenti voci:

"platform": il sistema operativo. Può essere un valore noto ("Android", "ChromeOS", "ChromiumOS", "Fuchsia", "Linux", "macOS", "Windows") che corrisponde esattamente al valore restituito da Chrome in esecuzione sulla piattaforma in questione oppure un valore definito dall'utente. Questo valore è obbligatorio.
"mobile": indica se il browser deve richiedere una versione della risorsa per dispositivi mobili o desktop. In genere, Chrome su uno smartphone con Android imposta questo valore su true. Chrome su un tablet Android imposta questo valore su false. Anche Chrome su un computer imposta questo valore su false. Puoi utilizzare queste informazioni per specificare un'emulazione realistica. Questo valore è obbligatorio.
Le voci rimanenti sono facoltative e possono essere omesse, a meno che non siano pertinenti per il test:
- "brands": elenco di coppie di brand / versione principale. Se viene omesso, il browser utilizza i propri valori.
- "fullVersionList": elenco di coppie di brand / versione. È stato omesso il fatto che il browser utilizzi i propri valori.
- "platformVersion": versione del sistema operativo. Il valore predefinito è una stringa vuota.
- "model": modello del dispositivo. Il valore predefinito è una stringa vuota.
- "architecture": l'architettura della CPU. I valori noti sono "x86" e "arm". L'utente è libero di fornire qualsiasi valore di stringa. Il valore predefinito è una stringa vuota.
- "bitness": la dimensione in bit della piattaforma. I valori noti sono "32" e "64". L'utente è libero di fornire qualsiasi valore di stringa. Il valore predefinito è una stringa vuota.
- "wow64": emulazione di Windows 32 su Windows 64. Un valore booleano predefinito su false.

ChromeDriver è in grado di dedurre il valore "userAgent" da "clientHints" sulle seguenti piattaforme: "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows". Pertanto, questo valore può essere omesso.

Se il dizionario "clientHints" viene omesso (modalità precedente), ChromeDriver fa del suo meglio per dedurre "clientHints" da "userAgent". Questa funzionalità non è affidabile a causa di ambiguità interne del formato del valore "userAgent".

Gli smartphone e i tablet disponibili nel riquadro Emulazione dispositivo mobile sono riportati nel codice sorgente di 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

Esempio di configurazione completa dell'emulazione mobile:

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

Emulazione mobile rispetto ai dispositivi reali

È utile testare i siti web su un computer con emulazione mobile, ma non è una replica perfetta dei test sul dispositivo reale. Esistono alcune differenze fondamentali, tra cui:

I dispositivi mobili spesso hanno una GPU diversa, il che può comportare notevoli variazioni del rendimento.
L'interfaccia utente mobile non viene emulata (in particolare, la barra degli indirizzi nascosta influisce sull'altezza della pagina).
I popup di disambiguazione (in cui selezioni uno di alcuni target di tocco) non sono supportati.
Molte API hardware (ad esempio l'evento orientationchange) non sono disponibili.