Selenium + ChromeDriver - 開啟 DevTools 的行動裝置模式

在 Google Chrome 瀏覽器的 F12 開發工具中，有個很方便的行動裝置模式，可以模擬網站在行動裝置上的顯示和行為。在測試為手機、平板設計的網站時非常好用！

 
在自動化的時候也可以用 add_experimental_option 來設定 webdriver 開啟行動裝置模式，上個最小 Python 範例：

from selenium import webdriver

mobile_emulation = { "deviceName": "iPhone 12 Pro" }
chrome_options = webdriver.ChromeOptions()
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Chrome(options=options)


deviceName 具體有哪些 device，可以看一下自己的 Chrome 有哪些內建的裝置可以使用：

點擊上面選單的 Edit，還有更多的裝置，也可以新增自己設定：

至於在 code 裡可以用類似下面的方式來設定自己需要的裝置設定：

from selenium import webdriver

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 = webdriver.ChromeOptions()
chrome_options.add_experimental_option("mobileEmulation", mobile_emulation)
driver = webdriver.Chrome("/driver/path", options=options)


詳細推推看官方文件： https://developer.chrome.com/docs/chromedriver/mobile-emulation