Chrome umożliwia użytkownikom emulację Chrome na urządzeniu mobilnym z komputera Chrome, włącz za pomocą Narzędzi deweloperskich w Chrome. Ta funkcja przyspiesza tworzenie stron internetowych i pozwala programistom sprawdzić, renderuje się na urządzeniu mobilnym bez konieczności fizycznego urządzenia. ChromeDriver może możesz też emulować urządzenia za pomocą funkcji „mobileEmulation”, funkcji, którą określa się za pomocą wartości słownika.
Podobnie jak w Narzędziach deweloperskich, w ChromeDriver można włączyć emulację mobilną na 2 sposoby:
- Wskaż znane urządzenie
- Określanie poszczególnych atrybutów urządzenia
Format elementu „mobileEmulation” w zależności od potrzebnej metody.
Wskaż znane urządzenie mobilne
Aby włączyć emulację urządzenia na konkretnym urządzeniu, użyj funkcji „mobileEmulation”. słownik musi zawierać element „deviceName”. Jako wartości parametru „deviceName” użyj prawidłowej nazwy urządzenia z ustawień emulowanych urządzeń w Narzędziach deweloperskich.
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())
Określanie poszczególnych atrybutów urządzenia
Możesz ją włączyć, określając poszczególne atrybuty.
„mobileEmulation” słownik może zawierać deviceMetrics, clientHints
słowniki oraz ciąg userAgent.
W parametrze „deviceMetrics” należy określić te dane o urządzeniach słownik:
- "width" – szerokość ekranu urządzenia w pikselach
- „wysokość” – wysokość ekranu urządzenia w pikselach
- „pixelRatio” – współczynnik pikseli urządzenia
- „dotknij” – określa, czy chcesz emulować zdarzenia dotyku. Wartość domyślna to true (prawda) i zwykle można ją pominąć.
- „komórka” – określa, czy przeglądarka musi działać jako mobilny klient użytkownika (nakładające się paski przewijania, emitować zdarzenia orientacji, zmniejszać zawartość, by dopasować ją do widocznego obszaru itp.). Wartość domyślna to true (prawda) i zwykle można ją pominąć.
Parametr „clientHints” słownik może mieć następujące wpisy:
- „platforma” – system operacyjny. Może to być znana wartość („Android”, „Chrome OS”, „Chromium OS”, „Fuchsia”, „Linux”, „macOS”, „Windows”), która dokładnie odpowiada wartości zwracanej przez Chrome uruchomionej na danej platformie, lub może być wartością zdefiniowaną przez użytkownika. Ta wartość jest wymagana.
- „komórka” - określa, czy przeglądarka powinna zażądać wersji zasobu na urządzenia mobilne czy komputery. Zazwyczaj Chrome działający na telefonie komórkowym z Androidem ustawia tę wartość na „prawda”. Chrome na tablecie z Androidem ustawia tę wartość na false. Chrome na komputerze ustawia też tę wartość na false. Na podstawie tych informacji możesz określić realistyczną emulację. Ta wartość jest wymagana.
- Pozostałe wpisy są opcjonalne i można je pominąć, chyba że są istotne w kontekście testu:
- „marki” – lista par marki / wersji głównej. W przypadku pominięcia tego pola przeglądarka używa własnych wartości.
- "fullVersionList" – lista par marka / wersja. Pominięto, że przeglądarka używa własnych wartości.
- „platformVersion” – Wersja systemu operacyjnego. Domyślnie jest to pusty ciąg znaków.
- "model" – model urządzenia. Domyślnie jest to pusty ciąg znaków.
- „architektura” – Architektura procesora. Znane wartości to „x86” i „arm”. Użytkownik może podać dowolną wartość ciągu znaków. Domyślnie jest to pusty ciąg znaków.
- „szybkość” - szybkość działania platformy. Znane wartości to „32” i „64”. Użytkownik może podać dowolną wartość ciągu znaków. Domyślnie jest to pusty ciąg znaków.
- „wow64” - emulacja systemu Windows 32 w systemie Windows 64. Wartość logiczna, która domyślnie jest ustawiona na fałsz.
ChromeDriver może wnioskować o parametr „userAgent” wartość z „clientHints” na tych platformach: „Android”, „Chrome OS”, „Chromium OS”, „Fuchsia”, „Linux”, „macOS”, „Windows”. W związku z tym można pominąć tę wartość.
Jeśli "clientHints" słownik jest pominięty (starszy tryb). ChromeDriver działa najlepiej wnioskowania „clientHints” z „userAgent”. Ta funkcja jest zawodna z powodu wewnętrznych niejasności dotyczących „userAgent” format wartości.
Telefony i tablety dostępne w panelu emulacji telefonów komórkowych mogą można znaleźć w kodzie źródłowym narzędzi deweloperskich.
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)
Przykład pełnej konfiguracji emulacji urządzenia mobilnego:
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
}
}
Różnica między emulacją urządzeń mobilnych a rzeczywistymi urządzeniami
Warto przetestować strony na komputerze za pomocą emulacji urządzeń mobilnych, ale nie jest to wierna replika testów na rzeczywistym urządzeniu. Oto kilka kluczowych różnic:
- Urządzenia mobilne często mają inny GPU, co może prowadzić do dużych zmian wydajności.
- Interfejs mobilny nie jest emulowany (w szczególności ukrycie paska adresu ma wpływ na wysokość strony).
- Wyskakujące okienka wyboru (gdy wybierasz jeden z kilku docelowych elementów dotykowych) nie są obsługiwane.
- Wiele sprzętowych interfejsów API (np. zdarzenie
orientationchange) jest niedostępnych.