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 a partir do computador do Google Chrome, ativando a modo dispositivo com o Chrome DevTools. Este recurso acelera o desenvolvimento da Web, permite que os desenvolvedores testem rapidamente como um site são renderizados em um dispositivo móvel, sem a necessidade de um dispositivo real. O ChromeDriver sabe também emulam dispositivos com a tag capacidade, especificada com um valor do dicionário.

Assim como no DevTools, há duas maneiras de ativar a emulação de dispositivo móvel no ChromeDriver:

Especificar um dispositivo conhecido
Especificar atributos individuais do dispositivo

O formato do arquivo depende do método necessário.

Especificar um dispositivo móvel conhecido

Para permitir a emulação de um dispositivo com um dispositivo específico, a opção "mobileEmulation" dicionário deve conter um "deviceName". Use um nome de dispositivo válido das configurações de dispositivos emulados 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())

Especificar atributos individuais do dispositivo

Você pode ativar a emulação de dispositivo móvel especificando atributos individuais. A "mobileEmulation" dicionário pode conter deviceMetrics, clientHints dicionários e uma string userAgent.

As seguintes métricas do dispositivo precisam ser especificadas em "deviceMetrics" dicionário:

"width" - A largura em pixels da tela do dispositivo
"altura" - 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.
- "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.
- "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 for omitido (modo legado): o ChromeDriver faz o possível para inferir "clientHints" de "userAgent". Esse recurso não é confiável devido a ambiguidades internas de "userAgent" .

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

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ça entre emulação de dispositivo móvel e dispositivos reais

É útil testar sites em um computador com emulação de dispositivo móvel, mas não é uma replicação perfeita do teste no dispositivo real. Há algumas diferenças importantes, incluindo:

Os dispositivos móveis geralmente têm uma GPU diferente, o que pode causar grandes mudanças de desempenho.
A interface para dispositivos móveis não é emulada. Especificamente, ocultar a barra de endereço afeta a altura da página.
Não há suporte para pop-ups de desambiguação (quando você seleciona uma de algumas áreas de toque).
Muitas APIs de hardware (por exemplo, o evento orientationchange) não estão disponíveis.