Esta página foi traduzida pela API Cloud Translation.

Emulação de dispositivos móveis

O Chrome permite que os usuários emule o Chrome em um dispositivo móvel (como um tablet "Nexus 7" ou um "iPhone 5") a partir da versão para computador do Chrome, ativando o recurso de emulação de dispositivo móvel no Chrome DevTools. Esse recurso acelera o desenvolvimento da Web e permite que os desenvolvedores testem rapidamente como um site será renderizado em um dispositivo móvel, sem precisar de um dispositivo real. O ChromeDriver também pode ativar a emulação de dispositivo móvel por meio do recurso "mobileEmulation", especificado com um valor de dicionário.

Assim como no painel "Emulação do DevTools", há duas maneiras de ativar a emulação no ChromeDriver: especificando um dispositivo conhecido ou atributos de dispositivo individuais. O formato do dicionário "mobileEmulation" depende do método escolhido.

Especificação de um dispositivo móvel conhecido

Para ativar a emulação de dispositivo móvel com um nome de dispositivo específico, o dicionário "mobileEmulation" precisa conter um "deviceName". Use um nome de dispositivo válido do painel de emulação do DevTools como o valor de "deviceName".

Captura de tela da configuração "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())

Como especificar atributos individuais do dispositivo

Também é possível ativar a emulação de dispositivo móvel especificando atributos individuais. Para ativar a emulação de dispositivos móveis dessa forma, o dicionário "mobileEmulation" pode conter os dicionários "deviceMetrics" e "clientHints" e uma string "userAgent". As seguintes métricas do dispositivo precisam ser especificadas no dicionário "deviceMetrics":

"width" - a largura em pixels da tela do dispositivo
"height": a altura em pixels da tela do dispositivo
"pixelRatio" - a proporção de pixels do dispositivo
"touch" - definir se os eventos de toque devem ser emular. O valor padrão é verdadeiro e geralmente pode ser omitido.
"mobile": se o navegador precisa se comportar como um user agent de dispositivos móveis (barras de rolagem sobrepostas, emitir eventos de orientação, reduzir o conteúdo para caber na janela de visualização etc.). O valor padrão é verdadeiro e geralmente pode ser omitido.

O dicionário "clientHints" pode ter as seguintes entradas:

"platform" - o sistema operacional. Pode ser um valor conhecido ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows") que corresponda exatamente ao valor retornado pelo Chrome em execução na plataforma especificada ou pode ser um valor definido pelo usuário. Esse valor é obrigatório.
"mobile" - se o navegador deve solicitar uma versão de recurso para computador ou dispositivo móvel. Normalmente, o Chrome executado em um smartphone com Android define esse valor como "true". O Chrome em um tablet Android define esse valor como "false". O Chrome em um dispositivo desktop também define esse valor como "false". Use essas informações para especificar uma emulação realista. Esse valor é obrigatório.
As entradas restantes são opcionais e podem ser omitidas, a menos que sejam relevantes para o teste:
- "brands" - lista de pares de marca / versão principal. Se omitido, o navegador usa seus próprios valores.
- "fullVersionList" - lista dos pares de marca / versão. Ele omitiu o navegador, que usa seus próprios valores.
- "platformVersion" - versão do SO. O padrão é uma string vazia.
- "model" - modelo do dispositivo. O padrão é uma string vazia.
- "arquitetura" - arquitetura da CPU. Os valores conhecidos são "x86" e "arm". O usuário é livre para fornecer qualquer valor de string. O padrão é uma string vazia.
- "bitness": quantidade de bits da plataforma. Os valores conhecidos são "32" e "64". O usuário é livre para fornecer qualquer valor de string. O padrão é uma string vazia.
- "wow64": emulação do Windows 32 no Windows 64. Um valor booleano que tem como padrão "false".

O ChromeDriver consegue inferir o valor "userAgent" de "clientHints" nas seguintes plataformas: "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS" e "Windows". Portanto, esse valor pode ser omitido.

Se o dicionário "clientHints" for omitido (modo legado), o ChromeDriver fará o possível para inferir as "clientHints" do "userAgent". No entanto, essa funcionalidade não funciona de maneira confiável devido às ambiguidades internas do formato de valor "userAgent".

Os smartphones e tablets disponíveis no painel "Emulação de dispositivo móvel" podem ser encontrados no código-fonte do 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)

Exemplo de configuração de emulação móvel 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
  }
}

Diferenças entre a emulação de dispositivos móveis e os dispositivos reais

Testar um site para dispositivos móveis em um computador usando a emulação para dispositivos móveis pode ser útil, mas os testadores precisam estar cientes de que há muitas diferenças sutis, como:

uma GPU totalmente diferente, o que pode levar a grandes mudanças de desempenho.
a interface de usuário para dispositivos móveis não é emulada (em especial, a barra de URL oculta afeta a altura da página);
O pop-up de desambiguação (em que você seleciona uma de algumas áreas de toque) não é compatível.
muitas APIs de hardware (por exemplo, eventoOrientationchange) não estão disponíveis.