브라우저마다 안되는 사이트가 있다? 프론트엔드 웹 브라우저 테스트하기

프론트엔드 웹 브라우저 크로스 테스트 가이드

이 브라우저에선 되고 저 브라우저에선 되는 우리 사이트를 살려주세요 특히 영상이요

테스트에 사용할 브라우저

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

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

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

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

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

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

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

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

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

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

Chrome / Chromium

• 크롬 https://www.google.com/intl/ko_kr/chrome/
• 크롬 베타 https://www.google.com/intl/ko/chrome/beta/
• 크로미움 trunk 빌드 https://download-chromium.appspot.com

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

Firefox

• 파이어폭스 https://www.mozilla.org/ko/firefox/new/
• 파이어폭스 ESR (기업용 LTS, 최신 아님, 보안만 최신) https://www.mozilla.org/ko/firefox/enterprise/
• 파이어폭스 개발자 에디션 (베타와 나이틀리 사이, 개발자 특화 기능) https://www.mozilla.org/ko/firefox/developer/

Safari

사파리는 윈도우를 지원하지 않습니다. 따라서 웹킷 자체 빌드나 그놈 웹 (에피파니) 브라우저를 사용해주세요

• 웹킷 자체 빌드 https://build.webkit.org/#/builders/27 에러가 남 (작동 안 됨). 위에 Playwright 버전을 사용해주세요

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

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

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

sudo apt install epiphany-browser

epiphany-browser

Opera

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

• 오페라 https://www.opera.com/ko

Edge

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

• 엣지 다운로드 https://www.microsoft.com/ko-kr/edge

네이버 웨일

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

• 네이버 웨일 다운로드 https://whale.naver.com/

모바일 환경 테스트

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

• 안드로이드 VM으로 테스트 (실제 휴대폰과 동일한 환경이 필요한 경우) https://developer.android.com/studio/run/managing-avds
• 오페라 미니 - 진짜 최소한의 기능만 담은 브라우저. 이걸로 사이트가 돌아가면 신기한 수준 https://play.google.com/store/apps/details?id=com.opera.mini.native

gist: https://gist.github.com/Bananamilk452/51f7bd7d711b7675087a79bb80faca52