Chrome을 통해 사용자는 데스크톱에서 휴대기기의 Chrome을 에뮬레이션할 수 있음 최신 버전의 Chrome을 사용 설정하여 Chrome DevTools로 기기 모드를 사용 설정합니다. 이 기능 웹 개발 속도를 높이고, 개발자가 모바일 장치에서 렌더링할 수 있습니다. ChromeDriver는 또한 'mobileEmulation' 기능이며 dictionary 값을 반환합니다.
DevTools와 마찬가지로 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'에 지정되어야 합니다. 사전:
- "width" - 기기 화면의 너비(픽셀)입니다.
- '높이' - 기기 화면의 높이(픽셀)입니다.
- '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 버전. 기본값은 빈 문자열입니다.
- "model" - 기기 모델. 기본값은 빈 문자열입니다.
- "아키텍처" - 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'의 내부 모호성으로 인해 이 기능을 신뢰할 수 없습니다. 값 형식으로 이미지를 캡쳐합니다.
Mobile Emulation 패널에서 사용할 수 있는 휴대전화 및 태블릿에서는 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가 에뮬레이션되지 않습니다 (특히 주소 표시줄을 숨기면 페이지 높이에 영향을 줌).
- 몇 가지 터치 영역 중 하나를 선택하는 명확성 팝업은 지원되지 않습니다.
- 다수의 하드웨어 API (예:
orientationchange이벤트)를 사용할 수 없습니다.