크로스 웹 브라우저 테스트 툴이 왜 필요한가?

예전에는 웹 브라우저 호환성을 맞추기 위해서 실제 여러 브라우저와 장비를 구축해서 테스트했었다. 웹 개발은 UI도 힘들지만, 호환성을 맞추는 부분이 가장 힘들다. 하지만 지금은 상황이 훨씬 좋아져서 크롬 등의 사용이 높아졌고 비슷한 엔진을 사용하는 브라우저들이 많아졌지만 여전히 구 브라우저나 특정 브라우저를 사용하는 사용자는 존재하고 있으며 미묘한 차이가 있기 때문에 여전히 브라우저 간 테스트는 수행이 필요하다.

브라우저마다 화면이 다르게 보인다는 것은 개발자 입장에서 매우 골치 아픈 일이다. 그리고 사용자의 입장에서도 매우 당황스럽다. 일부 UI가 다르게 보이는 정도라면 괜찮지만, 이 문제로 인해 기능이 제대로 동작하지 않는다면 큰 문제가 될 수 있다. 수익을 추구하는 쇼핑몰 같은 웹 서비스라면 수익에 직접적인 영향을 줄 수 있을 것이다.

쇼핑몰의 예로 전자 상거래를 예로 결제 과정에서 69.89% 가 포기한다고 하는데 그 중 17%가 웹 사이트 오류와 같은 이유 때문이라고 한다. 연간 50 만 건의 결제가 발생한다고 가정해보면, 브라우저 간 테스트로 인해 발생할 수있는 오류 및 충돌로 인해 약 6만건의 매출이 손실될 수 있다는 것을 의미한다. 결코 작은 수치가 아니다.

어떤 브라우저를 테스트해야 할까?

그럼 어떤 브라우저를 테스트해야 할까? 테스트 대상이 되는 브라우저 선택에 있어서 가장 쉬운 방법은 사용자가 가장 많이 쓰는 브라우저 순으로 확인하는 것이다. 사용자가 많이 사용하는 브라우저는 Google 웹 로그 분석 또는 다른 웹 분석 추적 소프트웨어를 사용하여 쉽게 찾을 수 있는데 공개된 전 세계 통계는 다음과 같다.

  • 크롬 : 64.92%
  • 사파리 : 15.97%
  • 파이어 폭스 : 4.33%
  • 삼성 인터넷 : 3.29%
  • UC : 2.94%
  • 오페라 : 2.34%
  • Microsoft Edge : 2.05%
  • 인터넷 익스플로러 : 1.98%

2019 년 11 월 현재

통계정보를 바탕으로 크롬을 가장 먼저 확인하고 데스크톱 환경이라면 추가로 인터넷 익스플로러와 Edge의 테스트를 추천한다. 그리고 모바일 환경이라면 역시 크롬과 사파리 그리고 크게 다르지는 않겠지만 삼성 인터넷도 추가로 확인해보는 것이 좋겠다.

크로스 웹 브라우저 테스트 툴 10

Browserstack

실제 Android 및 iOS 장치에서 실행되는 2,000 개가 넘는 웹 브라우저에 직접 테스트할 수 있다고 알려져 있다. 개발자에게 실제 화면의 스크린샷을 찍어서 디버깅 하는데 활용 할 수 있다. (스크린샷 만큼 좋은 정보도 없다!) 그리고 이 서비스를 이용하면 실제 장비가 없는 곳에서도 테스트가 가능하기 때문에 매우 유용하다. 또한 화면 해상도 변경도 지원하고 있으므로 여러 해상도에서 테스트 해볼 수 있다. 또한 오픈 소스 도구인 Selenium 을 이용해 자동화 테스트도 지원하고 있다.

브라우저 간 테스트 도구와 관련하여 위의 기능에서는 상당히 잘 되있다는 느낌을 받았다. 1년을 결제하면 최소 $9/월 부터 사용할 수 있다. 하지만 한국에서는 네트웍 속도가 느린 편이였고 고객지원 또한 응답이 꽤 느렸다. 문제가 생겼을 때 이를 해결하려면 서로 메일을 주고 받으면 몇 일은 소요되는 듯 하다. 새로 가입하면 30분간의 트라이얼 시간을 주기 때문에 한번 사용해 보고 결정하는 것이 좋을 것이다.

LambdaTest

실시간 브라우저 테스트, 자동화 테스트, 응답 테스트, 스크린 샷 테스트를 지원하고 언제나 고객 센터를 통해서 지원받을 수 있다. 최저 요금은 년 결제 기준 $ 15/월 부터 시작하지만 결국 Browserstack과 기능을 비교해보면 요금은 거의 비슷한 수준이다. 매우 사용 빈도가 적은 경우 결제하지 않고 매월 주어지는 무료 시간으로 조금씩 사용할 수도 있다. 처음 크로스 브라우저 테스트를 사용하시는 분께는 추천 할 만한 서비스이다.

또한 다양한 화면 해상도에서 여러 운영 체제의 1,400 개 이상의 브라우저와 다양한 버전에서 웹 사이트 또는 웹 응용 프로그램을 테스트 할 수 있다. 이러한 설정을 통해 프로젝트가 모든 환경에서 완벽하게 배포되도록 할 수 있다. 예를 들어 배포 스크립트 중간에 이런 다양한 해상도에서의 자동화 테스트도 추가할 수도 있다.

CrossBrowserTesting

Selenium을 통한 수동 및 자동 테스트를 제공하고 있고 BrowserStack과 유사한 구독 정책을 제공하고 있다. 브라우저 확장 프로그램 및 Chrome 개발자 도구 및 FireBug와 같은 개발자 도구를 이용해서 전체 액세스 뿐만 아니라 스와이프 동작 등을 사용하여 상호 작용할 수있는 기능, 프런트엔드 디버깅을 수행할 수 있다. 특히 많이 브라우저를 지원하기 때문에 브라우저 수가 중요하게 생각된다면 Browserstack과 비슷하게 좋은 선택이 될 수 있다.

Browserling

$ 19/ 월로 상대적으로 저렴한 크로스 웹 브라우저 테스트 툴 중 하나이지만 가치면에서 Lambdatest 만큼의 가치가 있다. 특히 1024x768 Windows 7에서 동작하는 Internet Explorer 11은 무료로 3분간 제한없이 사용할 수 있다는 장점이 있다. 급하게 간단히 테스트를 하기에는 괜찮은 툴이라고 생각한다. 또한 Chrome, Firefox, Opera 및 Safari 용 확장 기능도 지원하고 있다. (2019년 12월 현재 IE의 확장기능은 아직 지원하지 않는다.)

실제 사용해보니 테스트 중 커서가 반응이 느리게 따라 다니는 것은 조금 거슬릴 수 있고, 무료 사용만으로는 화면이 작아서 브라우저 개발자 도구는 사용이 어려울 수 있다는 느낌을 받았다.

Experitest

Experitest는 꽤 표준적인 기능을 제공하고 비용은 $ 9/월 부터 제공하고 있다. Lambdatest와 같은 프리미엄 옵션도 제공합니다. Experitest는 Lambdatest와 같이 잘 정리되어 있지는 않지만 매달 3시간의 무료 사용 시간도 제공하고 있어서 가격대비 괜찮은 옵션이 될 수 있다. 포함 되어있는 SeeTest Continuous Platform은 다양한 브라우저 및 실제 모바일 장치에서 실제 최종 사용자 조건 하에서 웹 및 모바일 애플리케이션 테스트도 지원한다.

Functionize

Functionize는 소프트웨어 테스트를 자동화하는 기계 학습 및 AI 플랫폼이다. 대부분의 테스트 제품에는 사용자 지정 스크립트 업로드, 소프트웨어 다운로드 또는 로컬 서버 인프라의 조합이 필요하지만 Functionize는 NLP 또는 라이브 추적 위젯 (자율 테스트 생성)을 사용하여 빌드하는 테스트 자동화 솔루션을 제공한다.

Saucelabs

다른 크로스 브라우저 테스트 도구와 유사한 기능을 제공하지만 실제 장치에서 테스트하는 경우 $ 89/월 부터 서비스를 제공한다. “세계 최대의 지속적인 테스트 클라우드”를 가지고 있다고 주장하고 있는데, 만약 예산이 넉넉하다면 시도해 볼 가치가 있다.

700개 이상의 서로 다른 브라우저 플랫폼, 운영 체제 및 장치 조합에서 클라우드에서 테스트를 실행할 수 있으며 Selenium, Appium 및 JavaScript 단위 테스트 프레임 워크를 사용하여 데스크탑 및 모바일 애플리케이션의 자동 및 수동 테스트를 위한 포괄적 인 테스트 인프라를 제공한다. VM 설정 또는 유지 관리가 필요 하지 않으며 테스트가 실행되는 동안 라이브 중단 점에 액세스하여 문제를 수동으로 조사 할 수도 있다. Sauce Labs는 고객 방화벽 내부의 응용 프로그램을 테스트 하기 위한 보안 테스트 프로토콜 인 Sauce Connect도 제공한다.

CI (Continuous Integration) 및 CD (Continuous Delivery) 파이프 라인에 대한 자동 테스트도 제공하고 있으며 Jenkins , Bamboo, Travis CI , Circle CI 및 TeamCity를 포함한 여러 CI 플랫폼 과 플러그인 통합을 제공한다.

다른 서비스에서는 볼수 없었는데, 가입 시와 로그인 시 데이터 센터의 위치를 설정할 수 있었다. 미국과 유럽으로 설정이 가능한데 때문에 국내에서는 빠른 속도를 기대하기는 힘들 것 같다. 추후 국내 사용자가 많아졌을 때 아시아 쪽 지역의 데이터 센터가 확대될 것을 기대해 본다.

EndTest

EndTest는 Codeless Automated Testing(코드가 없는 자동화 테스트)라는 코드를 제공 하므로 Selenium과 같은 방식으로 코드를 작성하지 않고도 브라우저에서 반복 테스트를 자동화 할 수 있다. 기계 학습에 의해 구동되고 사용자는 웹 응용 프로그램 및 모바일 응용 프로그램에 대한 테스트를 쉽게 생성, 관리 및 실행할 수 있다. EndTest는 무료 서비스를 제공하지만 그 이상을 필요로 하는 경우 여러 가지 유료 옵션도 제공한다. 가입하면 도구의 작동 방식을 이해하는 데 도움이 되는 여러 데모 테스트도 제공하고 있다.

Selenium

자동 테스트에 대해 깊이 그리고 보다 자신에게 맞는 툴을 생각하고 있다면 Selenium을 사용하는게 좋다. Selenium은 가장 널리 사용되는 프레임 워크 중 하나이며 브라우저 작업을 자동화 할 수 있습니다. Selenium IDE는 액션을 기록하고 재생할 수고 Firefox Addon과 거의 모든 주요 언어로 테스트를 코딩 할 수있는 Selenium WebDriver를 제공한다. 좀더 전문적이고 자신만의 테스트 자동화를 구축하고 싶다면 Selenium을 선택하는 것도 고려해 볼 수 있다.

IE Tab

Internet Explorer에서 테스트가 가능하므로 약간 번거로운 방법이 될 수는 있지만 IE에서만 동작하는 ActiveX를 테스트 해야할 경우 IE Tab의 선택을 고려해 볼 수 있다. IE Tab은 Internet Explorer를 에뮬레이트하는 탭을 열 수 있다. IE는 웹 표준과의 차이 측면에서 가장 큰 난제를 제시하므로 작업 하면서 사이트를 사용 해보면 스트레스를 줄일 수 있을 것이다.

결론

대부분의 크로스 브라우저 테스트 툴들은 기능적으로 꽤 만족스러운 수준이었다. 가격도 일부 서비스를 제외하고는 월 $19로 비슷했다. 따라서 툴을 선택할 때 자신이 사용하고자 하는 목적과 서비스에서 제공하는 부가 서비스가 원하는 구성을 구현할 수 있는지를 먼저 확인하는 것이 좋을 것이다. 또한, 라이브 테스트일 경우 대부분 서버가 미국 또는 유럽만을 주로 커버하고 있기 때문에 자신이 속한 지역에서 원활한 서비스가 제공되는지도 확인해보는 것이 좋겠다.