การจำลองอุปกรณ์เคลื่อนที่

Chrome อนุญาตให้ผู้ใช้จำลอง Chrome บนอุปกรณ์เคลื่อนที่จากเดสก์ท็อป ของ Chrome ด้วยการเปิดใช้ โหมดอุปกรณ์ด้วยเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ฟีเจอร์นี้ เร่งการพัฒนาเว็บ ทำให้นักพัฒนาซอฟต์แวร์สามารถทดสอบ ว่าเว็บไซต์ แสดงผลในอุปกรณ์เคลื่อนที่โดยไม่ต้องใช้อุปกรณ์จริง ChromeDriver สามารถ ให้จำลองอุปกรณ์ด้วย "mobileEmulation" ที่ระบุด้วย ในพจนานุกรม

ใน ChromeDriver มีวิธีเปิดใช้ Mobile Emulation อยู่ 2 วิธี เช่นเดียวกับในเครื่องมือสำหรับนักพัฒนาเว็บ

• ระบุอุปกรณ์ที่รู้จัก
• ระบุแอตทริบิวต์อุปกรณ์แต่ละรายการ

รูปแบบของ "mobileEmulation" ขึ้นอยู่กับว่าจำเป็นต้องใช้วิธีใด

ระบุอุปกรณ์เคลื่อนที่ที่รู้จัก

หากต้องการเปิดใช้การจำลองอุปกรณ์กับอุปกรณ์ที่เฉพาะเจาะจง ระบบจะใช้ "mobileEmulation" พจนานุกรมต้องมี "deviceName" ใช้ชื่ออุปกรณ์ที่ถูกต้องจากการตั้งค่าอุปกรณ์ที่จำลองเครื่องมือสำหรับนักพัฒนาเว็บเป็นค่าสำหรับ "deviceName"

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

ระบุแอตทริบิวต์อุปกรณ์แต่ละรายการ

คุณสามารถเปิดใช้การจำลองอุปกรณ์เคลื่อนที่ด้วยการระบุแอตทริบิวต์แต่ละรายการ "การเลียนแบบอุปกรณ์เคลื่อนที่" พจนานุกรมมี deviceMetrics, clientHints ได้ พจนานุกรม และสตริง userAgent

ต้องระบุเมตริกอุปกรณ์ต่อไปนี้ใน "deviceMetrics" พจนานุกรม:

• "width" - ความกว้างของหน้าจออุปกรณ์เป็นพิกเซล
• "ความสูง" - ความสูงเป็นพิกเซลของหน้าจออุปกรณ์
• "pixelRatio" - อัตราส่วนพิกเซลของอุปกรณ์
• "แตะ" - ต้องการจำลองเหตุการณ์การสัมผัสหรือไม่ ค่าเริ่มต้นจะเป็น "จริง" และโดยทั่วไปสามารถละเว้นได้
• "มือถือ" - เบราว์เซอร์ต้องทำงานเหมือน User Agent สำหรับอุปกรณ์เคลื่อนที่หรือไม่ (แถบเลื่อนวางซ้อน แสดงเหตุการณ์การวางแนว ย่อเนื้อหาให้พอดีกับวิวพอร์ต เป็นต้น) ค่าเริ่มต้นจะเป็น "จริง" และโดยทั่วไปสามารถละเว้นได้

"clientHints" พจนานุกรมสามารถมีรายการต่อไปนี้

• "แพลตฟอร์ม" - ระบบปฏิบัติการ อาจเป็นค่าที่รู้จัก ("Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows") ซึ่งตรงกับค่าทั้งหมดที่ Chrome แสดงบนแพลตฟอร์มที่กำหนด หรืออาจเป็นค่าที่ผู้ใช้กำหนดก็ได้ ค่านี้เป็นค่าบังคับ
• "มือถือ" - เบราว์เซอร์ควรขอเวอร์ชันทรัพยากรของอุปกรณ์เคลื่อนที่หรือเดสก์ท็อป โดยปกติแล้ว Chrome ที่ทำงานบนโทรศัพท์มือถือที่มี Android จะตั้งค่านี้เป็น "จริง" Chrome บนแท็บเล็ต Android ตั้งค่านี้เป็น "เท็จ" Chrome บนอุปกรณ์เดสก์ท็อปยังกำหนดค่านี้เป็น "เท็จ" อีกด้วย คุณใช้ข้อมูลนี้เพื่อระบุการเลียนแบบที่สมจริงได้ ค่านี้เป็นค่าบังคับ
• รายการอื่นๆ ที่เหลือเป็นตัวเลือก และสามารถข้ามได้ ยกเว้นในกรณีที่มีความเกี่ยวข้องกับการทดสอบ
  • "แบรนด์" - รายการคู่แบรนด์ / เวอร์ชันหลัก หากละไว้ เบราว์เซอร์จะใช้ค่าของตัวเอง
  • "fullVersionList" - รายการคู่แบรนด์ / เวอร์ชัน โดยละเว้นว่าเบราว์เซอร์ใช้ค่าของตนเอง
  • "platformVersion" - เวอร์ชันของระบบปฏิบัติการ ค่าเริ่มต้นเป็นสตริงว่างเปล่า
  • "model" - รุ่นอุปกรณ์ ค่าเริ่มต้นเป็นสตริงว่างเปล่า
  • "สถาปัตยกรรม" - สถาปัตยกรรม CPU ค่าที่รู้จักคือ "x86" และ "แขน" ผู้ใช้สามารถระบุค่าสตริงใดก็ได้ ค่าเริ่มต้นเป็นสตริงว่างเปล่า
  • "บิตเนส" - บิตเนสของแพลตฟอร์ม ค่าที่รู้จักคือ "32" และ "64" ผู้ใช้สามารถระบุค่าสตริงใดก็ได้ ค่าเริ่มต้นเป็นสตริงว่างเปล่า
  • "ว้าว64" - การจำลอง Windows 32 บน Windows 64 ค่าบูลีนที่มีค่าเริ่มต้นเป็น false

ChromeDriver สามารถอนุมาน "userAgent" ได้ จาก "clientHints" บนแพลตฟอร์มต่อไปนี้: "Android", "Chrome OS", "Chromium OS", "Fuchsia", "Linux", "macOS", "Windows" จึงสามารถละเว้นค่านี้ได้

หากเป็น "clientHints" ละเว้นพจนานุกรม (โหมดเดิม) ChromeDriver จะทำงานอย่างสุดความสามารถ เพื่อที่จะอนุมาน "clientHints" จาก "userAgent" ฟีเจอร์นี้ไม่น่าเชื่อถือเนื่องจากความกำกวมภายในของ "userAgent" รูปแบบค่า

โทรศัพท์และแท็บเล็ตที่แสดงอยู่ในแผง "การจำลองอุปกรณ์เคลื่อนที่" สามารถ ได้ในซอร์สโค้ดสำหรับเครื่องมือสำหรับนักพัฒนาเว็บ

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 ใน 2-3 รายการ)
• API ของฮาร์ดแวร์หลายรายการ (เช่น เหตุการณ์ orientationchange) ไม่พร้อมใช้งาน