Cross Browsing Testing | jtwjs Dev Wiki

Cross Browsing Testing

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

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

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

언제 테스트를 해야할까?

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

테스트 유형

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

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

스냅샷 테스팅 지원
- SDK 설치 필요
- 스냅샷을 recording 하기 위해선 Cypress를 이용한 end-to-end 테스트 코드가 추가적으로 필요
깃헙과 연동하여 브랜치 별 비교 가능
브라우저 별, 버전 별 스크린 샷 지원
시각적으로 달라진 부분 하이라이팅

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

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