모바일 에뮬레이션

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'에 지정되어야 합니다. 사전:

  • '너비' - 기기 화면의 너비(픽셀)입니다.
  • &quot;height&quot; - 기기 화면의 높이(픽셀)입니다.
  • '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>
    • '브랜드' - 브랜드 / 메이저 버전 쌍의 목록. 생략하면 브라우저가 자체 값을 사용합니다.
    • &quot;fullVersionList&quot; - 브랜드 / 버전 쌍의 목록. 브라우저가 자체 값을 사용하는 경우를 생략했습니다.
    • '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 (예: 방향 변경 이벤트)를 사용할 수 없습니다.