Emulación de dispositivos móviles

Chrome permite a los usuarios emular Chrome en un dispositivo móvil desde la versión para computadoras de Chrome habilitando el modo de dispositivo con las Herramientas para desarrolladores de Chrome. Esta función acelera el desarrollo web y permite a los desarrolladores probar rápidamente cómo se renderiza un sitio web en un dispositivo móvil, sin necesidad de un dispositivo real. ChromeDriver también puede emular dispositivos con la función "mobileEmulation", especificada con un valor de diccionario.

Al igual que en DevTools, hay dos maneras de habilitar la emulación de dispositivos móviles en ChromeDriver:

• Especifica un dispositivo conocido
• Especifica atributos de dispositivos individuales

El formato del diccionario "mobileEmulation" depende del método que se necesite.

Especifica un dispositivo móvil conocido

Para habilitar la emulación de dispositivos con un dispositivo específico, el diccionario "mobileEmulation" debe contener un "deviceName". Usa un nombre de dispositivo válido de la configuración de dispositivos emulados de DevTools como valor de "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 de emulación de DevTools. 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 más antigua. Si intentas usar un nombre de dispositivo que ChromeDriver no reconoce, recibirás el siguiente error: "<your device name> debe ser un dispositivo válido". Para emular un dispositivo que ChromeDriver no conozca, habilita la Emulación de dispositivos móviles con métricas de dispositivos individuales.

Especifica atributos de dispositivos individuales

Para habilitar la emulación de dispositivos móviles, especifica atributos individuales. El diccionario "mobileEmulation" puede contener diccionarios deviceMetrics, clientHints y una cadena userAgent.

Las siguientes métricas del dispositivo deben especificarse en el diccionario "deviceMetrics":

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

El diccionario "clientHints" puede tener las siguientes entradas:

• "plataforma": el sistema operativo. Puede ser un valor conocido ("Android", "ChromeOS", "ChromiumOS", "Fuchsia", "Linux", "macOS", "Windows") que coincida exactamente con el valor que muestra Chrome en la plataforma determinada, o bien 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 computadoras. Por lo general, Chrome que se ejecuta en un teléfono celular con Android establece este valor como verdadero. Chrome en un dispositivo Android con tablet establece este valor en falso. Chrome en un dispositivo de escritorio también establece este valor en falso. 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": Es la lista de pares de marcas o versiones. Se omitió que el navegador usa sus propios valores.
  • "platformVersion": Es la versión del SO. La configuración predeterminada es una cadena vacía.
  • "model": Es el modelo del dispositivo. El valor predeterminado es una cadena vacía.
  • "architecture": Arquitectura de la CPU. Los valores conocidos son “x86” y “arm”. El usuario puede proporcionar cualquier valor de cadena. El valor predeterminado es una cadena vacía.
  • "bitness": Es el tamaño de bits de la plataforma. Los valores conocidos son “32” y “64”. El usuario puede proporcionar cualquier valor de cadena. El valor predeterminado es una cadena vacía.
  • "wow64": Emulación de Windows 32 en Windows 64. Es un valor booleano cuya configuración predeterminada es falso.

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

Si se omite el diccionario "clientHints" (modo heredado), ChromeDriver hace todo lo posible para inferir los "clientHints" de "userAgent". Esta función no es confiable debido a ambigüedades internas del formato de valor "userAgent".

Los teléfonos y las tablets disponibles en el panel de Emulación para dispositivos móviles se pueden encontrar en el código fuente de 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)

Ejemplo de configuración completa de emulación de dispositivos móviles:

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

Diferencia entre la emulación de dispositivos móviles y los dispositivos reales

Es útil probar sitios web en una computadora de escritorio con la emulación de dispositivos móviles, pero no es una replicación perfecta de las pruebas en el dispositivo real. Estas son algunas diferencias clave:

• Los dispositivos móviles suelen tener una GPU diferente, lo que puede generar grandes cambios en el rendimiento.
• La IU para dispositivos móviles no está emulada (en particular, ocultar la barra de direcciones afecta la altura de la página).
• No se admiten ventanas emergentes de desambiguación (en las que seleccionas uno de varios destinos táctiles).
• Muchas APIs de hardware (por ejemplo, el evento orientationchange) no están disponibles.