이 페이지는 Cloud Translation API를 통해 번역되었습니다.

모바일 에뮬레이션

Chrome에서는 Chrome DevTools의 모바일 에뮬레이션 기능을 사용 설정하여 사용자가 Chrome 데스크톱 버전에서 휴대기기 (예: 'Nexus 7' 태블릿 또는 'iPhone 5')에서 Chrome을 에뮬레이션할 수 있습니다. 이 기능은 웹 개발 속도를 높여주며, 개발자는 실제 기기 없이도 웹사이트가 휴대기기에서 어떻게 렌더링되는지 빠르게 테스트할 수 있습니다. ChromeDriver는 사전 값으로 지정된 'mobileEmulation' 기능을 통해 모바일 에뮬레이션을 사용 설정할 수도 있습니다.

DevTools Emulation 패널에서와 마찬가지로 ChromeDriver에서 모바일 에뮬레이션을 사용 설정하는 방법에는 두 가지가 있습니다. 하나는 알려진 기기를 지정하거나 개별 기기 속성을 지정하는 것입니다. 'mobileEmulation' 사전의 형식은 원하는 방법에 따라 다릅니다.

알려진 휴대기기 지정

특정 기기 이름으로 모바일 에뮬레이션을 사용 설정하려면 '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' 사전에 다음 기기 측정항목을 지정해야 합니다.

'width' - 기기 화면의 너비(픽셀)입니다.
"height" - 기기 화면의 높이(픽셀)
"pixelRatio" - 기기의 픽셀 비율
'touch' - 터치 이벤트를 에뮬레이션할지 여부입니다. 기본값은 true이며 보통 생략할 수 있습니다.
'mobile' - 브라우저가 모바일 사용자 에이전트로 작동해야 하는지 여부 (오버레이 스크롤바, 방향 이벤트 내보내기, 표시 영역에 맞게 콘텐츠 축소 등) 기본값은 true이며 보통 생략할 수 있습니다.

'clientHints' 사전에는 다음 항목이 포함될 수 있습니다.

"platform" - 운영 체제. 지정된 플랫폼에서 실행 중인 Chrome에서 반환된 값과 정확하게 일치하는 알려진 값 ('Android', 'Chrome OS', 'Chromium OS', 'Fuchsia', 'Linux', 'macOS', 'Windows')이거나 사용자가 정의한 값일 수 있습니다. 이 값은 필수입니다.
"mobile" - 브라우저가 모바일 또는 데스크톱 리소스 버전을 요청해야 하는지 여부입니다. 일반적으로 Android가 설치된 휴대전화에서 실행되는 Chrome은 이 값을 true로 설정합니다. 태블릿 Android 기기의 Chrome은 이 값을 false로 설정합니다. 데스크톱 기기의 Chrome에서도 이 값을 false로 설정합니다. 이 정보를 사용하여 사실적인 에뮬레이션을 지정할 수 있습니다. 이 값은 필수입니다.
나머지 항목은 선택사항이며 테스트와 관련이 없는 경우 생략할 수 있습니다.
- "brands" - 브랜드 / 주요 버전 쌍의 목록입니다. 생략하면 브라우저가 자체 값을 사용합니다.
- "fullVersionList" - 브랜드 / 버전 쌍의 목록입니다. 브라우저가 자체 값을 사용하는 것을 생략했습니다.
- 'platformVersion' - OS 버전입니다. 기본값은 빈 문자열입니다.
- 'model' - 기기의 모델입니다. 기본값은 빈 문자열입니다.
- 'architecture'(아키텍처) - CPU 아키텍처. 알려진 값은 'x86' 및 'arm'입니다. 사용자는 모든 문자열 값을 자유롭게 제공할 수 있습니다. 기본값은 빈 문자열입니다.
- "bitness" - 플랫폼 비트율. 알려진 값은 '32' 및 '64'입니다. 사용자는 모든 문자열 값을 자유롭게 제공할 수 있습니다. 기본값은 빈 문자열입니다.
- "wow64" - Windows 64에서 Windows 32 에뮬레이션 기본값은 false인 불리언 값입니다.

ChromeDriver는 'Android', 'Chrome OS', 'Chromium OS', 'Fuchsia', 'Linux', 'macOS', 'Windows' 등의 플랫폼에서 'clientHints'의 'userAgent' 값을 추론할 수 있습니다. 따라서 이 값은 생략할 수 있습니다.

'clientHints' 사전이 생략되면 (레거시 모드) ChromeDriver는 'userAgent'에서 'clientHints'를 추론하기 위해 최선을 다합니다. 하지만 이 기능은 '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 (예:Orientationchange 이벤트)를 사용할 수 없습니다.