ユーザーがモバイル デバイスのデスクトップから Chrome をエミュレートできる 有効にすることで、Google Chrome の Chrome DevTools の Device Mode を確認します。この機能 ウェブ開発がスピードアップし、デベロッパーはウェブサイトが 実際のデバイスを必要としなくても、モバイル デバイスでレンダリングされます。ChromeDriver でできること "mobileEmulation" を使用してデバイスをエミュレートする。 使用します。
DevTools と同様に、ChromeDriver でもモバイル エミュレーションを有効にするには 2 つの方法があります。
- 既知のデバイスを指定する
- 個々のデバイス属性を指定する
"mobileEmulation" の形式は、ディクショナリは必要なメソッドによって異なります。
既知のモバイル デバイスを指定してください
特定のデバイスでデバイス エミュレーションを有効にするには、「mobileEmulation」「deviceName」を含める必要があります。[deviceName] の値は、DevTools の [ Emulated Devices] 設定にある有効なデバイス名を使用します。
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」- デバイスのピクセル比
- 「タッチ」- タッチイベントをエミュレートするかどうかを指定します。この値はデフォルトで 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>
- 「ブランド」- ブランド / メジャー バージョンのペアのリスト。省略すると、ブラウザは独自の値を使用します。
- "fullVersionList"- ブランドとバージョンのペアのリスト。ブラウザが独自の値を使用するのを省略しました。
- 「platformVersion」- OS のバージョンデフォルトは空の文字列です。
- "model"- デバイスモデルデフォルトは空の文字列です。
- "アーキテクチャ"- CPU アーキテクチャ既知の値は「x86」「arm」があります。ユーザーは任意の文字列値を自由に指定できます。デフォルトは空の文字列です。
- "bitness"- プラットフォームビット数。既知の値は「32」「64」を指定します。ユーザーは任意の文字列値を自由に指定できます。デフォルトは空の文字列です。
- 「wow64」- ウィンドウ 64 でのウィンドウ 32 のエミュレーションデフォルトで false に設定されるブール値。
ChromeDriver は「userAgent」を推測できる「clientHints」から値を取得プラットフォーム: 「Android」、「Chrome OS」、「Chromium OS」、「Fuchsia」、「Linux」、「macOS」、「Windows」。そのため、この値は省略できます。
"clientHints" が辞書が省略されている(以前のモード)ChromeDriver が最善を尽くす 「clientHints」を「userAgent」から取得できます。「userAgent」の内部であいまいさがあるため、この機能は信頼できません値の形式を取ります。
[Mobile Emulation] パネルで利用できるスマートフォンやタブレットは、 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 はエミュレートされません(特に、アドレスバーを非表示にするとページの高さに影響します)。
- 曖昧性除去ポップアップ(いくつかのタップ ターゲットのうちの 1 つを選択する)はサポートされていません。
- 多くのハードウェア API(
orientationchange
イベントなど)は使用できません。