行動裝置模擬

Chrome 可讓使用者透過電腦模擬 Chrome 來建立 Chrome 版本 安裝 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」中指定下列裝置指標字典:

  • &quot;width&quot;- 裝置螢幕的寬度 (以像素為單位)
  • 「高度」- 裝置螢幕的高度 (以像素為單位)
  • 「pixelRatio」- 裝置的像素比例
  • 「觸控」- 是否模擬觸控事件。這個值預設為 true,且通常可以省略。
  • 「行動裝置」- 瀏覽器是否必須像行動使用者代理程式一樣運作 (重疊捲軸、發出方向事件、縮小內容以符合可視區域等)。這個值預設為 true,且通常可以省略。

「clientHints」字典中可能包含下列項目:

  • 「月台」- 作業系統。這可能是已知值 (「Android」、「ChromeOS」、「Chromium OS」、「Fuchsia」、「Linux」、「macOS」、「Windows」) 等,且該值完全符合 Chrome 在指定平台上所傳回的值,或是使用者定義的值。必須提供這個值。
  • 「行動裝置」- 瀏覽器是否應該要求行動版或電腦版資源版本。一般來說,在搭載 Android 的手機上執行 Chrome 時,這個值會設為 True。平板電腦 Android 裝置上的 Chrome 將這個值設為 false。電腦版 Chrome 也會將這個值設為 false。您可以使用這項資訊指定實際模擬。必須提供這個值。
  • 其餘項目是選用項目,可省略,除非這些項目與測試相關:
    • 「brands」:品牌 / 主要版本組合的清單。如果省略這個引數,瀏覽器會採用自己的值。
    • &quot;fullVersionList&quot;- 品牌和版本組合的清單。如果您省略此設定,瀏覽器會使用本身的值。
    • 「platformVersion」- 作業系統版本。預設為空字串。
    • &quot;model&quot;- 裝置型號。預設為空字串。
    • 「架構」- CPU 架構。已知值為「x86」和「arm」。使用者可自行提供任何字串值。預設為空字串。
    • 「bitness」- 平台位元性。已知值為「32」以及「64」使用者可自行提供任何字串值。預設為空字串。
    • 「wow64」- 在 Windows 64 上模擬視窗 32。預設為 false 的布林值。

ChromeDriver 可以推論「userAgent」「clientHints」的值在下列平台上使用「Android」、「ChromeOS」、「Chromium OS」、「Fuchsia」、「Linux」、「macOS」、「Windows」。因此可以省略這個值。

如果「clientHints」省略字典 (舊版模式) ChromeDriver 會盡可能呈現最佳結果 以推斷出「clientHints」來自「userAgent」這項功能造成「userAgent」內部混淆,因此這項功能不可靠值的格式。

可透過「行動裝置模擬」面板使用的手機和平板電腦可執行以下動作: 請參閱開發人員工具原始碼

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 (例如 orientationchange 事件) 無法使用。