Emulación de dispositivos móviles

Chrome permite que los usuarios emulen Chrome en un dispositivo móvil (como una tablet "Nexus 7" o un "iPhone 5") desde la versión de Chrome para computadoras de escritorio al habilitar la función Emulación móvil en las Herramientas para desarrolladores de Chrome. Esta función acelera el desarrollo web y permite que los desarrolladores prueben rápidamente cómo se renderizará un sitio web en un dispositivo móvil, sin la necesidad de usar un dispositivo real. ChromeDriver también puede habilitar la emulación móvil, mediante la función "mobileEmulation", especificada con un valor de diccionario.

Al igual que en el panel Emulación de Herramientas para desarrolladores, hay dos maneras en ChromeDriver de habilitar la emulación móvil: especificando un dispositivo conocido o especificando atributos individuales del dispositivo. El formato del diccionario "mobileEmulation" depende del método deseado.

Cómo especificar un dispositivo móvil conocido

Para habilitar la emulación de dispositivo móvil con un nombre de dispositivo específico, el diccionario "mobileEmulation" debe contener un "deviceName". Usa un nombre de dispositivo válido del panel Emulation de DevOps como el valor para "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: La lista de dispositivos conocidos de ChromeDriver se genera a partir de los que se encuentran en el panel Emulación de Herramientas para desarrolladores. Sin embargo, es posible usar una versión de ChromeDriver con una versión de Chrome que tenga una lista de dispositivos más reciente o anterior. Si intentas utilizar un nombre de dispositivo que ChromeDriver no reconoce, aparecerá el siguiente error: "<your device name> debe ser un dispositivo válido". Para emular un dispositivo que ChromeDriver no conoce, habilita la Emulación móvil con métricas individuales del dispositivo, como se describe a continuación.

Cómo especificar atributos de dispositivos individuales

También es posible habilitar la emulación de dispositivos móviles especificando atributos individuales. Para habilitar la emulación móvil de esta manera, el diccionario "mobileEmulation" puede contener los diccionarios "deviceMetrics" y "clientHints", y una cadena de "userAgent". Las siguientes métricas de dispositivos deben especificarse en el diccionario "deviceMetrics":

• "width": el ancho en píxeles de la pantalla del dispositivo
• "height": la altura en píxeles de la pantalla del dispositivo.
• "pixelRatio": la proporción de píxeles del dispositivo
• "touch": si se deben emular eventos táctiles. El valor predeterminado es verdadero y, por lo general, se puede omitir.
• "móvil": si el navegador debe comportarse como un usuario-agente para dispositivos móviles (barras de desplazamiento superpuestas, emitir eventos de orientación, reducir el contenido para que se ajuste al viewport, etcétera). El valor predeterminado es verdadero y, por lo general, se puede omitir.

El diccionario "clientHints" puede tener las siguientes entradas:

• "platform": el sistema operativo. Puede ser un valor conocido ("Android", "ChromeOS", "Chromium OS", "Fuchsia", "Linux", "macOS" o "Windows") que coincida exactamente con el valor que muestra Chrome cuando se ejecuta en la plataforma determinada, o puede ser un valor definido por el usuario. Este valor es obligatorio.
• "mobile": indica si el navegador debe solicitar una versión de recursos para dispositivos móviles o de escritorio. Por lo general, cuando Chrome se ejecuta en un teléfono celular con Android, se establece este valor como verdadero. Chrome en una tablet Android establece este valor como falso. Chrome también establece este valor como falso en dispositivos de escritorio. Puedes usar esta información para especificar una emulación realista. Este valor es obligatorio.
• Las entradas restantes son opcionales y se pueden omitir, a menos que sean relevantes para la prueba:
  • "marcas": lista de pares de marca / versión principal. Si se omite, el navegador usa sus propios valores.
  • "fullVersionList": lista de pares marca / versión. Omitió que el navegador utiliza sus propios valores.
  • "platformVersion": Es la versión del SO. La configuración predeterminada es una string vacía.
  • "model": El modelo del dispositivo. La configuración predeterminada es una string vacía.
  • "arquitectura": la arquitectura de la CPU. Los valores conocidos son "x86" y "arm". El usuario puede proporcionar cualquier valor de cadena. La configuración predeterminada es una string vacía.
  • "bitz": valor de bits de la plataforma. Los valores conocidos son "32" y "64". El usuario puede proporcionar cualquier valor de cadena. La configuración predeterminada es una string vacía.
  • "wow64": Emulación de Windows 32 en Windows 64. Un valor booleano que se establece como falso de forma predeterminada.

ChromeDriver puede inferir el valor "userAgent" de "clientHints" en las siguientes plataformas: "Android", "ChromeOS", "Chromium OS", "Fuchsia", "Linux", "macOS" y "Windows". Por lo tanto, este valor se puede omitir.

Si se omite el diccionario "clientHints" (modo heredado), ChromeDriver hace todo lo posible para inferir "clientHints" de "userAgent". Sin embargo, esta funcionalidad no funciona de manera confiable debido a las ambigüedades internas del formato de valor "userAgent".

Los teléfonos y las tablets que están disponibles en el panel Mobile Emulation en el código fuente de Herramientas para desarrolladores.

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)

Ejemplo de configuración de emulación móvil 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
  }
}

Diferencias entre la emulación móvil y los dispositivos reales

Probar un sitio web móvil en una computadora de escritorio con emulación móvil puede ser útil, pero los verificadores deben tener en cuenta que existen muchas diferencias sutiles, como las siguientes:

• GPU completamente diferente, lo que puede generar grandes cambios en el rendimiento.
• La IU para dispositivos móviles no se emula (en particular, la barra de URL oculta afecta la altura de la página).
• No se admite la ventana emergente de desambiguación (en la que seleccionas uno de los objetivos táctiles).
• muchas APIs de hardware (por ejemplo, eventos de cambio de orientación) no están disponibles.