Chrome 사용자는 Chrome DevTools의 모바일 에뮬레이션 기능을 사용 설정하여 Chrome 데스크톱 버전에서 휴대기기 (예: 'Nexus 7' 태블릿 또는 'iPhone 5')의 Chrome을 에뮬레이션할 수 있습니다. 이 기능을 사용하면 웹 개발 속도가 빨라지고, 개발자는 실제 기기가 없어도 휴대기기에서 웹사이트가 어떻게 렌더링되는지 빠르게 테스트할 수 있습니다. ChromeDriver는 또한 'mobileEmulation' 기능이며, 사전 값으로 지정됩니다.
DevTools Emulation 패널에서와 마찬가지로 ChromeDriver는 알려진 기기를 지정하거나 개별 기기 속성을 지정하는 두 가지 방법으로 모바일 에뮬레이션을 사용 설정할 수 있습니다. 'mobileEmulation'의 형식 원하는 방법에 따라 다릅니다.
알려진 휴대기기 지정
특정 기기 이름으로 모바일 에뮬레이션을 사용 설정하려면 'mobileEmulation' 사전에 'deviceName'을 포함해야 합니다. DevTools 에뮬레이션 패널의 유효한 기기 이름을 'deviceName' 값으로 사용합니다.
자바
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' - 기기의 픽셀 비율
- "터치" - 터치 이벤트를 에뮬레이트할지 여부입니다. 기본값은 true이며 대개 생략할 수 있습니다.
- '모바일' - 브라우저가 모바일 사용자 에이전트로 동작해야 하는지 여부 (오버레이 스크롤바, 방향 이벤트 내보내기, 표시 영역에 맞게 콘텐츠 축소 등) 기본값은 true이며 대개 생략할 수 있습니다.
'clientHints' 사전에는 다음 항목이 포함될 수 있습니다.
- '플랫폼' - 운영 체제입니다. 값은 지정된 플랫폼에서 실행되는 Chrome에서 반환한 값과 정확히 일치하는 알려진 값('Android', 'Chrome OS', 'Chromium OS', 'Fuchsia', 'Linux', 'macOS', 'Windows')일 수 있습니다. 또는 사용자 정의 값일 수 있습니다. 이 값은 필수입니다.
- '모바일' - 브라우저가 모바일 또는 데스크톱 리소스 버전을 요청해야 하는지 여부입니다. 일반적으로 Android가 설치된 휴대전화에서 실행되는 Chrome에서는 이 값을 true로 설정합니다. 태블릿 Android 기기의 Chrome에서는 이 값을 false로 설정합니다. 데스크톱 기기의 Chrome에서도 이 값을 false로 설정합니다. 이 정보를 사용하여 실제 에뮬레이션을 지정할 수 있습니다. 이 값은 필수입니다.
- 나머지 항목은 선택사항이며 테스트와 관련이 없는 경우 생략할 수 있습니다.
<ph type="x-smartling-placeholder">
- </ph>
- '브랜드' - 브랜드 / 메이저 버전 쌍의 목록. 생략하면 브라우저가 자체 값을 사용합니다.
- "fullVersionList" - 브랜드 / 버전 쌍의 목록. 브라우저가 자체 값을 사용하는 경우를 생략했습니다.
- 'platformVersion' - OS 버전. 기본값은 빈 문자열입니다.
- '모델' - 기기 모델. 기본값은 빈 문자열입니다.
- "아키텍처" - CPU 아키텍처. 알려진 값은 'x86'입니다. 'arm'이 포함됩니다 사용자는 모든 문자열 값을 자유롭게 제공할 수 있습니다. 기본값은 빈 문자열입니다.
- '비트' - 플랫폼 비트율 알려진 값은 '32'입니다. '64'로 설정합니다. 사용자는 모든 문자열 값을 자유롭게 제공할 수 있습니다. 기본값은 빈 문자열입니다.
- 'wow64' - Windows 64의 Windows 32 에뮬레이션 기본값이 false인 불리언 값입니다.
ChromeDriver는 'userAgent'를 추론할 수 있습니다. 'clientHints'의 값 'Android', 'Chrome OS', 'Chromium OS', 'Fuchsia', 'Linux', 'macOS', 'Windows' 플랫폼 따라서 이 값을 생략할 수 있습니다.
'clientHints'인 경우 사전이 생략됨 (레거시 모드) ChromeDriver가 최선을 다해 'clientHints'를 추론함 'userAgent'에서 삭제합니다. 이 기능은 'userAgent'의 내부 모호성으로 인해 안정적으로 작동하지 않습니다. 값 형식으로 이미지를 캡쳐합니다.
모바일 에뮬레이션 패널에서 사용할 수 있는 휴대전화 및 태블릿은 DevTools 소스 코드에서 찾을 수 있습니다.
자바
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 (예: 방향 변경 이벤트)를 사용할 수 없습니다.