Trang này được dịch bởi Cloud Translation API.

Mô phỏng thiết bị di động

Chrome cho phép người dùng mô phỏng Chrome trên thiết bị di động (chẳng hạn như máy tính bảng "Nexus 7" hoặc "iPhone 5") từ phiên bản Chrome dành cho máy tính, bằng cách bật tính năng Mô phỏng thiết bị di động trong Công cụ của Chrome cho nhà phát triển. Tính năng này tăng tốc độ phát triển web, cho phép các nhà phát triển nhanh chóng kiểm tra cách một trang web sẽ hiển thị trên thiết bị di động mà không cần đến thiết bị thực. ChromeDriver cũng có thể bật tính năng Mô phỏng thiết bị di động thông qua tính năng "mobileEmulation" (Mô phỏng thiết bị di động) chức năng, được chỉ định bằng một giá trị từ điển.

Cũng giống như trong bảng điều khiển Mô phỏng công cụ cho nhà phát triển, có hai cách trong ChromeDriver để bật tính năng Mô phỏng thiết bị di động: bằng cách chỉ định một thiết bị đã biết hoặc bằng cách chỉ định từng thuộc tính thiết bị. Định dạng của "mobileMô phỏng" tuỳ thuộc vào phương thức nào được mong muốn.

Chỉ định thiết bị di động đã biết

Để bật tính năng Mô phỏng thiết bị di động với tên thiết bị cụ thể, tính năng "mobileEmulation" từ điển phải chứa "deviceName". Sử dụng tên thiết bị hợp lệ trong bảng Mô phỏng DevTools làm giá trị cho "deviceName".

Ảnh chụp màn hình chế độ cài đặt Thiết bị

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

Hồng ngọc

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

Chỉ định các thuộc tính thiết bị riêng lẻ

Cũng có thể bật Mô phỏng thiết bị di động bằng cách chỉ định các thuộc tính riêng lẻ. Để bật tính năng Mô phỏng thiết bị di động theo cách này, lệnh "mobileEmulation" từ điển có thể chứa "deviceMetrics" và "clientHints" từ điển và "userAgent" . Bạn phải chỉ định các chỉ số thiết bị sau đây trong thuộc tính "deviceMetrics" từ điển:

"chiều rộng" – chiều rộng tính bằng pixel của màn hình thiết bị
"height" – chiều cao tính bằng pixel của màn hình thiết bị
"pixelRatio" – tỷ lệ pixel của thiết bị
"chạm" – việc mô phỏng các sự kiện chạm. Giá trị mặc định là true và thường có thể bị bỏ qua.
"điện thoại di động" - liệu trình duyệt có phải hoạt động như một tác nhân người dùng trên thiết bị di động hay không (thanh cuộn lớp phủ, phát các sự kiện về hướng, thu nhỏ nội dung cho vừa với khung nhìn, v.v.). Giá trị mặc định là true và thường có thể bị bỏ qua.

Phần tử "clientHints" từ điển có thể có các mục nhập sau:

"platform" - hệ điều hành. Đây có thể là giá trị đã biết ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows"), khớp chính xác với giá trị mà Chrome chạy trên nền tảng đã cho trả về hoặc có thể là giá trị do người dùng xác định. Giá trị này là bắt buộc.
"điện thoại di động" - việc trình duyệt sẽ yêu cầu phiên bản tài nguyên dành cho thiết bị di động hay máy tính. Thông thường, Chrome chạy trên điện thoại di động có Android sẽ đặt giá trị này thành true. Chrome trên thiết bị Android dành cho máy tính bảng đặt giá trị này thành false. Chrome trên thiết bị máy tính cũng đặt giá trị này thành false. Bạn có thể sử dụng thông tin này để chỉ định một mô phỏng thực tế. Giá trị này là bắt buộc.
Các mục còn lại là không bắt buộc và có thể bỏ qua trừ phi chúng phù hợp với thử nghiệm:
- "thương hiệu" – danh sách các cặp phiên bản chính / thương hiệu. Nếu bạn bỏ qua, trình duyệt sẽ sử dụng các giá trị riêng của trình duyệt đó.
- "fullVersionList" – danh sách các cặp thương hiệu / phiên bản. Giá trị này đã bỏ qua việc trình duyệt sử dụng các giá trị riêng của trình duyệt.
- "platformVersion" – Phiên bản hệ điều hành. Giá trị mặc định là chuỗi trống.
- "mô hình" – mẫu thiết bị. Giá trị mặc định là chuỗi trống.
- "cấu trúc" – Cấu trúc CPU. Giá trị đã biết là "x86" và "arm". Người dùng có thể tuỳ ý cung cấp bất kỳ giá trị chuỗi nào. Giá trị mặc định là chuỗi trống.
- "độ bit" - bit nền tảng. Giá trị đã biết là "32" và "64". Người dùng có thể tuỳ ý cung cấp bất kỳ giá trị chuỗi nào. Giá trị mặc định là chuỗi trống.
- "wow 64" - Mô phỏng windows 32 trên Windows 64 Một giá trị boolean mặc định là false.

ChromeDriver có thể suy ra "userAgent" giá trị từ "clientHints" trên các nền tảng sau: "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows". Do đó, bạn có thể bỏ qua giá trị này.

Nếu "clientHints" từ điển bị bỏ qua (chế độ cũ) ChromeDriver sẽ cố gắng hết sức để suy ra "clientHints" từ "userAgent". Chức năng này hoạt động không đáng tin cậy do sự không rõ ràng nội bộ về "userAgent" giá trị.

Các điện thoại và máy tính bảng có sẵn trong bảng Mô phỏng thiết bị di động có thể được tìm thấy trong mã nguồn 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);

Hồng ngọc

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)

Ví dụ về cấu hình mô phỏng thiết bị di động hoàn chỉnh:

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

Sự khác biệt giữa việc mô phỏng thiết bị di động và thiết bị thực

Việc thử nghiệm một trang web dành cho thiết bị di động trên máy tính bằng quy trình mô phỏng trên thiết bị di động có thể hữu ích, nhưng người thử nghiệm cần lưu ý rằng có nhiều điểm khác biệt nhỏ như:

GPU hoàn toàn khác nhau, điều này có thể dẫn đến thay đổi lớn về hiệu suất;
giao diện người dùng trên thiết bị di động không được mô phỏng (cụ thể là việc ẩn thanh url ảnh hưởng đến chiều cao của trang);
cửa sổ bật lên phân định (nơi bạn chọn một trong một vài đích chạm) không được hỗ trợ;
nhiều API phần cứng (ví dụ: sự kiện thay đổi hướng) không có sẵn.