移动设备模拟

Chrome 允许用户在移动设备（例如“Nexus 7”平板电脑或“iPhone 5”）的桌面版 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”字典可以包含“deviceMetrics”和“clientHints”字典以及“userAgent”字符串。必须在“deviceMetrics”字典中指定以下设备指标：

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

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

  • "platform" - 操作系统。该值可以是与给定平台上运行的 Chrome 返回的值完全匹配的已知值（“Android”“Chrome 操作系统”“Chromium 操作系统”“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 源代码中找到“移动模拟”面板下的手机和平板电脑。

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
  }
}

移动模拟与真实设备之间的区别

使用移动模拟在桌面设备上测试移动网站可能很有用，但测试人员应注意两者存在许多细微差别，例如：

  • 这可能导致性能大幅变化；
  • 未模拟移动界面（特别是，隐藏网址栏会影响页面高度）；
  • 不支持消除歧义弹出式窗口（您可以在其中选择几个触摸目标中的其中一个）；
  • 许多硬件 API（例如屏幕方向更改事件）都不可用。