Użytkownicy Chrome mogą emulować Chrome na urządzeniu mobilnym (takim jak tablet „Nexus 7” czy „iPhone 5”) z komputerowej wersji Chrome. Wystarczy włączyć funkcję emulacji mobilnej w Narzędziach deweloperskich w Chrome. Ta funkcja przyspiesza tworzenie stron internetowych i pozwala programistom szybko sprawdzić, jak strona będzie się wyświetlać na urządzeniu mobilnym – bez konieczności korzystania z rzeczywistego urządzenia. ChromeDriver może też włączyć emulację urządzeń mobilnych za pomocą funkcji „mobileEmulation”. funkcji określonej za pomocą wartości słownika.
Podobnie jak w panelu emulacji Narzędzi deweloperskich, w ChromeDriver możesz włączyć emulację urządzeń mobilnych na 2 sposoby: określając znane urządzenie lub poszczególne atrybuty urządzenia. Format elementu „mobileEmulation” w zależności od potrzeb użytkownika.
Określanie znanego urządzenia mobilnego
Aby włączyć emulację mobilną z określoną nazwą urządzenia, użyj funkcji „mobileEmulation”. słownik musi zawierać element „deviceName”. Jako wartości parametru „deviceName” użyj prawidłowej nazwy urządzenia z panelu emulacji Narzędzi 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 atrybutów poszczególnych urządzeń
Możesz też włączyć emulację telefonów komórkowych, określając poszczególne atrybuty. Aby umożliwić emulację urządzeń mobilnych, użyj funkcji „mobileEmulation”, słownik może zawierać "deviceMetrics" i „clientHints” słowniki, a element „userAgent” ciągu znaków. W parametrze „deviceMetrics” należy określić te dane o urządzeniach słownik:
- „width” – szerokość ekranu urządzenia w pikselach
- "height" – wysokość ekranu urządzenia w pikselach
- „pixelRatio” – współczynnik pikseli urządzenia
- „dotknij” – określa, czy chcesz emulować zdarzenia dotyku. Wartość domyślna to 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 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” - 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 (starsza wersja) – ChromeDriver stara się wywnioskować wartości „clientHints” z „userAgent”. Ta funkcja nie działa jednak zawodnie z powodu wewnętrznych niejasności nazwy „userAgent” format wartości.
Informacje o telefonach i tabletach dostępnych w panelu emulacji urządzeń mobilnych znajdziesz 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ądzeń mobilnych:
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óżnice między emulacją urządzeń mobilnych a rzeczywistymi urządzeniami
Testowanie witryny mobilnej na komputerze za pomocą emulacji urządzeń mobilnych może być przydatne, ale testerzy powinni pamiętać o wielu subtelnych różnicach, takich jak:
- całkowicie zmienić GPU, co może prowadzić do dużych zmian wydajności.
- interfejs na urządzenia mobilne nie jest emulowany (w szczególności pasek ukrywającego adresu URL wpływa na wysokość strony);
- wyskakujące okienko umożliwiające wybór jednego z kilku docelowych elementów dotykowych nie jest obsługiwane;
- wielu sprzętowych interfejsów API (np. zdarzenie zmiany orientacji) jest niedostępnych.