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

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

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

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

หากต้องการเปิดใช้งาน Mobile Emulation ที่มีชื่ออุปกรณ์ที่เฉพาะเจาะจง พจนานุกรม "mobileEmulation" ต้องมี "deviceName" ใช้ชื่ออุปกรณ์ที่ถูกต้องจากแผงการจำลอง DevTools เป็นค่าสำหรับ "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())

การระบุแอตทริบิวต์อุปกรณ์แต่ละเครื่อง

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

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

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

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

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

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

ดูโทรศัพท์และแท็บเล็ตที่พร้อมใช้งานในแผงการจำลองอุปกรณ์เคลื่อนที่ได้ในซอร์สโค้ดของ 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 บนอุปกรณ์เคลื่อนที่ (โดยเฉพาะแถบ URL ที่ซ่อนจะส่งผลต่อความสูงของหน้า)
  • ไม่รองรับป๊อปอัปที่มีความชัดเจน (ในกรณีที่คุณเลือกเป้าหมายการแตะเพียงไม่กี่เป้าหมาย)
  • ไม่มี API ฮาร์ดแวร์หลายรายการ (เช่น เหตุการณ์การเปลี่ยนการวางแนว)