Emulazione di dispositivi mobili

Chrome consente agli utenti di emulare Chrome su un dispositivo mobile dal computer di Chrome, attivando il modalità dispositivo con Chrome DevTools. Questa funzionalità velocizza lo sviluppo web, consente agli sviluppatori di testare rapidamente il viene eseguito su un dispositivo mobile, senza che sia necessario un dispositivo reale. ChromeDriver può e emulare dispositivi con la funzione "mobileEmulation" personalizzata, specificata con un valore del dizionario.

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

  • Specifica un dispositivo noto
  • Specificare gli attributi dei singoli dispositivi

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

Specifica un dispositivo mobile noto

Per abilitare l'emulazione con un dispositivo specifico, il parametro "mobileEmulation" il dizionario deve contenere un "deviceName". Utilizza un nome di dispositivo valido dalle impostazioni Dispositivi emulati di DevOps 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 abilitare l'emulazione mobile specificando singoli attributi. La "mobileEmulation" il dizionario può contenere deviceMetrics, clientHints dizionari e una stringa userAgent.

Le seguenti metriche del dispositivo devono essere specificate in "deviceMetrics" dizionario:

  • &quot;width&quot; - La larghezza in pixel dello schermo del dispositivo
  • "altezza" - L'altezza in pixel dello schermo del dispositivo
  • "pixelRatio" - le proporzioni pixel del dispositivo
  • "tocca" - se emulare eventi touch. Il valore predefinito è true e in genere può essere omesso.
  • "dispositivo mobile" - 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.

La sezione "clientHints" il dizionario può avere le seguenti voci:

  • "piattaforma" - il sistema operativo. Può essere un valore noto ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows"), che corrisponde esattamente al valore restituito da Chrome in esecuzione sulla piattaforma specificata, oppure può essere un valore definito dall'utente. Questo valore è obbligatorio.
  • "dispositivo mobile" - Indica se il browser deve richiedere una versione risorsa mobile o desktop. In genere, Chrome su un cellulare 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 altre voci sono facoltative e possono essere omesse a meno che non siano pertinenti per il test:
    • "brand" - elenco di coppie brand / versione principale. Se omesso, il browser utilizza i propri valori.
    • &quot;fullVersionList&quot; - elenco di coppie marca / versione. Ha omesso che il browser utilizza i propri valori.
    • "platformVersion" - Versione del sistema operativo. Il valore predefinito è una stringa vuota.
    • &quot;model&quot; - modello del dispositivo. Il valore predefinito è una stringa vuota.
    • "architettura" - Architettura CPU. I valori noti sono "x86" e "arm". L'utente è libero di fornire qualsiasi valore stringa. Il valore predefinito è una stringa vuota.
    • "bitness" - bit 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 finestre 32 su finestre 64. Un valore booleano che per impostazione predefinita è false.

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

Se "clientHints" dizionario è omesso (modalità legacy) ChromeDriver fa del suo meglio per dedurre "clientHints" da "userAgent". Questa funzionalità non è affidabile a causa di ambiguità interne di "userAgent" formato dei valori.

Gli smartphone e i tablet disponibili nel riquadro Emulazione dispositivi mobili possono disponibile 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 dell'emulazione mobile completa:

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 dei dispositivi mobili e dispositivi reali

È utile testare i siti web su computer con emulazione di dispositivi mobili, 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ò portare a notevoli variazioni delle prestazioni.
  • 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 touch target) non sono supportati.
  • Molte API hardware (ad esempio l'evento orientationchange) non sono disponibili.