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à velocizza lo sviluppo web e consente agli sviluppatori di testare rapidamente come un sito web viene visualizzato su un dispositivo mobile, senza richiedere 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.

Specifica un dispositivo mobile noto

Per abilitare l'emulazione di 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())

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": le proporzioni 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 per dispositivi mobili (barre di scorrimento overlay, emissione di eventi di orientamento, riduzione dei contenuti per adattarli all'area visibile 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 risorsa mobile 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" - 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 piattaforma a 32 o 64 bit. 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)

Esempio di configurazione completa dell'emulazione 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
  }
}

Differenza tra emulazione mobile e 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 hanno spesso una GPU diversa, il che può comportare notevoli variazioni del rendimento.
L'UI per dispositivi mobili non è emulata (in particolare, nascondere la barra degli indirizzi 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.