# Cross Browsing Testing

## Cross Browsing Testing

> 다양한 웹 브라우저 및 디바이스에서 웹 애플리케이션이 일관되게 동작하는지 테스트

<https://caniuse.com/>

### 크로스 브라우징 테스트가 필요한 이유

* 브라우저 별로 동일한 코드를 다른 방법으로 렌더링하기 때문에 확인이 필요하다.
* 여러 브라우저 및 기기 내에서 기능이 일관되게 동작하고 동일한 사용자 경험을 제공해야 한다.
* 특정 브라우저나 기기에서 동작을 안하게 되면 서비스의 신뢰도가 떨어져 사용자가 이탈하게 된다.

### 언제 테스트를 해야할까?

* 특정 브라우저에서 동작이 안되는 이슈는 크게는 코드를 갈아엎어야 하는 상황이 올 수 있으므로 개발 단계에서 틈틈히 확인하는 습관 필수

### 테스트 유형

* 특정 기기/브라우저 에서 정상 동작하는지 기능 테스트&#x20;
* 디자인 시안과 일치하는지 테스트
* 기기 너비에 맞게 레이아웃이 깨지지 않는지 스크린 너비를 수정하거나 모바일 버전과 데스크탑 버전을 확인하는 반응형 테스트&#x20;
* 지원하는 브라우저를 수동으로 테스트하는 것은 많은 비용이 발생하므로 end-to-end 테스트를 배포 파이프라인에 포함시켜 자동화된 테스트 구축

### 크로스 브라우징 테스트 도구

#### [BrowserStack](https://www.browserstack.com/cross-browser-testing)

* 실시간으로 여러 브라우저/기기에서 사이트를 구동해 볼 수 있는 [라이브 테스팅](https://www.browserstack.com/users/sign_in) 도구
* 스냅샷 테스팅 지원
  * SDK 설치 필요
  * 스냅샷을 recording 하기 위해선 Cypress를 이용한 end-to-end 테스트 코드가 추가적으로 필요
* 깃헙과 연동하여 브랜치 별 비교 가능
* 브라우저 별, 버전 별 스크린 샷 지원
* 시각적으로 달라진 부분 하이라이팅

#### [Lambdatest](https://www.lambdatest.com/)

* 마찬가지로 실시간으로 사이트를 구동해볼 수 있는 라이브 테스팅 지원
* 스크린 샷, 비디오 녹화를 통해 버그 리포팅 가능 (Github, Jira, Trello, 협업 툴 연동 가능)
* 수동 테스팅은 일정 한도 내 무료
* 디버깅 개발자 콘솔 지원

#### [Comparium](https://comparium.app/)

* 스크린샷 테스팅 및 라이브 테스팅 지원
* 라이브 테스팅은 Max OS 지원 X
* 브라우저, OS, 해상도 별 테스트 가능
* 무료 plan은 월 1K 스크린샷, 40번 라이브 테스팅 가능
* 스크린 샷 테스팅, 라이브 테스팅 동시에 테스팅 불가
* 페이지를 새로고침하면 테스트를 첨부터 다시 시작
