Emulazione di dispositivi mobili

Chrome consente agli utenti di emulare Chrome su un dispositivo mobile (ad esempio un tablet "Nexus 7" o "iPhone 5") dalla versione desktop di Chrome, attivando la funzione di emulazione mobile in Chrome DevTools. Questa funzionalità velocizza lo sviluppo web e consente agli sviluppatori di testare rapidamente il rendering di un sito web su un dispositivo mobile, senza bisogno di un dispositivo reale. ChromeDriver può anche attivare l'emulazione di dispositivi mobili tramite la funzionalità "mobileEmulation", specificata con un valore del dizionario.

Come nel riquadro Emulazione DevTools, in ChromeDriver puoi attivare l'emulazione mobile in due modi: specificando un dispositivo noto o i singoli attributi dei dispositivi. Il formato del dizionario "mobileEmulation" dipende dal metodo desiderato.

Specifica di un dispositivo portatile noto

Per attivare l'emulazione mobile con un nome specifico di dispositivo, il dizionario "mobileEmulation" deve contenere un valore "deviceName". Utilizza un nome di dispositivo valido dal riquadro Emulazione DevTools come valore per "deviceName".

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

Nota: l'elenco dei dispositivi noti di ChromeDriver viene generato da quelli presenti nel riquadro Emulazione DevTools. Tuttavia, è possibile utilizzare una versione di ChromeDriver su una versione di Chrome con un elenco di dispositivi più recente o meno recente. Se provi a utilizzare un nome di dispositivo che ChromeDriver non riconosce, verrà visualizzato l'errore "<your device name> deve essere un dispositivo valido". Per emulare un dispositivo di cui ChromeDriver non è a conoscenza, attiva l'emulazione di dispositivi mobili utilizzando le metriche dei singoli dispositivi, come descritto di seguito.

Specifica degli attributi dei singoli dispositivi

È anche possibile attivare l'emulazione di dispositivi mobili specificando singoli attributi. Per attivare l'emulazione mobile in questo modo, il dizionario "mobileEmulation" può contenere i dizionari "deviceMetrics" e "clientHints" e una stringa "userAgent". Le seguenti metriche relative ai dispositivi devono essere specificate nel dizionario "deviceMetrics":

• "width": la larghezza in pixel dello schermo del dispositivo.
• "height": l'altezza in pixel dello schermo del dispositivo
• "pixelProporzioni": le proporzioni in pixel del dispositivo.
• "touch": se emulare gli eventi di tocco. Il valore predefinito è true e solitamente può essere omesso.
• "mobile": indica se il browser deve comportarsi come uno user agent per il mobile (barre di scorrimento overlay, emettono eventi di orientamento, comprimi i contenuti per adattarli all'area visibile e così via). Il valore predefinito è true e solitamente può essere omesso.

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

• "platform": il sistema operativo. Può essere un valore noto ("Android", "Chrome OS", "Chromium OS", "Fucsia", "Linux", "macOS", "Windows") che corrisponda esattamente al valore restituito da Chrome in esecuzione sulla piattaforma specificata oppure può essere un valore definito dall'utente. Questo valore è obbligatorio.
• "mobile": indica se il browser deve richiedere una versione della risorsa desktop o mobile. In genere questo valore viene impostato su true in Chrome su un cellulare con Android. 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:
  • "brand": elenco di coppie di brand / versioni principali. Se omesso, il browser utilizza i propri valori.
  • "fullVersionList": elenco di coppie brand / versione. Se ometti il browser, vengono utilizzati i propri valori.
  • "platformVersion": la versione del sistema operativo. Il valore predefinito è una stringa vuota.
  • "model": il 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 stringa. Il valore predefinito è una stringa vuota.
  • "bitness": bitness della piattaforma. I valori noti sono "32" e "64". L'utente è libero di fornire qualsiasi valore stringa. Il valore predefinito è una stringa vuota.
  • "wow64": emulazione di Windows 32 su Windows 64. Un valore booleano il cui valore predefinito è 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". Tuttavia, questa funzionalità non funziona in modo affidabile a causa di ambiguità interne del formato del valore "userAgent".

Puoi trovare i telefoni e i tablet disponibili nel riquadro Emulazione dispositivi mobili 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 di dispositivi mobili:

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

Differenze tra emulazione mobile e dispositivi reali

Testare un sito web mobile su un computer desktop utilizzando l'emulazione mobile può essere utile, ma i tester devono tenere presente che ci sono molte piccole differenze, ad esempio:

• GPU completamente diverse, il che può portare a variazioni significative delle prestazioni;
• l'interfaccia utente per dispositivi mobili non è emulata (in particolare, la barra degli URL nascosta influisce sull'altezza della pagina);
• popup di disambiguazione (in cui puoi selezionare uno dei vari touch target) non è supportato;
• molte API hardware (ad esempio, l'evento modificare orientamento) non sono disponibili.