移动设备模拟

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”中指定以下设备指标字典:

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

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

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

ChromeDriver 能够推断出“userAgent”来自“clientHints”的值“Android”“ChromeOS”“Chromium OS”“Fuchsia”“Linux”“macOS”“Windows”。因此,可以省略此值。

如果为“clientHints”省略字典(旧版模式)ChromeDriver 会尽力执行这些操作 来推断“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(例如 orientationchange 事件)都不可用。