Esta página foi traduzida pela API Cloud Translation.

Emulação de dispositivos móveis

O Chrome permite que os usuários emulem 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 dispositivos móveis no Chrome DevTools. Esse recurso acelera o desenvolvimento da Web e permite que os desenvolvedores testem rapidamente como um site vai 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 da interface "mobileEmulation" capacidade, especificada por um valor de dicionário.

Assim como no painel de emulação do DevTools, há duas maneiras de ativar a emulação para dispositivos móveis no ChromeDriver: especificando um dispositivo conhecido ou especificando atributos de dispositivos individuais. O formato do arquivo dicionário depende do método desejado.

Especificação de um dispositivo móvel conhecido

Para ativar a emulação de dispositivo móvel com um nome de dispositivo específico, use a opção dicionário deve conter um "deviceName". Use um nome de dispositivo válido do painel 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 de dispositivos

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

“largura” - A largura em pixels da tela do dispositivo
"height" - A altura em pixels da tela do dispositivo
"pixelProporção" - a proporção de pixels do dispositivo;
"toque" - se é necessário emular eventos de toque. O valor padrão é verdadeiro e geralmente pode ser omitido.
"dispositivos móveis" - se o navegador deve se comportar como um user agent para dispositivos móveis (sobrepor barras de rolagem, 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.

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

"plataforma" - O sistema operacional. Ele pode ser um valor conhecido ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows"), que corresponde exatamente ao valor retornado pelo Chrome em execução na plataforma em questão ou pode ser um valor definido pelo usuário. Esse valor é obrigatório.
"dispositivos móveis" - se o navegador deve solicitar uma versão de recurso de celular ou de desktop. Normalmente, o Chrome executado em smartphones 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 demais entradas são opcionais e podem ser omitidas, a menos que sejam relevantes para o teste:
- "marcas" - lista de pares de versão principal / marca. Se omitido, o navegador usa seus próprios valores.
- "fullVersionList" - lista de pares de marca / versão. Ele omitido, o navegador usa seus próprios valores.
- "platformVersion" - Versão do SO. O padrão é uma string vazia.
- "modelo" - 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.
- "bitsidade" - 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.
- "uau64" - emulação do Windows 32 no Windows 64. Um valor booleano que assume como padrão falso.

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

Se "clientHints" dicionário é omitido (modo legado). O ChromeDriver faz o possível para inferir as "clientHints" de "userAgent". No entanto, essa funcionalidade não funciona de maneira confiável devido a ambiguidades internas de "userAgent" .

Os smartphones e tablets disponíveis no painel "Emulação de dispositivos móveis" 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 completa da emulação de dispositivo móvel:

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 emulação de dispositivos móveis e dispositivos reais

Testar um site móvel em um computador usando emulação de dispositivo móvel pode ser útil, mas os testadores precisam estar cientes de que existem muitas diferenças sutis, como:

GPU completamente diferente, o que pode levar a grandes mudanças de desempenho;
interface para dispositivos móveis não é emulada (especialmente a barra oculta do URL 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, evento de mudança de orientação) não estão disponíveis.