Halaman ini diterjemahkan oleh Cloud Translation API.

Emulasi seluler

Chrome memungkinkan pengguna mengemulasikan Chrome di perangkat seluler (seperti tablet "Nexus 7" atau "iPhone 5") dari versi desktop Chrome, dengan mengaktifkan fitur Emulasi Seluler di Chrome DevTools. Fitur ini mempercepat pengembangan web, memungkinkan developer menguji dengan cepat bagaimana situs akan dirender di perangkat seluler, tanpa memerlukan perangkat sungguhan. ChromeDriver juga dapat mengaktifkan Emulasi Seluler, melalui kemampuan "mobileEmulation", yang ditentukan dengan nilai kamus.

Sama seperti di panel Emulasi DevTools, ada dua cara di ChromeDriver untuk mengaktifkan Emulasi Seluler: dengan menentukan perangkat yang diketahui, atau dengan menentukan atribut perangkat individual. Format kamus "mobileEmulation" bergantung pada metode yang diinginkan.

Menentukan Perangkat Seluler yang Diketahui

Untuk mengaktifkan Emulasi Seluler dengan nama perangkat tertentu, kamus "mobileEmulation" harus berisi "deviceName". Gunakan nama perangkat yang valid dari panel Emulasi DevTools sebagai nilai untuk "deviceName".

Screenshot setelan Perangkat

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

Menentukan Atribut Perangkat Individual

Anda juga dapat mengaktifkan Emulasi Seluler dengan menentukan masing-masing atribut. Untuk mengaktifkan Emulasi Seluler dengan cara ini, kamus "mobileEmulation" dapat berisi kamus "deviceMetrics" dan "clientHints" serta string "userAgent". Metrik perangkat berikut harus ditentukan dalam kamus "deviceMetrics":

"width" - lebar dalam piksel layar perangkat
"height" - tinggi dalam piksel layar perangkat
"pixelRatio" - rasio piksel perangkat
"touch" - apakah akan mengemulasi peristiwa sentuh atau tidak. Nilai defaultnya adalah benar (true) dan biasanya dapat dihilangkan.
"mobile" - apakah browser harus berperilaku sebagai agen pengguna seluler (bilah gulir overlay, memunculkan peristiwa orientasi, mengecilkan konten agar sesuai dengan area pandang, dll.). Nilai defaultnya adalah benar (true) dan biasanya dapat dihilangkan.

Kamus "clientHints" dapat memiliki entri berikut:

"platform" - sistem operasi. Nilai ini dapat berupa nilai yang diketahui ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows"), yang sama persis dengan nilai yang ditampilkan oleh Chrome yang berjalan di platform tertentu, atau dapat berupa nilai yang ditentukan pengguna. Nilai ini bersifat wajib.
"mobile" - apakah browser harus meminta versi sumber daya seluler atau desktop. Biasanya Chrome yang berjalan di ponsel dengan Android menetapkan nilai ini ke true (benar). Chrome di perangkat Android tablet menetapkan nilai ini ke salah (false). Chrome di perangkat desktop juga menetapkan nilai ini ke salah (false). Anda dapat menggunakan informasi ini untuk menentukan emulasi yang realistis. Nilai ini bersifat wajib.
Entri yang tersisa bersifat opsional dan dapat dihilangkan kecuali jika relevan untuk pengujian:
- "brand" - daftar pasangan merek / versi utama. Jika dihilangkan, browser akan menggunakan nilainya sendiri.
- "fullVersionList" - daftar pasangan merek / versi. Ini menghilangkan browser menggunakan nilainya sendiri.
- "platformVersion" - versi OS. Default-nya adalah string kosong.
- "model" - model perangkat. Default-nya adalah string kosong.
- "arsitektur" - arsitektur CPU. Nilai yang diketahui adalah "x86" dan "arm". Pengguna bebas memberikan nilai string apa pun. Default-nya adalah string kosong.
- "bitness" - bitness platform. Nilai yang diketahui adalah "32" dan "64". Pengguna bebas memberikan nilai string apa pun. Default-nya adalah string kosong.
- "wow64" - emulasi windows 32 di windows 64. Nilai boolean yang defaultnya adalah salah (false).

ChromeDriver dapat menyimpulkan nilai "userAgent" dari "clientHints" pada platform berikut: "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows". Oleh karena itu, nilai ini dapat dihilangkan.

Jika kamus "clientHints" dihilangkan (mode lama), ChromeDriver akan melakukan yang terbaik untuk menyimpulkan "clientHints" dari "userAgent". Namun, fungsi ini tidak berfungsi dengan baik karena ambiguitas internal format nilai "userAgent".

Ponsel dan tablet yang tersedia di bagian panel Emulasi Seluler dapat ditemukan di kode sumber 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)

Contoh konfigurasi emulasi seluler yang diperluas:

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

Perbedaan antara emulasi seluler dan perangkat sebenarnya

Menguji situs seluler di desktop menggunakan emulasi seluler dapat bermanfaat, tetapi penguji harus menyadari bahwa ada banyak perbedaan kecil seperti:

GPU yang sama sekali berbeda, yang dapat menyebabkan perubahan kinerja besar;
UI seluler tidak diemulasikan (khususnya, kolom URL penyembunyi memengaruhi tinggi halaman);
pop-up disambiguasi (tempat Anda memilih salah satu dari beberapa target sentuh) tidak didukung;
banyak API hardware (misalnya, peristiwa perubahan orientasi) tidak tersedia.