Se usó la API de Cloud Translation para traducir esta página.

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 las Herramientas para desarrolladores, 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".

Captura de pantalla de la configuración de dispositivos

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

Fuente de dispositivos conocidos

La lista de dispositivos conocidos se genera desde el panel de emulación de DevTools. Sin embargo, puedes usar una versión diferente de ChromeDriver con una versión de Chrome que tenga una lista de dispositivos más reciente o más antigua.

Si pruebas un nombre de dispositivo que ChromeDriver no reconoce, recibirás un error que indica que “<your device name> debe ser un dispositivo válido”. Para emular un dispositivo que ChromeDriver no conoce, 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 y 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 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:

"platform": 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:
- "brands": Es la lista de pares de marcas o versiones principales. 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. El valor predeterminado 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. Un valor booleano que, de forma predeterminada, es falso.

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

Si se omite el diccionario "clientHints" (modo heredado), ChromeDriver hace todo lo posible para inferir "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 que están 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)

JSON

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

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

Emulación de dispositivos móviles en comparación con dispositivos reales

Es útil probar sitios web en una computadora de escritorio con emulación para dispositivos móviles, pero no es una réplica perfecta de las pruebas en el dispositivo real. Existen algunas diferencias clave, como las siguientes:

Los dispositivos móviles suelen tener una GPU diferente, lo que puede generar grandes cambios en el rendimiento.
No se emula la IU para dispositivos móviles (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.