콘텐츠로 이동

Playwright 에뮬레이션 (모바일·네트워크)

개요

우리 제품이 실제 브라우저에서만 잘 되는지 확인하려면, 다른 조건에서도 잘 되는지 봐야 해요. 모바일에서 레이아웃이 깨지거나, 특정 시간대·언어에서 표시가 어긋나거나, 네트워크가 끊겼을 때 동작이 달라지는 일이 흔하죠. Playwright는 에뮬레이션(emulation) 으로 이렇게 다양한 환경을 재현해요. 기기(user agent·화면 크기·터치), 로케일·시간대, 위치, 권한, 색상 모드, 네트워크 상태까지 브라우저가 실제 그런 환경인 것처럼 흉내 낼 수 있어요. 이 페이지는 공식 문서 기준으로 에뮬레이션할 수 있는 것들과 그 설정법을 풀어요.

핵심 개념

기기(Device) 에뮬레이션

Playwright는 미리 정의된 기기 레지스트리를 제공해요. devices['iPhone 13'], devices['Desktop Chrome']처럼 쓰면 그 기기의 userAgent, 화면 크기, viewport, hasTouch(터치 지원 여부)를 한 번에 적용해요. 설정 파일의 projects에서 기기별로 다른 프로젝트를 만들어, 한 번의 실행으로 데스크톱과 모바일을 모두 돌릴 수 있어요.

주의할 점은 미리 정의된 기기가 특정 플랫폼을 가정한다는 거예요. 예를 들어 "Desktop Chrome"은 Windows 특정 user agent 문자열을 제공해요. 테스트가 도는 플랫폼의 user agent를 그대로 쓰고 싶다면, 기기를 펼친 뒤 userAgent: undefined로 다시 풀어주면 돼요.

viewport · 기기별 화면 크기

기기 설정에 viewport가 포함돼 있는데, 테스트별로 덮어쓸 수도 있어요. test.use({ viewport: { width: 1600, height: 1200 } })처럼 쓰면 해당 테스트만 다른 화면 크기로 돌아요. devices를 펼친 뒤 viewport를 다시 정의할 때는 순서에 주의해요 — 기기가 viewport를 정하므로, 그 뒤에 선언해야 오버라이드가 의미가 있어요.

로케일과 시간대

locale과 timezoneId로 브라우저의 언어와 시간대를 바꿔요. 전역 설정(use)으로 두면 모든 테스트에, test.use()로 두면 특정 테스트에만 적용돼요. 다만 이건 브라우저의 로케일·시간대만 바꿔요. 테스트 러너 자체의 시간대를 바꾸려면 TZ 환경 변수를 써야 해요.

권한·위치·색상 모드

  • permissions — permissions: ['notifications']처럼 브라우저 권한을 미리 허용해요. 특정 도메인에만 context.grantPermissions(..., { origin })으로 줄 수도 있고, clearPermissions()로 모두 되돌릴 수 있어요.
  • geolocation — geolocation: { longitude, latitude }와 함께 permissions: ['geolocation']을 주면 위치 기반 동작을 재현해요. 실행 중에 context.setGeolocation()으로 바꿀 수도 있어요(컨텍스트의 모든 페이지에 적용돼요).
  • colorScheme — 'light' 또는 'dark'로 사용자의 색상 모드를 흉내 내요. 미디어 타입은 page.emulateMedia()로 바꿔요.

네트워크·기타 상태

offline: true로 네트워크가 끊긴 상태를, javaScriptEnabled: false로 자바스크립트가 꺼진 상태를 재현할 수 있어요. 이렇게 하면 오프라인일 때의 폴백 UI나, JS 없이도 콘텐츠가 잘 보이는지를 검증할 수 있죠. user agent는 userAgent 속성으로 직접 덮어쓸 수 있어요.

실제 적용 (데이터스케쳐스)

웹빌더로 만든 웹사이트는 방문자가 어떤 기기로 보는지가 제각각이에요. 데스크톱 Chrome에서만 테스트하다가 모바일에서 표의 경계선이 깨지면, 그 누구보다 커스텀 도메인을 산 고객이 먼저 알아차려요. devices['iPhone 13'] 같은 모바일 프로젝트를 테스트 구성에 넣어 두면, 문서 변환 후 렌더링이 모바일 viewport에서도 유지되는지 반복 확인할 수 있어요.

또한 다국어·시간대 노출이 있는 서비스라면 locale·timezoneId로 특정 언어/시간대에서 표시가 어긋나지 않는지, 오프라인 상황에서 오류가 아니라 우아한 폴백이 나오는지도 에뮬레이션으로 재현해요. 이렇게 "실제 사용자가 겪을 조건"을 테스트로 끌어들이면, E2E가 기능뿐 아니라 환경 회귀까지 잡아줘요. 요소를 어떻게 찾을지는 셀렉터, 기다림 동작은 자동 대기에서 이어져요.

더 알아보기