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 el escritorio versión de Chrome, habilitando el botón modo de dispositivo con las Herramientas para desarrolladores de Chrome. Esta función acelera el desarrollo web, permite a los desarrolladores probar rápidamente cómo un sitio web se renderiza en un dispositivo móvil sin necesidad de un dispositivo real. ChromeDriver puede también emular dispositivos con el parámetro "mobileEmulation" especificada, especificada con un del diccionario.

Al igual que en las Herramientas para desarrolladores, hay dos maneras en ChromeDriver de habilitar la emulación de dispositivos móviles:

Cómo especificar un dispositivo conocido
Cómo especificar atributos de dispositivos individuales

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

Especificar un dispositivo móvil conocido

Para habilitar la emulación de dispositivos con un dispositivo específico, la herramienta "mobileEmulation" diccionario debe contener un nombre "deviceName". Usa un nombre de dispositivo válido de la configuración de dispositivos emulados de Herramientas de desarrolladores como valor para "deviceName".

Captura de pantalla del parámetro de configuración 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())

Cómo especificar atributos de dispositivos individuales

Puedes habilitar la emulación de dispositivos móviles especificando atributos individuales. El “mobileEmulation” el diccionario puede contener deviceMetrics, clientHints diccionarios y una cadena userAgent.

Las siguientes métricas de dispositivo deben especificarse en la columna "deviceMetrics" diccionario:

"width" - el ancho en píxeles de la pantalla del dispositivo
“altura” - la altura en píxeles de la pantalla del dispositivo
"pixelRatio" - la proporción de píxeles del dispositivo,
"tocar" 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 (superponer barras de desplazamiento, 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.

La herramienta “clientHints” diccionario puede tener las siguientes entradas:

"plataforma" - el sistema operativo. Puede ser un valor conocido ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS" o "Windows"), que coincide exactamente con el valor que muestra Chrome que se ejecuta en la plataforma determinada, o puede ser un valor definido por el usuario. Este valor es obligatorio.
"móvil" - si el navegador debe solicitar una versión de recurso para dispositivos móviles o computadoras de escritorio. Por lo general, Chrome que se ejecuta en un teléfono celular con Android establece este valor como verdadero. En Chrome, en un dispositivo Android tablet, este valor se establece como falso. En Chrome, en un dispositivo de escritorio, este valor también se establece como 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" - lista de pares de marca / versión. Omite que el navegador usa sus propios valores.
- “versión de la plataforma” - Versión del SO La configuración predeterminada es una cadena vacía.
- "model" - el modelo del dispositivo. La configuración predeterminada es una cadena vacía.
- "arquitectura" - 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 cadena vacía.
- "tranquilidad" - 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 cadena vacía.
- “wow64” - emulación de las ventanas 32 en las ventanas 64; Es un valor booleano cuya configuración predeterminada es falso.

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

Si es "clientHints" se omite el diccionario (modo heredado) ChromeDriver hace todo lo posible. para inferir los criterios “clientHints” de “userAgent”. Esta función no es confiable debido a las ambigüedades internas de "userAgent" de salida.

Los teléfonos y las tablets que están disponibles en el panel Mobile Emulation pueden 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 completa de emulación de dispositivo móvil:

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 móvil y los dispositivos reales

Resulta útil probar sitios web en una computadora con emulación móvil, pero no es una réplica perfecta de las pruebas en el dispositivo real. Estas son algunas diferencias clave:

Por lo general, los dispositivos móviles tienen 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 las ventanas emergentes de desambiguación (donde seleccionas uno de los pocos objetivos táctiles).
Muchas APIs de hardware (por ejemplo, el evento orientationchange) no están disponibles.