Mobilgeräte-Emulation

Mit Chrome können Nutzer Chrome auf einem Mobilgerät vom Desktop aus emulieren Chrome-Version verwenden, indem Sie die Gerätemodus mit den Chrome-Entwicklertools verwenden. Diese Funktion beschleunigt die Webentwicklung und ermöglicht es Entwicklern, schnell zu testen, wie eine Website wird auf einem Mobilgerät gerendert, ohne dass ein echtes Gerät erforderlich ist. ChromeDriver kann können Sie Geräte auch mit der Funktion Capability, die durch ein -Wörterbuchwert.

Wie in den Entwicklertools gibt es in ChromeDriver zwei Möglichkeiten, die Mobile-Emulation zu aktivieren:

  • Bekanntes Gerät angeben
  • Einzelne Geräteattribute angeben

Das Format von „mobileEmulation“ hängt davon ab, welche Methode benötigt wird.

Bekanntes Mobilgerät angeben

Um die Geräteemulation für ein bestimmtes Gerät zu aktivieren, Wörterbuch muss einen "deviceName" enthalten. Verwende einen gültigen Gerätenamen aus den Einstellungen für DevTools Emulated Devices als Wert für „deviceName“.

Screenshot der Geräteeinstellung

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

Einzelne Geräteattribute angeben

Sie können die Mobile-Emulation aktivieren, indem Sie einzelne Attribute angeben. Die „mobileEmulation“ Wörterbuch kann deviceMetrics und clientHints enthalten Wörterbücher und einen userAgent-String.

Die folgenden Gerätemesswerte müssen unter "deviceMetrics" angegeben werden. Wörterbuch:

  • &quot;width&quot; – Breite des Gerätebildschirms in Pixeln
  • "height" – die Höhe des Gerätebildschirms in Pixeln
  • „pixelRatio“ – Pixelverhältnis des Geräts
  • "berühren" – Gibt an, ob Touch-Ereignisse emuliert werden sollen. Der Standardwert ist „true“ und kann in der Regel weggelassen werden.
  • "mobil" - Gibt an, ob sich der Browser als mobiler User-Agent verhalten muss (Overlay-Bildlaufleisten, Ausrichtungsereignisse ausgeben, Inhalte an den Darstellungsbereich anpassen usw.). Der Standardwert ist „true“ und kann in der Regel weggelassen werden.

Die Funktion „clientHints“ Wörterbuch kann die folgenden Einträge enthalten:

  • „Plattform“ - das Betriebssystem. Dabei kann es sich entweder um einen bekannten Wert wie „Android“, „Chrome OS“, „Chromium OS“, „Fuchsia“, „Linux“, „macOS“ oder „Windows“ handeln, der genau mit dem Wert übereinstimmt, der von Chrome auf der jeweiligen Plattform zurückgegeben wird. Es kann sich aber auch um einen benutzerdefinierten Wert handeln. Dieser Wert ist erforderlich.
  • "mobil" – Gibt an, ob der Browser eine mobile oder Desktop-Ressourcenversion anfordern soll. Normalerweise setzt Chrome auf einem Mobiltelefon mit Android diesen Wert auf "true". Chrome auf einem Tablet mit Android-Geräten legt diesen Wert auf „false“ fest. Auf Computern wird dieser Wert ebenfalls auf „false“ gesetzt. Mit diesen Informationen können Sie eine realistische Emulation angeben. Dieser Wert ist erforderlich.
  • Die übrigen Einträge sind optional und können weggelassen werden, sofern sie für den Test nicht relevant sind: <ph type="x-smartling-placeholder">
      </ph>
    • „marken“ – Liste der Paare von Marke und Hauptversion Wenn keine Angabe gemacht wird, verwendet der Browser seine eigenen Werte.
    • &quot;fullVersionList&quot; – Liste der Paare aus Marke und Version Ist dies nicht der Fall, verwendet der Browser seine eigenen Werte.
    • „platformVersion“ – Betriebssystemversion. Die Standardeinstellung ist ein leerer String.
    • &quot;model&quot; – Gerätemodell Die Standardeinstellung ist ein leerer String.
    • "Architektur" – CPU-Architektur Bekannte Werte: "x86" und „Arm“. Der Nutzer kann einen beliebigen Stringwert angeben. Die Standardeinstellung ist ein leerer String.
    • "Gebraten" – Plattform-Bitbarkeit. Bekannte Werte: „32“ und „64“. Der Nutzer kann einen beliebigen Stringwert angeben. Die Standardeinstellung ist ein leerer String.
    • „wow64“ - Emulation von Windows 32 in Windows 64. Ein boolescher Wert, der standardmäßig auf „false“ gesetzt ist.

ChromeDriver kann „userAgent“ ableiten Wert aus "clientHints" auf den folgenden Plattformen: „Android“, „Chrome OS“, „Chromium OS“, „Fuchsia“, „Linux“, „macOS“ und „Windows“. Daher kann dieser Wert weggelassen werden.

Wenn „clientHints“ Wörterbuch wird weggelassen (Legacy-Modus) ChromeDriver versucht sein Bestes um die „clientHints“ abzuleiten, von „userAgent“. Diese Funktion ist aufgrund von internen Ambiguitäten in Bezug auf „userAgent“ nicht zuverlässig. Format des Wertes.

Die Telefone und Tablets, die im Bereich "Mobile Emulation" verfügbar sind, können Sie finden sie im Quellcode der Entwicklertools.

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)

Beispiel für die vollständige Konfiguration der Emulation für Mobilgeräte:

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

Unterschied zwischen Mobilgeräteemulation und echten Geräten

Es ist hilfreich, Websites auf einem Desktop-Computer mit der Emulation für Mobilgeräte zu testen. aber es ist keine perfekte Replikation der Tests auf dem Gerät. Es gibt einige wichtige Unterschiede:

  • Mobilgeräte haben oft eine andere GPU, was zu großen Leistungsänderungen führen kann.
  • Die UI für Mobilgeräte wird nicht emuliert. Insbesondere das Ausblenden der Adressleiste wirkt sich auf die Seitenhöhe aus.
  • Pop-ups zur Auswahl, in denen Sie eine der wenigen Berührungszielbereiche auswählen, werden nicht unterstützt.
  • Viele Hardware-APIs (z. B. das Ereignis orientationchange) sind nicht verfügbar.