Skip to content

Instantly share code, notes, and snippets.

@Bananamilk452

Bananamilk452/frontend_browser_test.md

Last active September 2, 2022 01:00
Show Gist options
  • Save Bananamilk452/51f7bd7d711b7675087a79bb80faca52 to your computer and use it in GitHub Desktop.
Save Bananamilk452/51f7bd7d711b7675087a79bb80faca52 to your computer and use it in GitHub Desktop.
Download ZIP
프론트엔드 웹 브라우저 크로스 테스트하기
Raw
frontend_browser_test.md

이 브라우저에선 되고 저 브라우저에선 안되는 우리 사이트를 살려주세요

테스트에 사용할 브라우저

  • Chrome (Chromium)
  • Firefox
  • Safari (Webkit)
  • Opera
  • Edge
  • 네이버 웨일 (한국 한정)
  • (Mobile) Android Webview, Safari Mobile

Chromium, Firefox, Webkit 한번에 테스트하기

일부 캡챠나 특수한 스크립트 (봇 감지 등)이 들어간 사이트에는 사용하기 어렵습니다. WebDriver를 통해 구동되기 때문에 봇 탐지에 걸리는 경우가 많습니다.

Playwright라는 헤드리스 브라우저 에뮬레이터 웹드라이버...어쩌구 패키지를 사용합니다

Node.js와 npm 설치가 필요합니다 https://nodejs.org/en/download

참고 docs: https://playwright.dev/docs/cli#open-pages

// 세 브라우저 전체 다운로드
npx playwright install

// 크로미움으로 열기
npx playwright open <주소>

// 웹킷으로 열기
npx playwright wk <주소>

// 파이어폭스로 열기
npx playwright ff <주소>

Chrome / Chromium

크로미움은 크롬의 전신으로, 구글의 때를 덜 탄 버전입니다.

Firefox

유일하게 현재 Webkit이나 Webkit 파생 엔진을 안 쓰는 희귀한 브라우저입니다

Safari

사파리는 윈도우를 지원하지 않습니다. (2012년 버전 이후로 멸종) 따라서 웹킷 자체 빌드나 에피파니 브라우저 (GNOME Web)를 사용해주세요

Playwright 버전은 WinCairo를 사용하는 버전으로 약간의 성능 저하가 있습니다. 많은 연산량이 필요할 경우 아래의 에피파니 브라우저를 사용해주세요

  • 에피파니 브라우저 (리눅스), 윈도우 11 WSL 2 Ubuntu 기준

에피파니 브라우저도 사파리와 같이 쌩 Webkit을 사용하는 브라우저입니다

WSL 2의 GUI 지원으로 윈도우에서도 에피파니 브라우저를 사용할 수 있습니다.

sudo apt install epiphany-browser

epiphany-browser

Opera

오페라는 웹킷 기반입니다 (그래도 지원 내용은 사파리랑 다름)

Edge

일부 영상 코덱이나 기능은 크롬과 지원 부분이 다릅니다

네이버 웨일

제발 브라우저 좀 그만 만들어

모바일 환경 테스트

직접 모바일 폰에서 테스트하는게 제일 마음 편합니다 chrome://inspect 사용 시 모바일 브라우저 디버깅도 가능

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment