Chrome umożliwia użytkownikom emulację Chrome na urządzeniu mobilnym (takim jak tablet „Nexus 7” lub „iPhone 5”) w komputerowej wersji Chrome. Aby to zrobić, włącz funkcję emulacji mobilnej w Narzędziach deweloperskich w Chrome. Ta funkcja przyspiesza tworzenie stron internetowych, pozwala programistom szybko sprawdzić, jak strona będzie wyświetlana na urządzeniach mobilnych, bez konieczności używania prawdziwego urządzenia. Sterownik ChromeDriver może też włączyć emulację urządzeń mobilnych za pomocą funkcji „mobileEmulation”, która jest określona za pomocą wartości słownikowej.
Podobnie jak w panelu emulacji w Narzędziach deweloperskich w ChromeDriver możesz włączyć emulację urządzeń mobilnych na 2 sposoby: wybierając znane urządzenie lub określając jego atrybuty. Format słownika „mobileEmulation” zależy od wybranej metody.
Określanie znanego urządzenia mobilnego
Aby można było włączyć emulację urządzeń mobilnych dla określonej nazwy urządzenia, słownik „mobileEmulation” musi zawierać parametr „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 pojedynczych urządzeń
Możesz też włączyć emulację urządzeń mobilnych, określając poszczególne atrybuty. Aby można było włączyć emulację urządzeń mobilnych, słownik „mobileEmulation” może zawierać słowniki „deviceMetrics” i „clientHints” oraz ciąg „userAgent”. W słowniku „deviceMetrics” trzeba określić te dane o urządzeniach:
- „width” – szerokość ekranu urządzenia w pikselach
- „height” – wysokość ekranu urządzenia w pikselach
- „pixelRatio” – współczynnik pikseli urządzenia;
- „touch” – czy ma być emulowane zdarzenia kliknięcia. Wartość domyślna to „true” (prawda) i zwykle można ją pominąć.
- „mobile” – określa, czy przeglądarka musi działać jak mobilny klient użytkownika (nakładane paski przewijania, emisja zdarzeń orientacji, zmniejszanie treści w celu dopasowania do widocznego obszaru itp.). Wartość domyślna to „true” (prawda) i zwykle można ją pominąć.
Słownik „clientHints” może zawierać takie wpisy:
- „platform” – system operacyjny. Może to być znana wartość („Android”, „Chrome OS”, „Chromium OS”, „Fuchsia”, „Linux”, „macOS”, „Windows”), która) jest dokładnie zgodna z wartością zwracaną przez Chrome uruchomioną na danej platformie. Może to być też wartość zdefiniowana przez użytkownika. Ta wartość jest obowiązkowa.
- „mobile” – określa, czy przeglądarka powinna wysyłać żądanie wersji zasobu na urządzenia mobilne czy na komputer. Zwykle Chrome działająca na telefonach komórkowych z Androidem ustawia tę wartość na „prawda”. Chrome na tablecie z Androidem ustawia tę wartość na fałsz. Chrome na komputerach ustawia też tę wartość na false (fałsz). Na podstawie tych informacji możesz określić realistyczną emulację. Ta wartość jest obowiązkowa.
- Pozostałe wpisy są opcjonalne i można je pominąć, chyba że są istotne w danym teście:
- „brands” – lista par marki i wersji głównej. W przypadku jego pominięcia 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. Domyślnie jest to pusty ciąg znaków.
- „bitness” – szybkość działania platformy. Znane wartości to „32” i „64”. Użytkownik może podać dowolną wartość ciągu. Domyślnie jest to pusty ciąg znaków.
- „wow64” – emulacja okien 32 w Windows 64. Wartość logiczna, która domyślnie przyjmuje wartość „fałsz”.
ChromeDriver może określać wartość parametru „userAgent” na podstawie parametru „clientHints” na tych platformach: „Android”, „Chrome OS”, „Chromium OS”, „Fuchsia”, „Linux”, „macOS” i „Windows”. Dlatego tę wartość można pominąć.
Jeśli słownik „clientHints” zostanie pominięty (tryb starszego typu), ChromeDriver stara się wyodrębnić parametr „clientHints” z parametru „userAgent”. Ta funkcja nie działa jednak prawidłowo z powodu wewnętrznych niejasności formatu wartości „userAgent”.
Telefony i tablety, które są dostępne w panelu emulacji urządzeń mobilnych, 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 mobilnej:
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:
- zupełnie innego GPU, co może spowodować duże zmiany wydajności;
- interfejs mobilny nie jest emulowany (w szczególności ukrywający się pasek adresu URL wpływa na wysokość strony);
- wyskakujące okienko rozróżniania (gdy wybierasz jeden z kilku elementów dotykowych) nie jest obsługiwane;
- niedostępnych jest wiele interfejsów API sprzętowych (na przykład zdarzenia zmiany orientacji).