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 giúp tăng tốc độ phát triển web, cho phép nhà phát triển thử nghiệm nhanh cách trang web 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 Mô phỏng thiết bị di động, thông qua tính năng "mobileEmulation" (Mô phỏng thiết bị di động), được chỉ định bằng một giá trị từ điển.

Cũng giống như trong bảng Mô phỏng công cụ cho nhà phát triển, có hai cách trong ChromeDriver để bật công nghệ 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 các thuộc tính riêng lẻ của thiết bị. Định dạng của từ điển "mobileEmulation" phụ thuộc vào phương pháp mong muốn.

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

Để bật Mô phỏng thiết bị di động bằng tên thiết bị cụ thể, từ điển "mobileEmulation" phải chứa "deviceName". Hãy sử dụng tên thiết bị hợp lệ trong Bảng điều khiển 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 từng thuộc tính thiết bị

Bạn 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 trên thiết bị di động theo cách này, từ điển "mobileEmulation" có thể chứa từ điển "deviceMetrics" và "clientHints" cũng như chuỗi "userAgent". Các chỉ số thiết bị sau đây phải được chỉ định trong từ điển "deviceMetrics":

"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" – có cần mô phỏng các sự kiện chạm hay không. Giá trị mặc định là true và thường có thể bỏ qua.
"mobile" – xem trình duyệt có phải hoạt động như một tác nhân người dùng thiết bị di động hay không (thanh cuộn lớp phủ, phát các sự kiện 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ỏ qua.

Từ điển "clientHints" có thể có các mục sau:

"platform" - hệ điều hành. Đó có thể là một 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 đang chạy trên nền tảng nhất định 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.
"mobile" - liệu trình duyệt nên 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 nhập 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 thương hiệu / phiên bản lớn. Nếu bạn bỏ qua, trình duyệt sẽ sử dụng các giá trị riêng.
- "fullVersionList" – danh sách các cặp thương hiệu / phiên bản. Trường này bỏ qua mà trình duyệt sẽ sử dụng các giá trị riêng.
- "platformVersion" – Phiên bản hệ điều hành. Giá trị mặc định là chuỗi trống.
- "model" – mẫu thiết bị. Giá trị mặc định là chuỗi trống.
- "Architect" (Kiến trúc) – Kiến trúc CPU. Các giá trị đã biết là "x86" và "arm". Người dùng có thể cung cấp bất kỳ giá trị chuỗi nào. Giá trị mặc định là chuỗi trống.
- "bitness" – độ bit của nền tảng. Các giá trị đã biết là "32" và "64". Người dùng có thể cung cấp bất kỳ giá trị chuỗi nào. Giá trị mặc định là chuỗi trống.
- "wow64" – mô phỏng Windows 32 trên Windows 64. Một giá trị boolean mặc định là false.

ChromeDriver có thể dự đoán giá trị "userAgent" 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 bạn bỏ qua từ điển "clientHints" (chế độ cũ), ChromeDriver sẽ cố gắng hết sức để suy ra "clientHints" từ "userAgent". Chức năng này không hoạt động ổn định mặc dù do có sự không rõ ràng nội bộ về định dạng giá trị "userAgent".

Bạn có thể tìm thấy các điện thoại và máy tính bảng có sẵn trong bảng điều khiển Mô phỏng thiết bị di động 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 bị nổ toàn bộ:

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 mô phỏng thiết bị di động và thiết bị thực

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

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 biệt là thanh url ẩn ảnh hưởng đến chiều cao trang);
Cửa sổ bật lên phân định (nơi bạn chọn một trong vài đích chạm) không được hỗ trợ;
nhiều API phần cứng (ví dụ: sự kiện progresschange) không khả dụng.