Diese Seite wurde von der Cloud Translation API übersetzt.

Mobilgeräte-Emulation

In Chrome können Nutzer Chrome auf einem Mobilgerät über die Desktopversion von Chrome emulieren, indem sie den Gerätemodus mit den Chrome DevTools aktivieren. Diese Funktion beschleunigt die Webentwicklung und ermöglicht es Entwicklern, schnell zu testen, wie eine Website auf einem Mobilgerät gerendert wird, ohne ein echtes Gerät zu benötigen. ChromeDriver kann auch Geräte mit der Funktion „mobileEmulation“ emulieren, die mit einem Dictionary-Wert angegeben wird.

Wie in den DevTools gibt es auch in ChromeDriver zwei Möglichkeiten, die Mobilgeräteemulation zu aktivieren:

Bekanntes Gerät angeben
Einzelne Geräteattribute angeben

Das Format des Wörterbuchs „mobileEmulation“ hängt davon ab, welche Methode erforderlich ist.

Bekanntes Mobilgerät angeben

Wenn Sie die Geräteemulation für ein bestimmtes Gerät aktivieren möchten, muss das Wörterbuch „mobileEmulation“ den Namen „deviceName“ enthalten. Verwenden Sie als Wert für „deviceName“ einen gültigen Gerätenamen aus den Einstellungen für emulierte Geräte in den DevTools.

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

Quelle der bekannten Geräte

Die Liste der bekannten Geräte wird im DevTools-Steuerfeld „Emulation“ generiert. Sie können jedoch eine andere Version von ChromeDriver mit einer Version von Chrome verwenden, die eine neuere oder ältere Liste von Geräten enthält.

Wenn Sie einen Gerätenamen verwenden, den ChromeDriver nicht erkennt, erhalten Sie die Fehlermeldung „<your device name> muss ein gültiges Gerät sein“. Wenn Sie ein Gerät emulieren möchten, das ChromeDriver nicht kennt, aktivieren Sie die mobile Emulation mithilfe individueller Gerätemesswerte.

Einzelne Geräteattribute angeben

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

Die folgenden Gerätemesswerte müssen im Wörterbuch „deviceMetrics“ angegeben werden:

„width“: die Breite des Bildschirms des Geräts in Pixeln
„height“: die Höhe des Bildschirms des Geräts in Pixeln
„pixelRatio“ – das Pixelverhältnis des Geräts
„touch“ – gibt an, ob Touch-Ereignisse emuliert werden sollen. Der Standardwert ist „true“ und kann in der Regel weggelassen werden.
„mobile“: Gibt an, ob sich der Browser wie ein mobiler User-Agent verhalten soll (z. B. Bildlaufleisten überlagern, Ausrichtungsereignisse senden, den Inhalt auf die Größe des Darstellungsbereichs verkleinern). Der Standardwert ist „true“ und kann in der Regel weggelassen werden.

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

„platform“ – das Betriebssystem. Es kann sich dabei um einen bekannten Wert („Android“, „ChromeOS“, „ChromiumOS“, „Fuchsia“, „Linux“, „macOS“, „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.
„mobile“ – gibt an, ob der Browser eine mobile oder Desktop-Ressourcenversion anfordern soll. In der Regel wird dieser Wert in Chrome auf einem Android-Smartphone auf „wahr“ gesetzt. In Chrome auf einem Android-Tablet wird dieser Wert auf „false“ gesetzt. In der Desktopversion von Chrome wird dieser Wert ebenfalls auf „false“ gesetzt. Anhand dieser Informationen können Sie eine realistische Emulation festlegen. Dieser Wert ist erforderlich.
Die übrigen Einträge sind optional und können weggelassen werden, sofern sie nicht für den Test relevant sind:
- „brands“ – Liste von Marken-/Hauptversionspaaren. Wenn Sie diese Angaben weglassen, verwendet der Browser seine eigenen Werte.
- „fullVersionList“: Liste der Marken-/Versionspaare. Es wurde nicht erwähnt, dass der Browser seine eigenen Werte verwendet.
- „platformVersion“ – Betriebssystemversion. Standardmäßig ist der String leer.
- „model“ – Gerätemodell. Standardmäßig ist der String leer.
- „architecture“ – CPU-Architektur. Bekannte Werte sind „x86“ und „arm“. Der Nutzer kann einen beliebigen Stringwert angeben. Standardmäßig ist der String leer.
- „bitness“ – Bitanzahl der Plattform. Bekannte Werte sind „32“ und „64“. Der Nutzer kann einen beliebigen Stringwert angeben. Standardmäßig ist der String leer.
- „wow64“ – Emulation von Windows 32 unter Windows 64. Ein boolescher Wert, dessen Standardwert „falsch“ ist.

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

Wenn das Wörterbuch „clientHints“ weggelassen wird (Legacy-Modus), versucht ChromeDriver, „clientHints“ aus „userAgent“ abzuleiten. Diese Funktion ist aufgrund interner Unklarheiten beim Wertformat „userAgent“ nicht zuverlässig.

Die Smartphones und Tablets, die im Bereich „Mobile Emulation“ verfügbar sind, finden Sie im DevTools-Quellcode.

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)

JSON

Beispiel für eine vollständige Konfiguration der mobilen Emulation:

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

Mobile Emulation im Vergleich zu echten Geräten

Es ist hilfreich, Websites auf einem Computer mit mobiler Emulation zu testen, aber dies ist keine perfekte Nachbildung der Tests auf dem tatsächlichen Gerät. Es gibt einige wichtige Unterschiede, darunter:

Mobilgeräte haben oft eine andere GPU, was zu großen Leistungsänderungen führen kann.
Die mobile Benutzeroberfläche wird nicht emuliert. Insbesondere wirkt sich das Ausblenden der Adressleiste auf die Seitenhöhe aus.
Pop-ups zur Behebung von Mehrdeutigkeit (bei denen Sie eines von mehreren Touch-Zielen auswählen) werden nicht unterstützt.
Viele Hardware-APIs (z. B. das orientationchange-Ereignis) sind nicht verfügbar.