移动设备模拟

通过使用 Chrome 开发者工具启用设备模式,Chrome 允许用户从桌面版 Chrome 在移动设备上模拟 Chrome。此功能可加快 Web 开发速度,让开发者无需使用真实设备,即可快速测试网站在移动设备中的呈现方式。ChromeDriver 还可以使用字典值指定的“mobileEmulation”功能来模拟设备。

与开发者工具一样,ChromeDriver 中也有两种方法可以启用移动设备模拟:

  • 指定已知设备
  • 指定各个设备属性

“mobileEmulation”字典的格式取决于所需的方法。

指定已知的移动设备

如需使用特定设备启用设备模拟,则“mobileEmulation”字典必须包含“deviceName”。使用 DevTools 模拟设备设置中的有效设备名称作为“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”字典可以包含 deviceMetricsclientHints 字典和 userAgent 字符串。

必须在“deviceMetrics”字典中指定以下设备指标:

  • “width”- 设备屏幕的宽度(以像素为单位)
  • "height" - 设备屏幕的高度(以像素为单位)
  • “pixelRatio”- 设备的像素比
  • “touch”- 是否模拟触摸事件。此值的默认值为 true,通常可以省略。
  • “mobile”- 浏览器是否必须像移动用户代理一样运行(叠加滚动条、发出屏幕方向事件、缩小内容以适应视口等)。此值的默认值为 true,通常可以省略。

“clientHints”字典可能包含以下条目:

  • “platform”- 操作系统。它可以是与在给定平台上运行的 Chrome 返回的值完全匹配的已知值(“Android”“ChromeOS”“ChromiumOS”“Fuchsia”“Linux”“macOS”“Windows”),也可以是用户定义的值。此值为必填项。
  • "mobile" - 浏览器应请求移动版还是桌面版资源。通常,在搭载 Android 的移动设备上运行的 Chrome 会将此值设置为 true。平板电脑 Android 设备上的 Chrome 会将此值设为 false。桌面设备上的 Chrome 也会将此值设置为 false。您可以使用这些信息指定逼真的模拟。此值为必填项。
  • 其余条目是可选的,除非这些条目与测试相关,否则可以省略:
    • “brands”- 品牌 / 主要版本对的列表。如果省略,则浏览器会使用自己的值。
    • "fullVersionList":品牌 / 版本对列表。它省略了浏览器使用自己的值。
    • “platformVersion”- 操作系统版本。默认为空字符串。
    • “model”- 设备型号。默认为空字符串。
    • “architecture”- CPU 架构。已知值为“x86”和“arm”。用户可以随意提供任何字符串值。默认为空字符串。
    • "bitness" - 平台位数。已知值为“32”和“64”。用户可以自由提供任何字符串值。默认为空字符串。
    • “wow64” - 在 Windows 64 上模拟 Windows 32。一个布尔值,默认为 false。

ChromeDriver 能够在以下平台上根据“clientHints”推断“userAgent”值:“Android”“Chrome OS”“Chromium OS”“Fuchsia”“Linux”“macOS”“Windows”。因此,可以省略此值。

如果省略了“clientHints”字典(旧版模式),ChromeDriver 会尽力从“userAgent”推断出“clientHints”。由于“userAgent”值格式的内部模糊性,此功能不可靠。

您可以在 DevTools 源代码中找到“Mobile Emulation”面板下提供的手机和平板电脑。

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 事件)都不可用。