Chrome 只要啟用 Chrome 開發人員工具中的行動裝置模擬功能,使用者就能透過 Chrome 電腦版的行動裝置 (例如「Nexus 7」平板電腦或「iPhone 5」) 模擬 Chrome。這項功能可以加快網頁開發速度,讓開發人員不必實際使用裝置,就能快速測試網站在行動裝置上的顯示效果。此外,ChromeDriver 也可以透過「mobileEmulation」功能 (使用字典值指定) 啟用行動模擬功能。
與「開發人員工具模擬」面板一樣,ChromeDriver 可透過兩種方式啟用行動裝置模擬功能:指定已知裝置,或指定個別裝置屬性。「mobileEmulation」字典的格式取決於您要使用的方法。
指定已知的行動裝置
如要針對特定裝置名稱啟用「行動裝置模擬」,「mobileEmulation」字典必須包含「deviceName」。請使用開發人員工具模擬面板中的有效裝置名稱,做為「deviceName」的值。
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())
指定個別裝置屬性
您也可以指定個別屬性來啟用行動裝置模擬。如要透過這種方式啟用行動裝置模擬,「mobileEmulation」字典會包含「deviceMetrics」和「clientHints」字典和「userAgent」字串。您必須在「deviceMetrics」字典中指定下列裝置指標:
- 「width」- 裝置螢幕的寬度 (以像素為單位)
- 「height」- 裝置螢幕的高度 (以像素為單位)
- 「pixelRatio」- 裝置的像素比例
- 「touch」- 是否模擬觸控事件。這個值預設為 true,通常可以省略。
- "mobile" - 是否瀏覽器必須做為行動裝置使用者代理程式的行為 (重疊捲軸、輸出事件、縮小內容以符合可視區域等)。這個值預設為 true,通常可以省略。
「clientHints」字典可能包含下列項目:
- "platform" - 作業系統。可以是與指定平台上執行 Chrome 所傳回值的已知值 (例如「Android」、「ChromeOS」、「Chromium OS」、「Fuchsia」、「Linux」、「macOS」、「Windows」),或是使用者定義的值。這是必填欄位。
- "mobile" - 瀏覽器應要求行動版或電腦版資源版本。一般來說,在搭載 Android 的手機上執行 Chrome 會將這個值設為 True。平板電腦 Android 裝置上的 Chrome 會將這個值設為 false。電腦版 Chrome 也會將這個值設為 false。您可以利用這項資訊指定實際的模擬結果。這是必填欄位。
- 其餘項目為選用項目,除非與測試相關,否則可以省略:
- "brands" - 品牌 / 主要版本組合清單。如果省略這個值,瀏覽器將會使用本身的值。
- 「fullVersionList」- 品牌 / 版本組合的清單。省略瀏覽器本身的值。
- 「platformVersion」- OS 版本。預設為空字串。
- "model":裝置型號。預設為空字串。
- 「Architectureure」:CPU 架構已知值為「x86」和「arm」。使用者可任意提供任何字串值。預設為空字串。
- 「bitness」-平台位元度。已知值為「32」和「64」。使用者可任意提供任何字串值。預設為空字串。
- 「wow64」:模擬 Windows 64 上的視窗 32。預設為 false 的布林值。
ChromeDriver 可以在下列平台上,從「clientHints」推論出「userAgent」值:「Android」、「ChromeOS」、「Chromium OS」、「Fuchsia」、「Linux」、「macOS」、「Windows」。因此,您可以省略這個值。
如果省略「clientHints」字典 (舊版模式),ChromeDriver 會盡可能從「userAgent」推論出「clientHints」。雖然「userAgent」值格式內部不明確,因此這項功能無法正常運作。
您可以在 DevTools 原始碼查看「行動裝置模擬」面板下方提供的手機和平板電腦。
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
"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
}
}
行動裝置模擬和實體裝置之間的差異
利用行動裝置模擬功能在電腦上測試行動版網站是相當實用的做法,但請注意,測試人員應知道有許多細微差異,例如:
- GPU 完全不同,可能會導致效能大幅變化;
- 行動裝置使用者介面並未模擬 (具體來說,隱藏網址列會影響網頁高度);
- 不支援消歧彈出式視窗 (從中選取其中一個觸控目標)
- 很多硬體 API (例如螢幕方向變更事件) 無法使用。