Cross Browsing Testing

Cross Browsing Testing

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

https://caniuse.com/

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

• 브라우저 별로 동일한 코드를 다른 방법으로 렌더링하기 때문에 확인이 필요하다.

• 여러 브라우저 및 기기 내에서 기능이 일관되게 동작하고 동일한 사용자 경험을 제공해야 한다.

• 특정 브라우저나 기기에서 동작을 안하게 되면 서비스의 신뢰도가 떨어져 사용자가 이탈하게 된다.

언제 테스트를 해야할까?

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

테스트 유형

• 특정 기기/브라우저 에서 정상 동작하는지 기능 테스트

• 디자인 시안과 일치하는지 테스트

• 기기 너비에 맞게 레이아웃이 깨지지 않는지 스크린 너비를 수정하거나 모바일 버전과 데스크탑 버전을 확인하는 반응형 테스트

• 지원하는 브라우저를 수동으로 테스트하는 것은 많은 비용이 발생하므로 end-to-end 테스트를 배포 파이프라인에 포함시켜 자동화된 테스트 구축

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

BrowserStack

• 실시간으로 여러 브라우저/기기에서 사이트를 구동해 볼 수 있는 라이브 테스팅 도구

• 스냅샷 테스팅 지원

  • SDK 설치 필요

  • 스냅샷을 recording 하기 위해선 Cypress를 이용한 end-to-end 테스트 코드가 추가적으로 필요

• 깃헙과 연동하여 브랜치 별 비교 가능

• 브라우저 별, 버전 별 스크린 샷 지원

• 시각적으로 달라진 부분 하이라이팅

Lambdatest

• 마찬가지로 실시간으로 사이트를 구동해볼 수 있는 라이브 테스팅 지원

• 스크린 샷, 비디오 녹화를 통해 버그 리포팅 가능 (Github, Jira, Trello, 협업 툴 연동 가능)

• 수동 테스팅은 일정 한도 내 무료

• 디버깅 개발자 콘솔 지원

Comparium

• 스크린샷 테스팅 및 라이브 테스팅 지원

• 라이브 테스팅은 Max OS 지원 X

• 브라우저, OS, 해상도 별 테스트 가능

• 무료 plan은 월 1K 스크린샷, 40번 라이브 테스팅 가능

• 스크린 샷 테스팅, 라이브 테스팅 동시에 테스팅 불가

• 페이지를 새로고침하면 테스트를 첨부터 다시 시작