モバイル エミュレーション

Chrome では、Chrome DevTools でデバイスモードを有効にすることで、デスクトップ版 Chrome からモバイル デバイス上の Chrome をエミュレートできます。この機能により、ウェブ開発のスピードが向上し、デベロッパーは実際のデバイスを使用せずに、モバイル デバイスでウェブサイトがどのようにレンダリングされるかをすばやくテストできます。ChromeDriver は、辞書値で指定された「mobileEmulation」機能を使用してデバイスをエミュレートすることもできます。

DevTools と同様に、ChromeDriver でモバイル エミュレーションを有効にする方法は 2 つあります。

  • 既知のデバイスを指定する
  • 個々のデバイス属性を指定する

「mobileEmulation」ディクショナリの形式は、必要なメソッドによって異なります。

既知のモバイル デバイスを指定する

特定のデバイスでデバイス エミュレーションを有効にするには、「mobileEmulation」ディクショナリに「deviceName」を含める必要があります。「deviceName」の値には、DevTools のエミュレートされたデバイスの設定で有効なデバイス名を使用します。

[デバイス] 設定のスクリーンショット

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())

既知のデバイスのソース

既知のデバイスのリストは、DevTools のエミュレーション パネルから生成されます。ただし、デバイスのリストが新しいバージョンまたは古いバージョンの Chrome に対して、別のバージョンの ChromeDriver を使用できます。

ChromeDriver が認識しないデバイス名を試すと、「<your device name> は有効なデバイスである必要があります」というエラーが表示されます。ChromeDriver が認識していないデバイスをエミュレートするには、個々のデバイス指標を使用してモバイル エミュレーションを有効にします。

個々のデバイス属性を指定する

モバイル エミュレーションを有効にするには、個々の属性を指定します。「mobileEmulation」辞書には、deviceMetrics 辞書、clientHints 辞書、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」- OS のバージョン。デフォルトは空の文字列です。
    • 「model」 - デバイスモデル。デフォルトは空の文字列です。
    • 「architecture」- CPU アーキテクチャ。既知の値は「x86」と「arm」です。ユーザーは任意の文字列値を指定できます。デフォルトは空の文字列です。
    • 「bitness」- プラットフォームのビット数。既知の値は「32」と「64」です。ユーザーは任意の文字列値を指定できます。デフォルトは空の文字列です。
    • 「wow64」- Windows 64 での Windows 32 のエミュレーション。デフォルトは false のブール値。

ChromeDriver は、「Android」、「ChromeOS」、「ChromiumOS」、「Fuchsia」、「Linux」、「macOS」、「Windows」の各プラットフォームで、「clientHints」から「userAgent」値を推測できます。そのため、この値は省略できます。

「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 が異なることが多く、パフォーマンスに大きな影響を与える可能性があります。
  • モバイル UI はエミュレートされません(特に、アドレスバーを非表示にするとページの高さに影響します)。
  • 複数のタップ対象のいずれかを選択する不明確性の解消ポップアップはサポートされていません。
  • 多くのハードウェア API(orientationchange イベントなど)は使用できません。